Content Table
2019-01-09

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 调整曲线的边距