在大数据盛行的今天，数据可视化变得越来越广泛。而在前端工作中，数据可视化用得最多的，可能就是图表了。在众多的图表插件中，echarts以其良好的性能和完善的API，图表的多样性和功能的完整性，被广大开发者认可，成为了前端图表使用最多的工具，所以，今天我就简单的讲一下，如何在vue中更优雅的使用echarts。
第一步，下载echarts我就不多说了：npm install echarts.
然后我们看一下一般人（刚开始用vue或echarts）的使用方法，大概是这个样子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<template> <div> <div ref="chartColumn" style="width:100%; height:400px;"></div> <button @click="changeOption">点击改变内容</button> </div> </template> <script> import echarts from 'echarts' export default { data() { return { chartColumn: null, option:{ title: { text: '普通图表' }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }, data:[5, 20, 36, 10, 10, 20,5, 20, 36, 10, 20, 36, 10, 10, 20,5, 20, 36, 10] } }, methods: { changeOption(){ var r = Math.floor(Math.random()*12); //splice会改变原来的数组 //var data = this.data.splice(r,6); var d = this.data.slice(r,r+6); this.option.series[0].data = d; this.columnChart.setOption(this.option); }, initChart() { this.chartColumn = echarts.init(this.$refs.chartColumn); this.chartColumn.setOption(this.option); } }, mounted: function () { this.initChart() } } </script> |
上面的代码，虽然功能实现了，也没什么错误，但是需要优化的地方很多。
首先，我们考虑到多个地方需要用到echarts，封装一个组件出来，就像下面这样：
组件部分：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
// components/chart-block.vue <template> <div ref="chartEl" style="height:100%"></div> </template> <script> import echarts from 'echarts'; export default { data(){ return { chart:null } }, props:{ option:{ type:Object } }, watch:{ option:{ handler(newValue, oldValue) { this.chart.setOption(newValue); }, // 因为option是个对象，而我们对于echarts的配置项，要更改的数据往往不在一级属性里面 // 所以这里设置了deep:true，不知道该属性的可以看一下vue的文档 deep: true } }, mounted(){ this.chart = echarts.init(this.$refs.chartEl); this.chart.setOption(this.option); } } </script> |
然后使用它：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<template> <div> <div id="chartColumn" style="width:100%; height:400px;"> <chart-lock :option="option"></chart-lock> </div> <button @click="changeOption">点击改变内容</button> </div> </template> <script> import chartBlock from '@/components/chart-block.vue' export default { components:{ chartBlock }, data() { return { option:{ //... 省略其他属性 series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }, data:[5, 20, 36, 10, 10, 20,5, 20, 36, 10, 20, 36, 10, 10, 20,5, 20, 36, 10] } }, methods: { changeOption(){ var r = Math.floor(Math.random()*12); //splice会改变原来的数组 //var data = this.data.splice(r,6); var d = this.data.slice(r,r+6); this.option.series[0].data = d; } } } </script> |
和之前的比起来，我们看看封装后的组件做了什么：
1、不用给每个图表指定ref属性了
2、不用定义图表变量了
（1和2在我们同一个页面有多个图表时，减少了很多不必要的变量）
3、不用自己初始化图表了
4、数据改变时，我们自动监听，再也不需要手动处理了
（3和4在我们同一个页面有多个图表时，减少了重复逻辑的工作量）
上面针对的，是同一个页面有多个图表时的优化。接下来，我们继续优化，如果一个组件有多个页面都要用到，我们就该考虑把它注册为全局的，减少引用。代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
// components/chart-block.vue <template> <div ref="chartEl"></div> </template> <script> import echarts from 'echarts'; var ChartBlock = { name:'ChartBlock', data(){ return { chart:null } }, props:{ option:{ type:Object } }, watch:{ option:{ handler(newValue, oldValue) { this.chart.setOption(newValue); }, // 因为option是个对象，而我们对于echarts的配置项，要更改的数据往往不在一级属性里面 // 所以这里设置了deep:true，不知道该属性的可以看一下vue的文档 deep: true } }, mounted(){ this.chart = echarts.init(this.$refs.chartEl); this.chart.setOption(this.option); } } /* 注册组件的方法 */ ChartBlock.install = function(Vue) { Vue.component(ChartBlock.name, ChartBlock); }; export default ChartBlock; </script> |
main.js全局注册
|
1 2 |
import ChartBlock from '@/components/chart-block.vue' Vue.use(ChartBlock) |
在需要使用组件的页面，下面的代码就不需要了
|
1 2 3 4 5 6 7 8 9 |
//import chartBlock from '@/components/chart-block.vue' export default { components:{ ... //chartBlock } ... } |
好了，到这里已经解决了组件的复用性，接下来再做点其他的。很多时候，我们的图表可能都需要跟随窗口进行实时的动态改变，每个组件都单独写，显然不现实，那我们最好的办法，就是把跟随窗口改变的代码直接写在组件里面，需要注意的是，一定要在组件销毁时移除窗口改变的监听。继续完善我们的组件，如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
var ChartBlock = { name:'ChartBlock', data(){ return { chart:null } }, props:{ option:{ type:Object } }, methods:{ returnChartToParent(){ this.$emit('chartReady',this.chart); } }, watch:{ option:{ handler(newValue, oldValue) { this.chart.setOption(newValue); }, deep: true } }, mounted(){ this.chart = echarts.init(document.getElementById(this.id)); this.chart.setOption(this.option); // 添加窗口改变监听 var chart = this.chart; this.chart.__resize = function(){ chart.resize(); }; setTimeout(() => { window.addEventListener('resize',this.chart.__resize); }, 200); }, beforeDestroy() { // 移除窗口改变监听 window.removeEventListener('resize',this.chart.__resize); } } |
有了上面的补充，以后再也不用担心图表响应的问题了，只管调用即可。但是，这样就OK了吗？作为一个好（bushitailan）的开发，我们要的可不只是功能，还要考虑性能的问题啊。
第一点：像窗口改变大小这种事件，一旦存在拖动，将发生得太频繁，我们很有必要做一下节流处理（不知道函数节流的，自行了解一下，算是前端必须掌握的基础技能哦）。解决办法，自然就是添加一个节流函数，继续看代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
var ChartBlock = { name:'ChartBlock', data(){ return { chart:null } }, props:{ option:{ type:Object }, id:{ type:String } }, methods:{ returnChartToParent(){ this.$emit('chartReady',this.chart); } }, watch:{ option:{ handler(newValue, oldValue) { this.chart.setOption(newValue); }, // immediate: true, deep: true } }, mounted(){ this.chart = echarts.init(document.getElementById(this.id)); this.chart.setOption(this.option); // 节流函数,来自Lodash，这里可以自己写一个简单点的 // 如果有多个地方用到，也可以使用引入的方式 function throttle(func, wait, options) { let time, context, args, result; let previous = 0; if (!options) options = {}; let later = function() { previous = options.leading === false ? 0 : new Date().getTime(); time = null; func.apply(context, args); if (!time) context = args = null; }; let throttled = function() { let now = new Date().getTime(); if (!previous && options.leading === false) previous = now; let remaining = wait - (now - previous); context = this; args = arguments; if (remaining <= 0 || remaining > wait) { if (time) { clearTimeout(time); time = null; } previous = now; func.apply(context, args); if (!time) context = args = null; } else if (!time && options.trailing !== false) { time = setTimeout(later, remaining); } }; return throttled; }; var chart = this.chart; this.chart.__resize = throttle(function(){ chart.resize(); },200); setTimeout(() => { window.addEventListener('resize',this.chart.__resize); }, 200); }, created(){ //console.log(this.id); //不能在这里初始化,id还没有和div关联上 }, beforeDestroy() { window.removeEventListener('resize',this.chart.__resize); } } |
第二点：也是更重要的一点，从vue 的角度出发，我们把图表的 option 写在 data 里，是很浪费性能的。为什么这么说呢，因为 vue 的数据改变监听实质上就是对 data 对象进行逐层循环，为每一个属性添加监听。而我们图表的数据对象，只是我们图表需要的一些配置项，压根不参与业务逻辑，一个简单的对象还好，但复杂的 echarts 图表，一个option 上100个属性，如果一个页面再有多个图表的话，得额外添加多少没用的监听器，可想而知。所以，我的建议是，把 option 数据写到 data 之外，然后通过调用 echarts 的 setOption 方法设置数据。既然如此，那我们就得在chart-block组件里暴露出我们的setOption方法，以供父组件调用了。继续修改代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<template> <div ref="chartEl" style="height:100%;"></div> </template> <script> import echarts from 'echarts'; var ChartBlock = { name:'ChartBlock', data(){ return { chart:null } }, // 去除props,添加methods methods:{ setOption(option){ this.chart && this.chart.setOption(option) } }, mounted(){ this.chart = echarts.init(this.$refs.chartEl); this.chart.setOption(this.option); //节流处理 function throttle(func, wait, options) { let time, context, args, result; let previous = 0; if (!options) options = {}; let later = function() { previous = options.leading === false ? 0 : new Date().getTime(); time = null; func.apply(context, args); if (!time) context = args = null; }; let throttled = function() { let now = new Date().getTime(); if (!previous && options.leading === false) previous = now; let remaining = wait - (now - previous); context = this; args = arguments; if (remaining <= 0 || remaining > wait) { if (time) { clearTimeout(time); time = null; } previous = now; func.apply(context, args); if (!time) context = args = null; } else if (!time && options.trailing !== false) { time = setTimeout(later, remaining); } }; return throttled; }; var chart = this.chart; this.chart.__resize = throttle(function(){ chart.resize(); },200); setTimeout(() => { window.addEventListener('resize',this.chart.__resize); }, 200); }, beforeDestroy() { window.removeEventListener('resize',this.chart.__resize); } } /* istanbul ignore next */ ChartBlock.install = function(Vue) { Vue.component(ChartBlock.name, ChartBlock); }; export default ChartBlock; </script> |
使用如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<template> <div> <div id="chartColumn" style="width:100%; height:400px;"> <!--少了option，多了ref，用于调用setOption方法--> <chart-lock ref="chart1"></chart-lock> </div> <button @click="changeOption">点击改变内容</button> </div> </template> <script> import chartBlock from '@/components/chart-block.vue' // echarts图表的配置数据写在外面，而不是data里 let option1 = { //... 省略其他属性 series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; let data = [5, 20, 36, 10, 10, 20,5, 20, 36, 10, 20, 36, 10, 10, 20,5, 20, 36, 10] export default { components:{ chartBlock }, data() { return { } }, methods: { changeOption(){ var r = Math.floor(Math.random()*12); var d = data.slice(r,r+6); option1.series[0].data = d; this.$refs.chart1.setOption(option1); } }, mounted(){ this.$refs.chart1.setOption(option1); } } </script> |
这样一来，通过一个组件，我们就把echarts图表的复用性，响应性（还自带节流处理），以及数据分离都解决了，是不是跟一开始的代码比起来，优雅了很多呢。
好了，本文到此结束。文章如有写得不对或不足的地方，欢迎指出。如果有什么不明白的，可以通过留言提问。
最后，站在产品的角度说句话，我们可以给图表添加个 type 的 props 属性，在数据没拿到之前，根据type，展示不同的默认图，这样是不是比空白好了很多呢？
发表评论