vue中如何使用echarts

Posted 2020-11-14 wuguanglin

在vue中使用echarts主要是注意如何与vue生命周期相结合，从而做到数据驱动视图刷新

主要是以下几步：

1. echarts的option设置在data(){}中
2. 在mounted(){}生命周期去初始化数据，初始化echarts
3. 在updated(){}生命周期中去setOption(option)渲染echarts。

模板vue文件如下：

<template>
    <div id="myChart" ref="myChart"></div>
</template>

<script>
    import echarts from ‘echarts‘
    export default {
        data(){
            return {
                chart:null,
                option:{
                    //echarts配置项
                }
            }
        },
        methods:{
            initData(){//去请求初始化数据
            },
            initEcharts(){//初始化dom
                let dom = this.$refs.myChart;
                this.chart=echarts.init(dom);
            },
            drawEcharts(){//绘制echarts
                this.chart.setOption(this.option);
            },
        },
        mounted(){
            this.initData();
            this.initEcharts();
        },
        updated(){
            this.drawEcharts();
        }
    }
</script>