Skip to content

Commit c88e9f7

Browse files
OviliaOvilia
committed
feat: update themes
1 parent 3898955 commit c88e9f7

20 files changed

Lines changed: 535 additions & 77 deletions

File tree

‎src/chart/funnel/FunnelSeries.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ class FunnelSeriesModel extends SeriesModel<FunnelSeriesOption> {
155155
left: 80,
156156
top: 60,
157157
right: 80,
158-
bottom: 60,
158+
bottom: 65,
159159
// width: {totalWidth} - left - right,
160160
// height: {totalHeight} - top - bottom,
161161

‎src/chart/line/LineSeries.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
167167
},
168168

169169
lineStyle: {
170-
width: 2,
170+
width: 3,
171171
type: 'solid'
172172
},
173173

@@ -188,7 +188,7 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
188188
smooth: false,
189189
smoothMonotone: null,
190190
symbol: 'emptyCircle',
191-
symbolSize: 4,
191+
symbolSize: 8,
192192
symbolRotate: null,
193193

194194
showSymbol: true,

‎src/chart/map/MapSeries.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -329,7 +329,7 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
329329
itemStyle: {
330330
borderWidth: 0.5,
331331
borderColor: tokens.color.border,
332-
areaColor: tokens.color.backgroundTint
332+
areaColor: tokens.color.background
333333
},
334334

335335
emphasis: {
@@ -338,7 +338,7 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
338338
color: tokens.color.primary
339339
},
340340
itemStyle: {
341-
areaColor: tokens.color.background
341+
areaColor: tokens.color.backgroundShade
342342
}
343343
},
344344

