目前国内的图表库,除了百度的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普通监听即可了,具体代码就不写了,很简单。

分类: vue 开发实战(完结) 标签: vueECharts图表

评论

暂无评论数据

暂无评论数据

目录