Vue 开发实战实战篇 # 34：如何在组件中使用EChartsAntv等其他第三方库

Posted 2022-09-28 凯小默

说明

【Vue 开发实战】学习笔记。

效果

这里我们使用 echarts 为例在项目里面添加 echarts 库

安装依赖

npm i echarts resize-detector

Chart.vue

<template>
    <div ref="chartDom"></div>
</template>

<script>
import * as echarts from 'echarts';
import debounce from "lodash/debounce";
import  addListener, removeListener  from "resize-detector";
export default 
    props: 
        option: 
            type: Object,
            default: () => 
        
    ,
    watch: 
        option(val) 
            console.log("watch--->", val)
            this.chart.setOption(val);
        
    ,
    created() 
        this.resize = debounce(this.resize, 300);
    ,
    mounted() 
        this.renderChart();
        addListener(this.$refs.chartDom, this.resize);
    ,
    beforeDestroy() 
        removeListener(this.$refs.chartDom, this.resize);
        this.chart.dispose();
        this.chart = null;
    ,
    methods: 
        resize() 
            console.log("resize")
        ,
        renderChart() 
            // 基于准备好的dom，初始化echarts实例
            this.chart = echarts.init(this.$refs.chartDom);
            // 使用刚指定的配置项和数据显示图表。
            this.chart.setOption(this.option);
        
    ,
;
</script>

<style></style>

分析页引用 Chart 组件

<template>
    <div ref="chartDom"></div>
</template>

<script>
import * as echarts from 'echarts';
import debounce from "lodash/debounce";
import  addListener, removeListener  from "resize-detector";
export default 
    props: 
        option: 
            type: Object,
            default: () => 
        
    ,
    watch: 
        option(val) 
            console.log("watch--->", val)
            this.chart.setOption(val);
        
    ,
    created() 
        this.resize = debounce(this.resize, 300);
    ,
    mounted() 
        this.renderChart();
        addListener(this.$refs.chartDom, this.resize);
    ,
    beforeDestroy() 
        removeListener(this.$refs.chartDom, this.resize);
        this.chart.dispose();
        this.chart = null;
    ,
    methods: 
        resize() 
            console.log("resize")
        ,
        renderChart() 
            // 基于准备好的dom，初始化echarts实例
            this.chart = echarts.init(this.$refs.chartDom);
            // 使用刚指定的配置项和数据显示图表。
            this.chart.setOption(this.option);
        
    ,
;
</script>

<style></style>

参考资料

• https://github.com/Justineo/resize-detector
• https://echarts.apache.org/handbook/zh/basics/import