全動態基於echarts 多條折線圖

<template>
    <div :ref=refId style='width:100%;height:300px'></div>
</template>

<script>
import echarts from 'echarts';
export default {
    name: 'Chartline',
    props: {
        text: {
            default: ''
        },
        refId:{
            require: true
        },
        data: {
            // 格式 [[232,3],[898,989]],
            require: true
        },
        legendData: {
            // 格式 ['tokyo','lodon'],
            require:true
        },
        xAxisData: {
            // 格式 ['Mon', 'Tue']
            require:true
        }
    },
    data () {
        return {
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.initEcharts();
        });
    },
    methods: {
       
        initEcharts() {
            let arr = [];
            let color = ['rgb(0,255,0)','rgb(8, 161, 236)','rgb(0,255,225)','rgb(255,0,0)','rgb(255,198,84)'];
            this.legendData.forEach((item,index) => {
                arr.push({
                    data: this.data[index],
                    name:item,
                    type: 'line',
                    color:[color[index]],
                },);
            })
            let pie = echarts.init(this.$refs[this.refId]);
            let optionpie = {
                title: {
                    text: this.text,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: this.legendData,
                    left: 'left',
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.xAxisData
                },
                yAxis: {
                    type: 'value'
                },
                series: arr
            };
            pie.setOption(optionpie);
        },
    },
};
</script>