Echarts在Vue2中的使用

<template>
    <div>
        <div ref="chart" style="width: 1100px; height: 600px;"></div>
    </div>
</template>
      
<script>
export default {
    data() {
        return {
           
        }
    },
    created() { },

    mounted() {
        this.getEchartData();
    },
    methods: {
        getEchartData() {
            const chart = this.$refs.chart
            if (chart) {
                const myChart = this.$echarts.init(chart)
                const option = {
                    xAxis: {
                      type: 'category',
                      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                      type: 'value'
                    },
                    series: [
                      {
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        smooth: true
                      }
                    ]
                  };
                myChart.clear()
                myChart.setOption(option)
                myChart.off('click');
                myChart.on('click', (params) => {

                });
                window.addEventListener('resize', function () {
                    myChart.resize()
                })
            }
            this.$on('hook:destroyed', () => {
                window.removeEventListener('resize', function () {
                    myChart.resize()
                })
            })

        },
    },
}
</script>

<style lang="less" scoped>

</style>