代码修改

suerprisePlus

2024-09-30 703703929e97b94ca1c1c5e35a578e5fe9d4cfea

 src/views/visualization/leftMenu.vue

@@ -1,23 +1,25 @@
<template>
    <div class="leftMnu">
        <div class="menuBox">
            <div class="aside-title">{{ title.t1 }}</div>
            <div class="echartBox">
                <div id="letftEchart1" class="chartBox"></div>
            </div>
            <chart-vue :childData="childData"></chart-vue>
        </div>
        <div class="menuBox">
            <div class="aside-title">{{ title.t2 }}</div>
            <chart-vue :childData="childData1"></chart-vue>
        </div>
        <div class="menuBox">
            <div class="aside-title">{{ title.t3 }}</div>
            <chart-vue :childData="childData2"></chart-vue>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import chartVue from './list/chart.vue';
import data from './data.js';
export default {
    components: {
        chartVue
    },
    props: {
        leftChartData: {
            type: Object,
@@ -26,94 +28,36 @@
    },
    data() {
        return {
            title: {
                t1: 'xxx',
                t2: 'XXXX',
                t3: 'xxxxx'
            },
            myLeftChart1: null,
            leftChartOption: {
                lenData: [],
                xData: [],
                serData: [],
            },
            childData: null,
            childData1: null,
            childData2: null,
        }
    },
    watch: {
        leftChartData: {
            deep: true,
            handler(res) {
                if (res) {
                    if (res.type == "left1") {
                        this.setLeftChart1(res.val)
                    }
                }

            }
        }
    },
    mounted() {
        this.initEchart();
    },
    methods: {
        setLeftChart1(res) {
            console.log(res);

            if (!this.myLeftChart1) {
                this.myLeftChart1 = echarts.init(document.getElementById('letftEchart1'));
            }
            if (this.leftChartOption.lenData.length == 0) {
                this.title.t1 = res.head[1]
                this.leftChartOption.lenData.push(res.head[0])
                const colors=['#67C23A','#E6A23C','#F56C6C']
                for (var i = 0; i < 3; i++) {
                    this.leftChartOption.serData.push({
                        name: res.head[i+1],
                        type: 'line',
                        stack: 'Total',
                        data: [],
                        lineStyle: {
                            color: colors[i], // 折线颜色

                        }
                    })
                }
            }
            var option = this.getChartOption(res)
            this.myLeftChart1 && this.myLeftChart1.setOption(option);
        initEchart() {
            this.initEchart1();
            this.initEchart2();
            this.initEchart3();
        },
        getChartOption(res) {
            for(var i = 0;i<3;i++){
                this.leftChartOption.serData[i].data.push(res.data[i+1])
            }
         

            this.leftChartOption.xData.push(res.data[0])
            return {
                legend: {
                    show: false
        initEchart1() {
            var chart1= data[3];
            chart1.id = "myChart01";
            this.childData =chart1
                },

                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.leftChartOption.xData,
                    axisLine: {
                        lineStyle: {
                            color: 'white' // 设置为红色
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: 'white' // 设置为红色
                        }
                    }
                },
                series: this.leftChartOption.serData
            }
        initEchart2() {
            var chart2= data[4];
            chart2.id = "myChart02";
            this.childData1 = chart2
        }, initEchart3() {
            var chart3= data[5];
            chart3.id = "myChart03";
            this.childData2 = chart3
        }
    }
}