vue中echarts调用接口_Vue:在Vue中使用echarts

前言

公司的项目中需要对数据做可视化处理，高级点的D3.js目前还没接触到，因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts，但是使用现成的就意味着必须使用它定制好的数据结构，我也没办法对他进行一些修改。我个人也偏向于原生JS编程，因此没有采用，而是自己在vue中实现了对数据的可视化处理，先来看看效果图

以下数据已做脱敏处理

echarts Bar.png

echartsPie.png

echartsMap.png

这是目前用到的三种图。

可以看到，我在图表的外部添加了标题及说明，以及右侧的选择框组件，视图可以根据选择的不同，图表进行动态切换(echarts也是数据驱动)，这就是个人定制化的好处

总体数据流向

所有的数据都是动态获取的，由前端向后台请求。当然请求数据肯定不会放在图表组件中，而是放在了外部。因为架构设计的不合理(MD前端就我一个人！)，因此前期获取数据及存取数据的方式，和后期也较大的不同。

1. 存放在vuex中

这么大型的项目，vuex少不了。在前面的组件中，一次请求数据，然后将数据存储到了vuex中，echarts组件再从vuex中获取数据。这样的做法可能代码要稍微复杂点，但是数据存储在vuex中是随时可见的，我们也能随时保存获取的结果，对这些数据可以添加收藏也可以加入缓存中，下次再请求可以先从缓存调用。

(然而这只是我前端的想法，后台已经实现了对请求数据的缓存)

2. 存放在组件中，再分派到echarts组件

再对数据进行还原的时候(我的收藏，最近浏览)，因为不需要保存或者收藏数据，我就直接用一个父组件请求，然后再分发到echarts组件，这样没有经过vuex，代码想多要少些。

组件代码

{ {origin.title}}

{ {item.name}}

{ {item.name}}

说明：符合于本次筛选条件的共有