使用ECharts

目前国内的图表库，除了百度的echarts就是蚂蚁的antv了，蚂蚁的图表样式更好看，相对来说，他的学习成本也很高，echarts已经是一个老牌图表了，有着比较完善的用法和社区。

这里就了解下vue里面使用echarts需要注意的一些问题。

使用ECharts

ECharts有提供一个vue版本的插件，也是由百度官方vue团队维护，有兴趣可以看看。

vue-echarts

我们这里就先不用这个插件了，用npm的方式安装

npm install echarts

安装完毕后我们就可以import引入

<script>
  import echarts from "echarts";
</script>

引入后我们要使用图标，需要进行初始化，echarts提供了init初始化方法，它接受一个参数，这个参数是一个dom对象，也就是图表的容器元素。

vue的话，我们使用ref的方式获取容器dom对象。

初始化完毕后我们需要设置参数，echarts初始化完毕后返回一个echarts对象，这个对象有一个setOption方法，可以传入一个图标的参数对象。

<template>
  <div ref="chartDom" style="height: 400px"></div>
</template>
<script>
  import echarts from "echarts";
  export default {
    mounted(){
      var echart = echarts.init(this.$refs.chartDom);
      echart.setOption({
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
</script>

这样一个基本的图表就创建完成了，但是会遇到一个问题，就是图表的宽度可能会不正常。

原因是因为vue在渲染html的时候，可能class还未完全生效，图表就已经初始化完成了，这就导致图表的宽度大于实际显示的宽度。

为了解决这个问题我们需要在容器发生resize事件的时候，对图表重新渲染。

容器resize事件

有一个插件，专门处理这个事件：resize-detector

resize-detector

npm i resize-detector

这个插件有两个方法，一个是添加resize事件，一个是移除resize事件

import { addListener, removeListener } from 'resize-detector'

用法：

addListener(elem, callback)

removeListener(elem, callback)

都两个参数，第一个参数是dom对象，第二个是回调，addListener添加完毕后，每次resize事件都会触发回调，而removeListener的回调，看需要把，如果有需要可以使用回调，但是一般也用不着。

防抖动优化

resize可能会触发很多次，那么重复触发同一个函数，其实没必要的，因为最有效的，应该是最后那一次。

所以我们要进行防抖动，你可以自己书写防抖动方法，这里使用lodash库的debounce方法。

<template>
  <div ref="chartDom" style="height: 400px"></div>
</template>
<script>
  import echarts from "echarts";
  import { addListener, removeListener } from 'resize-detector';
  import debounce from "lodash/debounce";
  export default {
    methods:{
      resize(){
        this.chart.resize();
      }
    },
    created() {
      //防抖动
      this.resize = debounce(this.resize, 300);
    },
    mounted(){
       this.chart = echarts.init(this.$refs.chartDom);
       this.chart.setOption({
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
        //监听resize
       addListener(this.$refs.chartDom, this.resize); 
    },
    beforeDestroy() {
      //清理残留
      removeListener(this.$refs.chartDom, this.resize);
      this.chart.dispose();
      this.chart = null;
    },
  }
</script>

由于我们的vue组件可能会被销毁，那么我们注册的事件也需要被销毁。

图表参数

我们的图表一般会被封装成一个组件，所以，参数应该是由父组件传过来的，我们props接受这个参数。

那么如果我们的参数发生了变化，图表也要进行重绘，所以数据就要进行监听。

但是对象的监听，如果使用深度监听的话，性能消耗是非常大的，所以推荐在修改参数的时候，对象某个值修改后，复写整个对象

this.chartOption.xxx = xxx;
this.chartOption = { ...this.chartOption }; //触发vue的更新

这样图表本身只需要watch普通监听即可了，具体代码就不写了，很简单。