• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

使用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普通监听即可了,具体代码就不写了,很简单。

0
  • 本文分类:vue 开发实战
  • 本文标签:vueECharts图表
  • 流行热度:已超过 118 人围观了本文
  • 最后更新:2020年12月6日 - 20时39分10秒
  • 发布日期:2020年12月6日 - 20时39分10秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码