盒子
盒子
文章目录󰁋
  1. 一、Timeline选项
  2. 二、Title选项
  3. 三、toolbox
  4. 四、tooltip
  5. 五、legend
  6. 六、dataRange
  7. 七、dataZoom
  8. roamController
  9. 八、grid
  10. 九、xAxis
  11. 十、yAxis
  12. 十一、series(通用)

echart使用小结

十一个组件选项主要用来进行交互

一、Timeline选项

  • 时间轴,每个图表最多仅有一个时间轴控件

image.png

二、Title选项

  • 每个图表最多仅有一个标题控件,每个标题控件可设主副标题

可以对标题文字的大小样式进行设置

image.png

三、toolbox

  • 工具箱,每个图表最多仅有一个工具箱。工具箱里面可以实现图表类型的切换,保存图片,刷新,查看数据等功能。可以对其像素进行设置

image.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
{

mark : {

show : false,

title : {

mark : '辅助线开关',

markUndo : '删除辅助线',

markClear : '清空辅助线'

},

lineStyle : {

width : 2,

color : '#1e90ff',

type : 'dashed'

}

},

dataZoom : {

show : false,

title : {

dataZoom : '区域缩放',

dataZoomReset : '区域缩放后退'

}

},

dataView : {

show : false,

title : '数据视图',

readOnly: false,

lang: ['数据视图', '关闭', '刷新']

},

magicType: {

show : false,

title : {

line : '折线图切换',

bar : '柱形图切换',

stack : '堆积',

tiled : '平铺',

force: '力导向布局图切换',

chord: '和弦图切换',

pie: '饼图切换',

funnel: '漏斗图切换'

},

option: {

// line: {...},

// bar: {...},

// stack: {...},

// tiled: {...},

// force: {...},

// chord: {...},

// pie: {...},

// funnel: {...}

},

type : []

},

restore : {

show : false,

title : '还原'

},

saveAsImage : {

show : false,

title : '保存为图片',

type : 'png',

lang : ['点击保存']

}

}

四、tooltip

  • 提示框,鼠标悬浮交互时的信息提示

image.png

五、legend

  • 图例,每个图表最多仅有一个图例,混搭图表共享

image.png

六、dataRange

  • 值域选择,每个图表最多仅有一个值域控件

image.png

七、dataZoom

  • 数据区域缩放。与toolbox.feature.dataZoom同步,仅对直角坐标系图表有效

roamController

image.png

八、grid

直角坐标系内绘图网格

image.png

九、xAxis

直角坐标系中横轴数组,数组中每一项代表一条横轴坐标轴,仅有一条时可省略数组。最多同时存在2条横轴,单条横轴时可指定安放于grid的底部(默认)或顶部,2条同时存在时位置互斥,默认第一条安放于底部,第二条安放于顶部

十、yAxis

直角坐标系中纵轴数组,数组中每一项代表一条纵轴坐标轴,仅有一条时可省略数组。最多同时存在2条纵轴,单条纵轴时可指定安放于grid的左侧(默认)或右侧,2条同时存在时位置互斥,默认第一条安放于左侧,第二条安放于右侧

  • 坐标轴有三种类型,类目型、数值型和时间型,纵轴通常为数值型,但条形图时则纵轴为类目型

十一、series(通用)

驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据,其中个别选项仅在部分图表类型中有效,请注意适用类型

支持一下
扫一扫,支持poetries