Vue使用echarts制作好看的图表（一）

Apache ECharts，一个基于 JavaScript 的开源可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。

ECharts安装与卸载

安装最新版 npm install echarts --save

安装指定版本，例如4.8.0 npm install [email protected] --save

卸载 npm uninstall echarts

 Echarts 5添加了许多新特性，这里我选择安装最新版，目前为5.0.2。需要注意的是，echarts 5.x（以下简称 v5）和 echarts 4.x（以下简称 v4）的引用方式是不同的，具体写法如下：

v4全局引用 import echarts from 'echarts'

v4按需引入 import echarts from 'echarts/lib/echarts'

v5全局引用 import * as echarts from 'echarts'

v5按需引入 import * as echarts from 'echarts/lib/echarts'

 其他变化可查看ECharts官网

下面记录几个项目中设计的图表：

1）环形图，饼图（type:pie）自定义而来，自定义了label分布在labelLine两侧，关键配置padding: [0, -60]和overflow: 'none'。label标签的文字如果因为过长导致省略，可缩小radius的第二个参数。

完整代码：

2）折线图（type:line），右上角工具栏可以保存图片或者切换折线图、柱状图、堆叠模式。

折线图 

 

柱状图

堆叠模式

需要注意的是配置项要设置containLabel: true，避免标签溢出的情况，如下图：

 

完整代码

3）进度仪表盘（type:gauge），隐藏仪表盘指针、刻度标签、刻度和分隔线，得到下图效果。

 

完整代码

先记录上述三个图表，下一期随缘更新（咕咕咕~）

希望你我逐渐优秀