vue中如何使用echarts

在vue中使用echarts主要是注意如何與vue生命周期相結合，從而做到數據驅動視圖刷新

主要是以下幾步：

1. echarts的option配置項放在在data(){}或者computed(){}中
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>