Content Table

Vue 中使用 Echarts

Echarts, 一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

Vue 项目中使用 yarn 安装 Echarts: yarn add echarts, 然后在页面中使用 Echarts 步骤如下:

  1. 为 ECharts 准备一个具备大小 (宽高) 的 DOM

  2. 引入 echarts:

    • 全部引入:

      1
      import echarts from 'echarts'; // 方便, 但是也同时引入了很多不需要的组件
    • 按需引入:

      1
      2
      import echarts from 'echarts/lib/echarts'; // 引入基本模板
      import bar from 'echarts/lib/chart/bar'; // 引入柱状图组件
  3. 基于准备好的 DOM,初始化 Echarts 实例

  4. 设置 Echarts 图表数据

入门示例

使用 Echarts 实现的柱状图:

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
<template>
<div class="echarts-demo">
<!-- [1] 为 ECharts 准备一个具备大小 (宽高) 的 DOM -->
<div id="chart" ref="chart" style="width: 300px; height: 300px"></div>
</div>
</template>

<script>
// [2] 引入 echarts
// 全部引入
import echarts from 'echarts';

// 按需引入
// import echarts from 'echarts/lib/echarts'; // 引入基本模板
// import bar from 'echarts/lib/chart/bar'; // 引入柱状图组件

export default {
data() {
return {
chart: null,
};
},
mounted() {
// [3] 基于准备好的 DOM,初始化 Echarts 实例
// 使用 ref 访问 DOM, 也可以使用 document.getElementById('chart')
this.chart = echarts.init(this.$refs.chart);

// [4] 设置 Echarts 图表数据
this.chart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
};
</script>

全局引入

如果有多个 Vue 组件或者页面中都使用 Echarts, 在每个页面中都像上面这样引入一遍的话有点麻烦 (多次 import 不会重复包含), 可以在 main.js 中全局引入 Echarts:

1
2
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

创建图表的代码修改为:

1
this.chart = this.$echarts.init(this.$refs.chart);

下图的例子展示了全局引入 Echarts 创建图表, 横纵坐标都是数值, 曲线从上到下是一个蓝色到透明的渐变, 使用 grid 调整曲线的边距:

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
<template>
<div class="echarts-demo">
<div id="chart" ref="chart" style="width: 300px; height: 250px"></div>
</div>
</template>

<script>

export default {
data() {
return {
chart: null,
};
},
mounted() {
this.chart = this.$echarts.init(this.$refs.chart);
this.chart.setOption({
grid: {
x : 25, // 左: 默认 80px
y : 20, // 上: 默认 60px
x2: 10, // 右: 默认 80px
// y2: 10, // 下: 默认 60px
},
xAxis: {
type: 'value',
// show: false,
min : 5,
boundaryGap: true,
},
yAxis: {
type: 'value',
},
series: [{
type : 'line',
smooth : true,
color : '#2d8cf0',
showSymbol: true,
data : [[5, 15], [10, 20], [20, 66.5], [25, 46.5], [30, 80], [35, 20], [40, 10]],

// 渐变效果
areaStyle : {
color : new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#2d8cf0' },
{ offset: 0.7, color: 'rgba(255, 255, 255, 0)' }
])
},
}]
});
}
};
</script>

参数简介

详细的 option 参数设置请参考 https://echarts.baidu.com/option.html:

  • 坐标轴的类型 type 有: value (数值轴), category (类目轴), time (时间轴), log (对数轴):

    • 横坐标 xAxis 的 type 默认值为 category
    • 纵坐标 yAxis 的 type 默认值为 value
  • 曲线的数据使用 series.data 设置

    • 异步加载: setOption 时 data 设置为空数组 [], 当请求到数据后赋值给 data, 再次调用 setOption 即可
    • 动态数据: 所有数据的更新都通过 setOption实现,你只需要定时获取数据,setOption 填入数据,而不用考虑数据到底产生了那些变化,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化
  • 提示 tooltip 默认为 item 数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用
  • grid 调整曲线的边距