公司的项目中需要对数据做可视化处理，高级点的D3.js目前还没接触到，因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts，但是使用现成的就意味着必须使用它定制好的数据结构，我也没办法对他进行一些修改。我个人也偏向于原生JS编程，因此没有采用，而是自己在vue中实现了对数据的可视化处理，先来看看效果图
以下数据已做脱敏处理
这是目前用到的三种图。
可以看到，我在图表的外部添加了标题及说明，以及右侧的选择框组件，视图可以根据选择的不同，图表进行动态切换（echarts也是数据驱动），这就是个人定制化的好处
总体数据流向
所有的数据都是动态获取的，由前端向后台请求。当然请求数据肯定不会放在图表组件中，而是放在了外部。因为架构设计的不合理（MD前端就我一个人！），因此前期获取数据及存取数据的方式，和后期也较大的不同。
1. 存放在vuex中
这么大型的项目，vuex少不了。在前面的组件中，一次请求数据，然后将数据存储到了vuex中，echarts组件再从vuex中获取数据。这样的做法可能代码要稍微复杂点，但是数据存储在vuex中是随时可见的，我们也能随时保存获取的结果，对这些数据可以添加收藏也可以加入缓存中，下次再请求可以先从缓存调用。
（然而这只是我前端的想法，后台已经实现了对请求数据的缓存）
2. 存放在组件中，再分派到echarts组件
再对数据进行还原的时候（我的收藏，最近浏览），因为不需要保存或者收藏数据，我就直接用一个父组件请求，然后再分发到echarts组件，这样没有经过vuex，代码想多要少些。
组件代码
<template> <div> <div> <div> {{origin.title}} </div> <div> <Select v-model="pagePick"> <Option v-for="item in origin.page_select" :key="item" :value="item.val">{{item.name}}</Option> </Select> <Select v-model="typePick"> <Option v-for="item in typeList" :value="item.name" :key="item">{{item.name}}</Option> </Select> </div> </div> <div>说明：符合于本次筛选条件的共有<span>{{origin.desc}}</span>条<span>职位信息</span>。</div> <div ref="mychart"> </div> </div> </template>
这是组件的html部分，可以看见top以及des是我自己添加的，bottom才是核心，也是整个echarts展示的部分，注意这里添加了ref，在script的代码中，我们将通过这个钩子，将DOM挂载到echarts中
<script> // echarts相关 let echarts = require('echarts/lib/echarts'); require('echarts/lib/chart/bar'); require('echarts/lib/component/tooltip'); require('echarts/lib/component/toolbox'); require('echarts/lib/component/legend'); require('echarts/lib/component/markLine'); export default { name: 'r-echarts-line', data () { return { typePick: '数值', typeList: [ { name: '数值' }, { name: '百分比' } ], pagePick: 0, // myChart实例 myChart: {}, percent: { label: { normal: { show: true, position: 'inside', formatter: '{c}%' } } }, numeric: { label: { normal: { show: true, position: 'inside', formatter: '{c}' } } } } }, props: { index: { required: true, type: Number }, data: { required: true, type: Object } }, mounted () { this.setEchart(); }, updated () { if (!this.myChart) { this.setEchart(); } this.chartChange(); }, computed: { origin () { return this.data; }, opt() { let that = this; let obj = { color: ['#606c94'], tooltip: { }, toolbox: { show: true, feature: { saveAsImage: {show: true} } }, label: { normal: { show: true, position: 'inside', formatter: '{c}' }, emphasis: { show: true } }, xAxis: { type: 'value', }, yAxis: { data: that.origin[that.type][that.pagePick].key, axisLabel: { interval: 0, rotate: -30 } }, series: [{ name: that.origin.title, type: 'bar', data: that.origin[that.type][that.pagePick].val, barMaxWidth: '30', markLine: { data: [ {type: 'average', name: '平均值'} ] } }] } return obj; }, type () { if (this.typePick == '数值') { return 'numeric'; } else if (this.typePick == '百分比') { return 'percent'; } else { return 'numeric'; } } }, methods: { setEchart () { let dom = this.$refs.mychart; this.myChart = echarts.init(dom); this.myChart.setOption(this.opt); }, chartChange () { this.myChart.setOption(this.opt); if (this.typePick == '百分比') { this.myChart.setOption(this.percent); } if (this.typePick == '数值') { this.myChart.setOption(this.numeric); } } } } </script>
首先我引入了需要的echarts组件，这个部分通过npm i echarts -S添加。