vue中使用echarts的最佳实现方案
2021-04-29 10:47

vue中使用echarts

在vue中使用echarts,目前比前几年方便多了,echarts有了npm包。

第一步,安装echarts

npm install echarts --save

第二步,在vue组件中引入echarts

老版本echarts的引入方式(5.0版本以下)

import echarts from 'echarts';

新版本echart的引入方式(5.0版本以上)

import * as echarts from 'echarts';

第三步,使用echarts绘制图表

let dom = this.$refs.chart;
let chart = echarts.init(dom);

let options = {
    tooltip: {
         trigger: 'item',
         formatter:function(params){
                return params.name +' ' + params.data + '  第'+that.score[params.dataIndex]+'名'
         },
         position:'top',
         backgroundColor:this.color,
         textStyle:{
                 color:'#fff'
         }
     },
     ....
}
chart.setOption(options);

这样,我们就使用echarts绘制出了自己想要的柱状图,饼状图等....


分析

在使用echarts中,我们要通过this.$refs.chart,来获取dom元素,通过这一点,可以看出echarts并不是完全契合vue,react这类mvvm的框架的,更多的还是jquery时代的调用方式。鉴于此,网上出现了诸多基于echarts封装的vue组件。但是这些组件都不是官方的,也都或多或少的存在一下bug或者使用难度。

有时,我们使用echarts,并不想要多么宏伟的功能,而只是想简单实现个柱状图,饼图而已。但是呢,我们可能多处使用图标,也可能在dialog弹窗中使用,基于vue的dom生成销毁机制,我们甚至要在dialog弹窗中等待判断dom存在后才能绘制饼图等。


更完美vue中echarts使用方法

鉴于以上原因,我们需要讲echarts的使用进行一个单独组件的封装,因为一个单独组件中,有created,mounted,beforeDestoryed等事件钩子,我们便可以利用这些事件钩子来契合echarts的生成销毁,减少web程序无用内存的占用等问题。

先创建一个组件,比如叫myecharts.vue

<template>
<div v-loading="loading">
<div class="ks-piecont" ref="chart"></div>
</div>
</template>
<script>
import echarts from 'echarts';
import server from '@/api/server.js';
import axios from 'axios'; //如果图标和后台关系紧密,可以选择在echart组件中发起ajax请求
let echat;
export default{
    props:{
        zbmcs:{
            type: Array,
            default:[]
        },
        pdate:{
            type: Date,
            default:null
        },
        names:{
            type:Array,
            default:()=>{
                return ['当期值','同期值'];
            }
        }
    },
    data(){
        return {
            krr:[],
            serr:[],
            loading:true
        }
    },
    mounted(){
        this.renderChart();
        // 或者
        // this.queryData();
    },
    methods:{
        renderChart(){
            let dom = this.$refs.chart;
                chart = echarts.init(dom);
                let that = this;
                let opts = require('@/echart_options/echart_multibar').default;
                
                // 做一些事情改变options
                chart.setOption(options);
                this.loading = false;
        },
        queryData(){
            let arr = [];
                this.loading = true;
                this.zbmcs.forEach((it,index)=>{
                    arr.push(server.post("/syxx/getZbData",{
                        zbmc:it,
                        yf:this.getDatestr(),
                        rq:this.getFullDate(),
                    }));
               
                });
                axios.all(arr).then(axios.spread((...args)=>{
                    this.krr = [];
                    this.serr = [];
                    this.loading = false;
                    // 做一些处理
                    this.renderChart();
            }
    },
    beforeDestoryed(){
        if(echart){
            ehcart.dispose();
        }
    }
</script>

如上,在使用到echarts的地方,我们就可以将此组件引入,传入相应参数即可,而echarts的生成和销毁在组件中完成,使用场景无需再考虑这些琐事。

let opts = require('@/echart_options/echart_multibar').default;

这行代码是让我们可以预定义一些echarts的options参数,可以添加一个参数,针对性获取默认的一些参数,这些东西可以提出出来,比如图标的colors颜色,grid边距,lengend,tooltip等展现特性。

当然,这些默认配置也可以采用jquery的hook形式,比如定义bar为柱状图配置,pie为饼图配置,line为线段图配置。根据传参不同获取不同的配置,以及不同配置和传参的merge方法。使得组件功能更加强大和灵便。

在befroeDestoryed中我们调用了dispose()方法,销毁了echarts实例,这样在大多数情况下,我们可以清楚已无用echarts所占用的额外内存空间,使得我们的系统和应用运行效率更高一些。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(373)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1