line.vue<template>
<div>
    <!-- <div class="chart-title">{{title}}</div> -->
    <div id="echarts"></div>
</div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name: 'Echarts',
    props: {
        'width': {
            type: Number,
            default: 800
        },
        'height': {
            type: Number,
            default: 400
        },
        'title': {
            type: String,
            default: '表格标题'
        },
        'source': {
            type: Object,
            default: function () {
                return {
                    rows: [],
                    data: []
                }
            }
        }
    },
    data() {
        return {}
    },
    watch: {
        'source': {
            deep: true,
            handler: function () {
                this.$nextTick(() => {
                    this.initEcharts()
                })
            }
        }
    },
    mounted() {
        this.initEcharts()
    },
    computed: {
        'seriesParse': function () {
            if (this.source.data.length == 0) {
                return []
            }
            let result2 = this.source.data.map((item) => {
                return {
                    name: item.title,
                    data: [...item.data],
                    type: 'line',
                }
            })
            result2.shift()
            return result2
        },
        'xAxisParse': function () {
            return this.source.rows
        },
        'legendSelectArr': function () {
            let selectedArr = this.seriesParse.map((item) => {
                return item.name
            })
            return selectedArr
        }
    },
    methods: {
        initEcharts() {
            if (!this.myChart) {
                this.myChart = echarts.init(document.getElementById('echarts'));
                this.myChart.off("legendselectchanged");
                this.myChart.on('legendselectchanged', (params) => {
                    // console.log(params)
                    this.selectedItem(params.name)
                })

            }

            this.myChart.resize({
                height: this.height
            });

            let selected = {}
            this.legendSelectArr.forEach((item, index) => {
                if (index == 0) {
                    selected[item] = true
                } else {
                    selected[item] = false
                }
            })

            this.myChart.setOption({
                legend: {
                    orient: 'vertical',
                    y: 'top',
                    x: 'right',
                    selected: selected,
                    selector: true
                },
                title: {
                    text: this.title,
                    show: !!this.title,
                    textAlign: 'auto'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    data: [...this.xAxisParse]
                },
                yAxis: {},
                series: [...this.seriesParse]
            }, true);
        },
        selectedItem(name) {
            let selected = {}
            this.legendSelectArr.forEach((item, index) => {
                if (item == name) {
                    selected[item] = true
                } else {
                    selected[item] = false
                }
            })
            this.myChart.setOption({
                legend: {
                    orient: 'vertical',
                    y: 'top',
                    x: 'right',
                    selected: selected,
                    selector: true
                },
                title: {
                    text: this.title,
                    show: !!this.title,
                    textAlign: 'auto'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    data: [...this.xAxisParse]
                },
                yAxis: {},
                series: [...this.seriesParse]
            }, true);
        }

    }
}
</script>

<style>
#echarts {
    width: 100%;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    /* float: left; */
}

.chart-title {
    text-align: center;
}
</style>