boss/components/Echart/line.vue

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',
                }
            })
            return result2
        },
        'xAxisParse': function () {
            return this.source.rows
        }
    },
    methods: {
        initEcharts() {
            this.myChart = echarts.init(document.getElementById('echarts'));
            this.myChart.resize({
                width: this.width,
                height: this.height
            });
            this.myChart.setOption({
                legend: {
                    orient: 'vertical',
                    y: 'top',
                    x: 'right'
                },
                title: {
                    text: this.title,
                    show: !!this.title,
                    textAlign: 'auto'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    data: [...this.xAxisParse]
                },
                yAxis: {},
                series: [...this.seriesParse]
            });
        }
    }
}
</script>

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

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