前言
公司的项目中需要对数据做可视化处理，高级点的D3.js目前还没接触到，因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts，但是使用现成的就意味着必须使用它定制好的数据结构，我也没办法对他进行一些修改。我个人也偏向于原生JS编程，因此没有采用，而是自己在vue中实现了对数据的可视化处理，先来看看效果图
以下数据已做脱敏处理
这是目前用到的三种图。
可以看到，我在图表的外部添加了标题及说明，以及右侧的选择框组件，视图可以根据选择的不同，图表进行动态切换（echarts也是数据驱动），这就是个人定制化的好处
总体数据流向
所有的数据都是动态获取的，由前端向后台请求。当然请求数据肯定不会放在图表组件中，而是放在了外部。因为架构设计的不合理（MD前端就我一个人！），因此前期获取数据及存取数据的方式，和后期也较大的不同。
1. 存放在vuex中
这么大型的项目，vuex少不了。在前面的组件中，一次请求数据，然后将数据存储到了vuex中，echarts组件再从vuex中获取数据。这样的做法可能代码要稍微复杂点，但是数据存储在vuex中是随时可见的，我们也能随时保存获取的结果，对这些数据可以添加收藏也可以加入缓存中，下次再请求可以先从缓存调用。
（然而这只是我前端的想法，后台已经实现了对请求数据的缓存）
2. 存放在组件中，再分派到echarts组件
再对数据进行还原的时候（我的收藏，最近浏览），因为不需要保存或者收藏数据，我就直接用一个父组件请求，然后再分发到echarts组件，这样没有经过vuex，代码想多要少些。
组件代码
<template>
<div class="r-echarts-line">
<div class="top">
<div class="title">
{{origin.title}}
</div>
<div class="select-list">
<Select style="width:120px;margin-right:.5rem" v-model="pagePick">
<Option v-for="item in origin.page_select" :key="item" :value="item.val">{{item.name}}</Option>
</Select>
<Select style="width:120px" v-model="typePick">
<Option v-for="item in typeList" :value="item.name" :key="item">{{item.name}}</Option>
</Select>
</div>
</div>
<div class="des">说明：符合于本次筛选条件的共有<span class='tips'>{{origin.desc}}</span>条<span style="font-weight:700;color:black">职位信息</span>。</div>
