vue+echarts实现本地读取json文件并动态显示

本文采用直接引用js文件的方式实现，方便还不熟悉vue-cli脚手架的人能快速完成一个vue+echarts小测试。
功能要求

编  号	功能块	功能描述
1	使用 vue.js , Echarts 完成数据可视化	1. 图表数据为test.json。 2. gains是数据的值。 3. ignored是数据可控不可控的类型。 4. 可控/不可控样式不同。
2	实现图例 （可控/不可控）的切换	1.     可控显示ignored值为ENABLE的数据。 2.     不可控显示ignored值为DISABLE的数据。 3. 功能要求如下： 可控与不可控显示有四种情况： 1)      可控与不可控同时显示； 2)      可控与不可控同时不显示，此时图中无数据，虚线不显示； 3)      只显示可控； 4)      只显示不可控。
3	实现当前虚线(markLine)指向的切换	1. 点击数据柱状图，虚线(markLine)会切换到当前点击的柱子上。 2. 功能要求如下： 当切换图例时，若当前虚线指向的数据不属于该类型，则虚线指向切换后该类型数据的第一个。 例子：当A为可控，B,C为不可控，虚线指向A，现选择可控数据不显示，则只显示B,C，虚线指向B。
4	改变数据可控不可控的属性	1．点击y轴改变数据ignored的值（ENABLE或DISABLE），更新柱状图。
5	实现搜索功能	1. 搜索框默认为隐藏状态，点击搜索按钮显示。 2. 输入数据出现列表，点击数据，图中显示该数据的值，虚线指向该柱子。

实现效果


阅读功能说明，我们应该了解到
1、vue如何读取本地json文件
    vue更新到2.0之后，官方不再对vue-resource更新而是推荐axios，axios用法可在文档中查看 axios中文使用文档说明
2、echarts图表不用多说，肯定得引入官方echarts.js文件
3、既然是vue项目，需引入vue.js文件

echarts名词说明      echarts教程

xAxis	直角坐标系中的横轴，通常并默认为类目型
yAxis	直角坐标系中的纵轴，通常并默认为数值型
legend	图例，表述数据和图形的关联
dataZoom	数据区域缩放，常用于展现大量数据时选择可视范围
series	数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据
barGap	柱间距离，可设固定值（如  20 ）或者百分比（如  '30%' ，表示柱子宽度的  30% ）。如果想要两个系列的柱子重叠，可以设置 barGap 为  '-100%' 。

实现过程中遇到的问题说明
默认yAxis是不能点击的，需要添加属性triggerEvent：true。
图例选中状态，通过监听echarts的 legendselectchanged事件，一旦图例状态发生变化就会触发该事件。
创建变量enableData，disableData，遍历json数组，将ENABLE数据，非ENABLE数据用 '-' 字符占位，依次存储在enableData数组中，同理，disableData一样，如下图所示。加上barGap属性，覆盖显示(隐藏 '-' 数据的柱体)。



源码地址：https://github.com/hesijie/vue-echarts 欢迎各位指点