vue：echarts使用总结

一、前言

本文章为长期更新的文章，记录在vue中使用的echarts的各种技巧以及遇到的问题和解决方案，欢迎纠错指导。

二、环境

系统【windows 10 专业版】、Vue【2.5.22】、Echarts【4.2.1】。

三、安装

官网描述的比较详细，可详阅，本人主要是在Vue环境下使用，为了追求打包体积的优化，可以在官网进行自定义构建。

四、记录

1、初始化

图表的初始化需要在生命周期mounted函数中（Dom挂载和渲染完成后的回调）或者nextTick（Dom异步更新队列完成后的回调）进行。

2、图表刷新

在watch中对可变的数据进行侦听，需要判断当前图表是否存在，存在则在this.$nextTick函数中进行更新：this.chart.setOption(genChartOption(val))，对于数据项（series）的动态增加和删减，setOption会出现缓存的问题，解决方案为调用当前echart对象的clear方法：chart.clear()。

3、优化

图表尽量封装，以避免当前组件或页面代码过于混乱不利于维护，提高复用率；

不变的数据尽量不要放到data里，以函数的形式，将可变的数据进行传参生成option尚可，如chart.setOption(genChartOption({title, data, xData}))。

4、v-show下出现不加载和宽高失常的问题

这个问题是图表的宽高未设定值造成的，针对两种场景有对应的解决方案，一是自适应图表，强依赖父容器的宽高以及是否可视（display），采用v-if进行控制，只有当前容器被显示才加载图表，常见的就是自己实现的tab，通过v-if来控制面板切换。二是直接设置固定宽高。

5、封装的echarts组件，将title（字符串参数等）作为props参数进行传递，导致符号未能正确显示或者格式化的问题

将字符串用单引号括起来：:title="'第一行文本\n第二行文本'"。