Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

eCharts 学习笔记

1、简介

eCharts 是百度出品的一款基于 JavaScript 的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。最开始是由百度团队开源的,后面于2018年交由Apache基金会,称为ASF孵化项目。并于2021年1月26日正式毕业。

2、在 Vue 中使用

  1. 首先下载 eCharts:
    1
    npm install echarts --save
  2. 全局引入 eCharts:
    1
    import * as echarts from 'echarts';
  3. 或者可以按需引入
    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
    // 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
    import * as echarts from 'echarts/core';
    // 引入柱状图图表,图表后缀都为 Chart
    import { BarChart } from 'echarts/charts';
    // 引入提示框,标题,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component
    import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    DatasetComponentOption,
    TransformComponent
    } from 'echarts/components';
    // 标签自动布局,全局过渡动画等特性
    import { LabelLayout, UniversalTransition } from 'echarts/features';
    // 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
    import { CanvasRenderer } from 'echarts/renderers';

    // 注册必须的组件
    echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
    ]);

3、基本语法结构

在使用 eCharts 之前,我们需要给它一个 DOM 容器,官方是推荐我们使用具有定义好的长和宽的一个父容器(可以是 div )。
所以我们首先构建一个父容器 div 来存放 eCharts 图表

1
2
<div id="billreport"
:style="{ width: '95%', height: '500px' }"></div>

由于 eCharts 基于js构建的,所以只要会js的语法,eCharts的语法自然也不在话下。
而 eCharts 的基本语法结构为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
setup(){
const data=reactive({
option:{
//图表信息
}
})

const ech = () => {
//绘制图表的方法
}
}

onBeforeMount(()=>{
//在页面渲染之前加载图表的信息
})

4、图表配置信息

图表配置信息,即 option 中的内容,在这一部分,我们将配置一系列的信息,正是这些信息生成了对应的图表。

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
option:{
title:{
text: "收入与支出趋势图"//图表的标题
},
tooltip:{//提示的信息
trigger:'axis'//触发方式
},
legend: {//图例
data: [{
name: '收入',
// 强制设置图形为圆。
icon: 'circle',
// 设置文本为红色
textStyle: {
color: 'red'
}
},
{
name: '支出',
// 强制设置图形为圆。
icon: 'circle',
// 设置文本为红色
textStyle: {
color: 'red'
}
}]//图例的标题,分别对应 series 中的数据
},
xAxis: {//配置要在x轴显示的项
type: 'category',//'value' 数值轴,适用于连续数据。 'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。 'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。 'log' 对数轴。适用于对数数据。
boundaryGap: false,// 刻度离纵轴有无间隙,默认true有间距
data: []//横轴坐标的值
},
yAxis: {//配置y轴的项,配置与x轴类似
type: 'value'
},
series: [//系列列表,显示在图表中的内容
{
name: '收入',//系列名称
type: 'line',//图表类型
stack: '收入',//堆叠,如果有相同名称的会堆叠
data: []
},
{
name: '支出',
type: 'line',
stack: '支出',
data: []
}
]
}

图表类型表:

配置 图表类型
type: ‘bar’ 柱状/条形图
type: ‘line’ 折线/面积图
type: ‘pie’ 饼图
type: ‘scatter’ 散点(气泡)图
type: ‘effectScatter’ 带有涟漪特效动画的散点(气泡)
type: ‘radar’ 雷达图
type: ‘tree’ 树型图
type: ‘treemap’ 树型图
type: ‘sunburst’ 旭日图
type: ‘boxplot’ 箱形图
type: ‘candlestick’ K线图
type: ‘heatmap’ 热力图
type: ‘map’ 地图
type: ‘parallel’ 平行坐标系的系列
type: ‘lines’ 线图
type: ‘graph’ 关系图
type: ‘sankey’ 桑基图
type: ‘funnel’ 漏斗图
type: ‘gauge’ 仪表盘
type: ‘pictorialBar’ 象形柱图
type: ‘themeRiver’ 主题河流
type: ‘custom’ 自定义系列

5、x 轴、y 轴

