echarts|vue-charts的使用（在vue项目中使用echarts） echarts|vue.js

前言
刚工作半年，第一次接到绘制饼图、柱形图的需求，对未知的事物多少都会有恐惧。于是请教大神，大神直接甩了vue-charts的文档和echarts的文档给我，说一看就会，然而……一上来还是有点懵，有必要记录一下。
相关链接

vue-charts github文档
echarts官方文档

思路

为什么要用vue-charts?直接用echarts不好吗？根据echarts的官方文档，画一个图标要先新建一个容器，然后再JS中通过getElementById获取这个容器，这是最原始的JS和html交互，不符合经常使用vue开发的同学的使用习惯。于是vue-charts把echarts获取元素的代码封装了一下，变成一个组件，平均每个图可以让我们少写十行左右代码。vue-charts最主要的就是完成这个使命，剩下的图表配置项我们要自行学会看echarts的文档。

实现步骤
了解原生Echarts 首先，我们先看一下原生Echarts是如何创建容器的 --> 5 分钟上手 ECharts

文章图片

引入vue-charts, echarts npm install echarts vue-echarts
在.vue文件中调用vue-charts

/** * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样 * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。 */ .echarts { width: 100%; height: 100%; }

学习Echarts的基础概念接下来，我们需要对Echarts的基础概念有一个大概的印象 --> ECharts 基础概念概览
模仿实例根据Echarts官方给的实例，找到自己想做的类似的图表，熟悉基础概念 --> 官方实例
如下图所示，侧边栏可以选择大类，这里有最常用的饼图、柱状图等，点击效果图可以进入代码页。
【echarts|vue-charts的使用（在vue项目中使用echarts）】

文章图片

自定义配置如果按上面的步骤一步步来，到这一步，我们心里都有个大致的谱了。接下来，我们需要根据Echarts的配置项来自定义实现，UI设计稿 --> 配置项
看到这么多配置项，是不是又晕了？这个tooltip是显示在哪的，这个grid又是干嘛用的？这时，我们再回来看一下基础概念的图：

文章图片

我又可以了。
一点一点美化刚开始接触Echarts，肯定会有很多奇奇怪怪的问题，怎么这个图这么不听话，溢出界面了？怎么这些数据堆在一起？好难看哦。这时没有捷径，我们只能慢慢摸索慢慢调试，耐心一点，很快就可以得到好看的图啦~
下面列举一个我遇到的比较难实现的设计稿：

文章图片

这里有两个难点：

这里的data选项。每一个value对应两种不同的解释，既是威胁人数>1000人,也是特大型。
同一条数据上下两行的背景色和字体颜色互换了。

一开始拿到这个图，我的内心OS：好看是好看，但是这个真的可以实现吗？第一次发版时我只是把数据丑丑地放在那，反正也不影响主要功能。后来有一天我没有需求，看着Echarts的官方实例，突然有了灵感。
这里主要用到两个配置：

series-pie.label.formatter
series-pie.label.rich

pieOption: { grid: { left: 'center', top: 40, containLabel: true }, color: ['#8676F8', '#99CDFD', '#3FE8BD', '#FA9DA6'], series: [ { type: 'pie', radius: '48%', // radius: [20, 70], data: [ { name: '威胁人数>1000人'}, { name: '威胁人数<10人'}, { name: '威胁人数>10人'}, { name: '威胁人数>100人'}, ], label: { lineHeight: 15, formatter: function(params) { var type var style switch(params.name) { case '威胁人数>1000人': type='特大型'; style='xl'; break; case '威胁人数>100人': type = '大型'; style='l'; break; case '威胁人数>10人': type = '中型'; style='m'; break; case '威胁人数<10人': type = '小型'; style='s' break; } return params.name + '\n' + '{' + style + '|' + type + ': ' + params.value + '处}' }, rich: { xl: { color: '#FFFFFF', backgroundColor: '#8676F8', padding: [2, 4], borderRadius: 2 }, l: { color: '#FFFFFF', backgroundColor: '#FA9DA6', padding: [2, 4], borderRadius: 2 }, m: { color: '#FFFFFF', backgroundColor: '#3FE8BD', padding: [2, 4], borderRadius: 2 }, s: { color: '#FFFFFF', backgroundColor: '#99CDFD', padding: [2, 4], borderRadius: 2 } } } } ] },

当当当~最终实现样式