前端 | echarts 学习



echarts 是一个基于 JavaScript 的可视化图标库

介绍: https://echarts.apache.org/handbook/zh/get-started

可以用来生成折线图、柱状图、饼图、散点图、地理坐标、地图、热力图、关系图、树图、仪表盘、日历坐标、以及3D等图

例子: https://echarts.apache.org/examples/zh/

使用

直接使用 init 方法来注册图标容器, 其内参数为 dom 节点;
可以对图标进行定制样式, 配置 option
最后再用 setOption 设定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const myChart = echarts.init(document.getElementById('main'));

let option = {
title,
tooltip,
legend,
grid,
toolbox,
xAxis,
yAxis,
series: []
}

option && myChart.setOption(option)

配置

配置: https://echarts.apache.org/zh/option.html

title

标题组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let option = {
title: {
id: '',
show: true,
text: '',
link: '',
target: 'blank',
textStyle: {},
subtext: '',
sublink: '',
subtarget: 'self',
subtextStyle: {},
textAlign: 'center',
textVerticalAlign: 'top',
triggerEvent: false,
padding: 5,
left: 'center'
}
}

legend

图例组件。展示不同系列的标记,颜色和名字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let option = {
title: 'price'
legend: {
type: 'plain', // scrll 图例较多时可翻页
id: '',
show: true,
left: 'center', // 20 20% left right 距离容器左侧的距离
width: 'auto',
orient: 'horizontal', // 'vertical' 布局朝向
align: 'auto', // 图例标记和文本的对齐
padding: 5,
data: [], // 图例的数据数组 字符串
tooltip: {}
}
}

grid

直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴

1
2
3
4
5
6
7
8
9
let option = {
grid: {
id: '',
show: true,
left: '10%',
width: 'auto',
containLabel: true, // 防止标签溢出
}
}

xAxis/yAxis

type 类型可以选取坐标轴类型, ‘value’ 为数值轴,适用于连续数据; ‘category’ 类目轴,适用于离散的类目数据; ‘time’ 时间轴,适用于连续的时序数据; ‘log’ 对数轴。适用于对数数据。

data 是类目数据, 仅在类目轴中有效

1
2
3
4
5
6
7
8
9
10
11
12
let option = {
grid: {
containLabel: true
},
xAxis: {
type: 'category',
data: ['wanke', 'pingan']
},
yAxis: {
type: 'value'
}
}

tooltip

提示框组件. 可以设在全局, 可以设置再坐标系中, 可以设置在 series 中, 可以设置在每项数据中

触发类型 trigger 有两种形式的配置, ‘item’ 为数据项图形触发, 主要用于散点图, 饼图等无类目轴的图表; ‘axis’ 为坐标轴触发, 主要在柱状图, 折线图等会使用类目轴的图表

1
2
3
4
5
let option = {
tooltip: {
trigger: 'item'
}
}

dataset

数据集(dataset)组件用于单独的数据集声明,从而数据可以单独管理,被多个组件复用,并且可以自由指定数据到视觉的映射

source 是必要的, 用以下这种形式来表示二维数据, 第一行给出维度名, 如下第一列表示一组数据中同时比较三个年份, 具体数据从第二行开始记起

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let option = {
legend: {},
tooltip: {},
dataset: {
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
// 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。
xAxis: { type: 'category' },
// 声明一个 Y 轴,数值轴。
yAxis: {},
// 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
}

series

series 系列用来设定数据, 指明图标的展示类型, 有 line/bar/pie/tree 等等; 也可以将 series 中的数据交由 dataset 数据集管理

如上 dataset 中的配置, 转换成 series 表示就成了将数据拆成单个的对象, 塞入 series 数组中, 每项依然会配置 type, 而 dataset 中则是将 name 和 series 提出, 将数据统一管理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
option = {
xAxis: {
type: 'category',
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
yAxis: {},
series: [
{
type: 'bar',
name: '2015',
data: [89.3, 92.1, 94.4, 85.4]
},
{
type: 'bar',
name: '2016',
data: [95.8, 89.4, 91.2, 76.9]
},
{
type: 'bar',
name: '2017',
data: [97.7, 83.1, 92.5, 78.1]
}
]
};

例子

折线图

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
let option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
tooltip: {
show: true
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {} // 保存图片
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};

柱状图

主要需要在 series 里描述展示数据的类型为 bar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};

用数据集 dataset 来表示柱状图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
option = {
legend: {},
tooltip: {},
dataset: {
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
xAxis: { type: 'category' },
yAxis: {},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};

饼状图

饼状图的特性是需要在 series 中设定 type 为 pie

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
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};