‎src/chart/pie/PieSeries.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@ class PieSeriesModel extends SeriesModel<PieSeriesOption> {
216216
colorBy: 'data',
217217
// 默认全局居中
218218
center: ['50%', '50%'],
219-
radius: [0, '75%'],
219+
radius: [0, '50%'],
220220
// 默认顺时针
221221
clockwise: true,
222222
startAngle: 90,
@@ -278,13 +278,13 @@ class PieSeriesModel extends SeriesModel<PieSeriesOption> {
278278
// 引导线两段中的第一段长度
279279
length: 15,
280280
// 引导线两段中的第二段长度
281-
length2: 15,
281+
length2: 30,
282282
smooth: false,
283283
minTurnAngle: 90,
284284
maxSurfaceAngle: 90,
285285
lineStyle: {
286286
// color: 各异,
287-
width: 1,
287+
width: 2,
288288
type: 'solid'
289289
}
290290
},

‎src/chart/sunburst/sunburstVisual.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,19 @@ import GlobalModel from '../../model/Global';
2323
import SunburstSeriesModel, { SunburstSeriesNodeItemOption } from './SunburstSeries';
2424
import { Dictionary, ColorString } from '../../util/types';
2525
import { TreeNode } from '../../data/Tree';
26+
import tokens from '../../visual/tokens';
2627

2728
export default function sunburstVisual(ecModel: GlobalModel) {
2829

2930
const paletteScope: Dictionary<ColorString> = {};
3031

3132
// Default color strategy
3233
function pickColor(node: TreeNode, seriesModel: SunburstSeriesModel, treeHeight: number) {
34+
if (node.depth === 0) {
35+
// Don't use palette color for the root node, because it's displayed only when drilling down.
36+
return tokens.color.neutral50;
37+
}
38+
3339
// Choose color from palette based on the first level.
3440
let current = node;
3541
while (current && current.depth > 1) {

‎src/chart/treemap/TreemapSeries.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -245,10 +245,10 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
245245
// Disable progressive rendering
246246
progressive: 0,
247247
// size: ['80%', '80%'], // deprecated, compatible with ec2.
248-
left: 'center',
249-
top: 'middle',
250-
width: '80%',
251-
height: '80%',
248+
left: tokens.size.l,
249+
top: tokens.size.xxxl,
250+
right: tokens.size.l,
251+
bottom: tokens.size.xxxl,
252252
sort: true,
253253

254254
clipWindow: 'origin',
@@ -271,7 +271,7 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
271271
show: true,
272272
height: 22,
273273
left: 'center',
274-
top: 'bottom',
274+
bottom: tokens.size.m,
275275
// right
276276
// bottom
277277
emptyItemWidth: 25, // Width of empty node.

‎src/component/dataZoom/SliderZoomModel.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
172172
},
173173
areaStyle: {
174174
color: tokens.color.accent30,
175-
opacity: 0.2
175+
opacity: 0.5
176176
}
177177
},
178178

@@ -190,7 +190,7 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
190190
moveHandleSize: 7,
191191
moveHandleIcon: 'path://M-320.9-50L-320.9-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-348-41-339-50-320.9-50z M-212.3-50L-212.3-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-239.4-41-230.4-50-212.3-50z M-103.7-50L-103.7-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-130.9-41-121.8-50-103.7-50z',
192192
moveHandleStyle: {
193-
color: tokens.color.accent30,
193+
color: tokens.color.accent40,
194194
opacity: 0.5
195195
},
196196

@@ -200,7 +200,7 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
200200
zoomLock: false, // Whether disable zoom.
201201

202202
textStyle: {
203-
color: tokens.color.quaternary
203+
color: tokens.color.tertiary
204204
},
205205

206206
brushSelect: true,
@@ -213,7 +213,7 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
213213
show: true
214214
},
215215
handleStyle: {
216-
borderColor: tokens.color.accent30
216+
borderColor: tokens.color.accent50
217217
},
218218
moveHandleStyle: {
219219
opacity: 0.8

‎src/component/dataZoom/SliderZoomView.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ import tokens from '../../visual/tokens';
4848
const Rect = graphic.Rect;
4949

5050
// Constants
51-
const DEFAULT_LOCATION_EDGE_GAP = 7;
51+
const DEFAULT_LOCATION_EDGE_GAP = 15;
5252
const DEFAULT_FRAME_BORDER_WIDTH = 1;
5353
const DEFAULT_FILLER_SIZE = 30;
5454
const DEFAULT_MOVE_HANDLE_SIZE = 7;

‎src/component/legend/LegendModel.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -453,8 +453,8 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
453453

454454
left: 'center',
455455
// right: 'center',
456-
top: 0,
457-
// bottom: null,
456+
// top: 0,
457+
bottom: tokens.size.m,
458458

459459
align: 'auto',
460460

‎src/component/timeline/SliderTimelineModel.ts‎

Lines changed: 25 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { DataFormatMixin } from '../../model/mixin/dataFormat';
2222
import { mixin } from 'zrender/src/core/util';
2323
import SeriesData from '../../data/SeriesData';
2424
import { inheritDefaultOption } from '../../util/component';
25+
import tokens from '../../visual/tokens';
2526

2627
export interface SliderTimelineOption extends TimelineOption {
2728
}
@@ -37,7 +38,7 @@ class SliderTimelineModel extends TimelineModel {
3738
static defaultOption: SliderTimelineOption = inheritDefaultOption(TimelineModel.defaultOption, {
3839

3940
backgroundColor: 'rgba(0,0,0,0)', // 时间轴背景颜色
40-
borderColor: '#ccc', // 时间轴边框颜色
41+
borderColor: tokens.color.border, // 时间轴边框颜色
4142
borderWidth: 0, // 时间轴边框线宽，单位px，默认为0（无边框）
4243

4344
orient: 'horizontal', // 'vertical'
@@ -53,7 +54,7 @@ class SliderTimelineModel extends TimelineModel {
5354
lineStyle: {
5455
show: true,
5556
width: 2,
56-
color: '#DAE1F5'
57+
color: tokens.color.accent10
5758
},
5859
label: { // 文本标签
5960
position: 'auto', // auto left right top bottom
@@ -65,23 +66,23 @@ class SliderTimelineModel extends TimelineModel {
6566
rotate: 0,
6667
// formatter: null,
6768
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
68-
color: '#A4B1D7'
69+
color: tokens.color.tertiary
6970
},
7071
itemStyle: {
71-
color: '#A4B1D7',
72-
borderWidth: 1
72+
color: tokens.color.accent20,
73+
borderWidth: 0
7374
},
7475

7576
checkpointStyle: {
7677
symbol: 'circle',
7778
symbolSize: 15,
78-
color: '#316bf3',
79-
borderColor: '#fff',
80-
borderWidth: 2,
81-
shadowBlur: 2,
82-
shadowOffsetX: 1,
83-
shadowOffsetY: 1,
84-
shadowColor: 'rgba(0, 0, 0, 0.3)',
79+
color: tokens.color.accent50,
80+
borderColor: tokens.color.accent50,
81+
borderWidth: 0,
82+
shadowBlur: 0,
83+
shadowOffsetX: 0,
84+
shadowOffsetY: 0,
85+
shadowColor: 'rgba(0, 0, 0, 0)',
8586
// borderColor: 'rgba(194,53,49, 0.5)',
8687
animation: true,
8788
animationDuration: 300,
@@ -99,47 +100,42 @@ class SliderTimelineModel extends TimelineModel {
99100

100101
position: 'left', // 'left' 'right' 'top' 'bottom'
101102

102-
playIcon: 'path://M31.6,53C17.5,53,6,41.5,6,27.4S17.5,1.8,31.6,1.8C45.7,1.8,57.2,13.3,57.2,27.4S45.7,53,31.6,53z M31.6,3.3 C18.4,3.3,7.5,14.1,7.5,27.4c0,13.3,10.8,24.1,24.1,24.1C44.9,51.5,55.7,40.7,55.7,27.4C55.7,14.1,44.9,3.3,31.6,3.3z M24.9,21.3 c0-2.2,1.6-3.1,3.5-2l10.5,6.1c1.899,1.1,1.899,2.9,0,4l-10.5,6.1c-1.9,1.1-3.5,0.2-3.5-2V21.3z', // jshint ignore:line
103-
stopIcon: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z', // jshint ignore:line
103+
playIcon: 'path://M15 0C23.2843 0 30 6.71573 30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15C0 6.71573 6.71573 0 15 0ZM15 3C8.37258 3 3 8.37258 3 15C3 21.6274 8.37258 27 15 27C21.6274 27 27 21.6274 27 15C27 8.37258 21.6274 3 15 3ZM11.5 10.6699C11.5 9.90014 12.3333 9.41887 13 9.80371L20.5 14.1338C21.1667 14.5187 21.1667 15.4813 20.5 15.8662L13 20.1963C12.3333 20.5811 11.5 20.0999 11.5 19.3301V10.6699Z', // jshint ignore:line
104+
stopIcon: 'path://M15 0C23.2843 0 30 6.71573 30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15C0 6.71573 6.71573 0 15 0ZM15 3C8.37258 3 3 8.37258 3 15C3 21.6274 8.37258 27 15 27C21.6274 27 27 21.6274 27 15C27 8.37258 21.6274 3 15 3ZM11.5 10C12.3284 10 13 10.6716 13 11.5V18.5C13 19.3284 12.3284 20 11.5 20C10.6716 20 10 19.3284 10 18.5V11.5C10 10.6716 10.6716 10 11.5 10ZM18.5 10C19.3284 10 20 10.6716 20 11.5V18.5C20 19.3284 19.3284 20 18.5 20C17.6716 20 17 19.3284 17 18.5V11.5C17 10.6716 17.6716 10 18.5 10Z', // jshint ignore:line
104105
// eslint-disable-next-line max-len
105-
nextIcon: 'M2,18.5A1.52,1.52,0,0,1,.92,18a1.49,1.49,0,0,1,0-2.12L7.81,9.36,1,3.11A1.5,1.5,0,1,1,3,.89l8,7.34a1.48,1.48,0,0,1,.49,1.09,1.51,1.51,0,0,1-.46,1.1L3,18.08A1.5,1.5,0,0,1,2,18.5Z', // jshint ignore:line
106+
nextIcon: 'path://M0.838834 18.7383C0.253048 18.1525 0.253048 17.2028 0.838834 16.617L7.55635 9.89949L0.838834 3.18198C0.253048 2.59619 0.253048 1.64645 0.838834 1.06066C1.42462 0.474874 2.37437 0.474874 2.96015 1.06066L10.7383 8.83883L10.8412 8.95277C11.2897 9.50267 11.2897 10.2963 10.8412 10.8462L10.7383 10.9602L2.96015 18.7383C2.37437 19.3241 1.42462 19.3241 0.838834 18.7383Z', // jshint ignore:line
106107
// eslint-disable-next-line max-len
107-
prevIcon: 'M10,.5A1.52,1.52,0,0,1,11.08,1a1.49,1.49,0,0,1,0,2.12L4.19,9.64,11,15.89a1.5,1.5,0,1,1-2,2.22L1,10.77A1.48,1.48,0,0,1,.5,9.68,1.51,1.51,0,0,1,1,8.58L9,.92A1.5,1.5,0,0,1,10,.5Z', // jshint ignore:line
108+
prevIcon: 'path://M10.9602 1.06066C11.5459 1.64645 11.5459 2.59619 10.9602 3.18198L4.24264 9.89949L10.9602 16.617C11.5459 17.2028 11.5459 18.1525 10.9602 18.7383C10.3744 19.3241 9.42462 19.3241 8.83883 18.7383L1.06066 10.9602L0.957771 10.8462C0.509245 10.2963 0.509245 9.50267 0.957771 8.95277L1.06066 8.83883L8.83883 1.06066C9.42462 0.474874 10.3744 0.474874 10.9602 1.06066Z', // jshint ignore:line
108109

109110
prevBtnSize: 18,
110111
nextBtnSize: 18,
111112

112-
color: '#A4B1D7',
113-
borderColor: '#A4B1D7',
114-
borderWidth: 1
113+
color: tokens.color.accent30,
114+
borderColor: tokens.color.accent30,
115+
borderWidth: 0
115116
},
116117
emphasis: {
117118
label: {
118119
show: true,
119120
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
120-
color: '#6f778d'
121+
color: tokens.color.accent60
121122
},
122123

123124
itemStyle: {
124-
color: '#316BF3'
125+
color: tokens.color.accent40
125126
},
126127

127128
controlStyle: {
128-
color: '#316BF3',
129-
borderColor: '#316BF3',
130-
borderWidth: 2
129+
color: tokens.color.accent40
131130
}
132131
},
133132

134133
progress: {
135134
lineStyle: {
136-
color: '#316BF3'
135+
color: tokens.color.accent20
137136
},
138137
itemStyle: {
139-
color: '#316BF3'
140-
},
141-
label: {
142-
color: '#6f778d'
138+
color: tokens.color.accent40
143139
}
144140
},
145141

0 commit comments

Comments
 (0)