x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。
一般情况下,二维的图标结构都会有 x 轴和 y 轴,通常情况下,x 轴会在图表的下方,而 y 轴在图表的左边。
而 eCharts 也提供了一些特定的坐标轴的设置选项,如:
轴线:
我们可以通过 axisLine 来对轴线进行设置,比如轴线两头的箭头,轴线的样式等等,比如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
option = {
xAxis: {
axisLine: {
show:'true' //显示轴线
symbol: 'arrow', //轴线两边的箭头
lineStyle: { //轴线的样式,有颜色、宽度、类型等等
type: 'dashed'
// ...
}
}
// ...
},
yAxis: {
axisLine: {
symbol: 'arrow',
lineStyle: {
type: 'dashed'
// ...
}
}
}
// ...
};

轴线两边的箭头选项:
This is a picture without description

坐标轴刻度:
ECharts 提供了轴线 axisTick 相关的配置,我们可以根据实际情况调整,例如刻度线的长度,样式等。以下是一个坐标轴刻度的例子:

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
option = {
xAxis: {
axisTick: {
show:true //开启坐标轴刻度
alignWithLabel:true //使刻度与标签对其(类目轴中在 boundaryGap 为 true 的时候有效)
inside:true //刻度线是否朝里(true为朝里)
interval:0 //坐标轴刻度的显示间隔,如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。
length: 6,//刻度线的长度
lineStyle: { //样式设置
type: 'dashed'
// ...
}
}
// ...
},
yAxis: {
axisTick: {
length: 6,
lineStyle: {
type: 'dashed'
// ...
}
}
}
// ...
};

刻度标签:
ECharts 提供了轴线 axisLabel 相关的配置,我们可以根据实际情况调整。以下是一个例子:
This is a picture without description
如上图所示,下面的星期就是刻度标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
option = {
xAxis: {
axisLabel: {
show:true //显示刻度标签
interval:0 //显示刻度,同上
inside:true //标签是否朝里(true朝里)
rotate:45 // 标签偏移的角度
margin:5 //标签与轴线的距离
formatter: '{value} kg', //刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
align: 'center' //文字水平对齐方式,默认自动。可选为:'left','center','right'
// ...
}
// ...
},
yAxis: {
axisLabel: {
formatter: '{value} 元',
align: 'center'
// ...
}
}
// ...
};

标签中的formatter:

1
2
3
4
5
6
// 使用字符串模板,模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
formatter: function (value, index) {
return value + 'kg';
}

更多关于 formatter 的内容可以参考官方的 API

6、主题配置

在eCharts的内部,内置了两套主题,分别是亮色主题以及暗色主题
通过以下的方式,我们可以修改主题

1
2
var chart = echarts.init(dom, 'light');
var chart = echarts.init(dom, 'dark');

或者我们可以通过eCharts的主题编辑器来创建自己的主题This is a picture without description

7、数据集(dataset)

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

写法一:

1
2
3
4
5
6
7
8
9
10
11
dataset: {
// 提供一份数据。
//第一行对应的是 x 轴
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]
]
},

在 dataset 中管理数据之后,就可以不用在 series 单独进行数据的声明,而是直接在 data 除进行调用

1
2
3
4
5
6
// 声明多个柱状图系列,默认情况下,每个系列会自动对应到 dataset 的每一列。
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]

写法二:

1
2
3
4
5
6
7
8
9
10
11
dataset: {
// 这里指定了维度名的顺序,从而可以利用默认的维度到坐标轴的映射。
// 如果不指定 dimensions,也可以通过指定 series.encode 完成映射,参见后文。
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
},

8、图例

图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列,通过点击对应数据列的标记,可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。
以下是一个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
option = {
legend: {
type:'plain' //图例的类型可选值:'scroll':可滚动翻页的图例。当图例数量较多时可以使用。
// Try 'horizontal'
orient: 'vertical', //图例列表的布局朝向。可选:'horizontal'水平,'vertical'垂直
right: 10, //图例组件离容器右侧的距离。
top: 'center' //图例组件离容器上侧的距离。
},
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: {},
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};

显示内容如下:This is a picture without description
更多内容参考官方 API