以组件的形成加载echart图

前言

工作中经常要绘制echart图，为了防止一个.vue文件代码过多，echart都会单独抽离到一个.vue文件里，然后通过组件的形式加载。写了很多了，个人感觉下面的这种形式是比较好的

示例

父组件中加载

<send-money-back-line ref="lineRef"></send-money-back-line>

this.$refs.lineRef.init();

echart代码

<template>
    <div class="line" ref="line">
    </div>
</template>

<script>
import echarts from 'echarts';
export default {
    data() {
        return {
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        // 初始化柱状图
        init() {
            let legend = ['21年应收账款', '20年应收账款', '19年应收账款'];
            let xAxisData = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
            let seriesData = [
                [135, 147, 260,150,150, 230, 224, 218, 230, 224, 218, 135],
                [150, 230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135],
                [260,150, 230, 224, 218, 135,150, 230, 224, 218, 135, 147]
            ];
            this.setOption(legend,xAxisData,seriesData);
        },
        setOption(legend,xAxisData,seriesData) {
            let myChart = echarts.init(this.$refs.line);
            let option = {
                tooltip: {
                    trigger: 'axis'
                },
                title: {
                    left: 'center',
                    textStyle: {
                        fontSize: 28,
                        color: '#755978'
                    }
                },
                legend: {
                    data: legend,
                    top: '5%'
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: seriesData[0],
                        type: 'line',
                        name: legend[0],
                        color: '#4F81BD'
                    },
                    {
                        data: seriesData[1],
                        type: 'line',
                        name: legend[1],
                        color: '#C0504D'
                    },
                    {
                        data: seriesData[2],
                        type: 'line',
                        name: legend[2],
                        color: '#9BBB59'
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        }
    }
};
</script>

<style scoped lang="scss">
.line{
    width: 100%;
    height: 100%;
}
</style>

效果