添加本地矢量地图服务，初始化视角切换

suerprisePlus

2024-08-21 7d57b0fef0f220dfe7c868ce1113a7ce6eb6c468

 src/views/visualization/leftMenu.vue

@@ -2,6 +2,9 @@
    <div class="leftMnu">
        <div class="menuBox">
            <div class="aside-title">{{ title.t1 }}</div>
            <div class="echartBox">
                <div id="letftEchart1" class="chartBox"></div>
            </div>
        </div>
        <div class="menuBox">
            <div class="aside-title">{{ title.t2 }}</div>
@@ -13,13 +16,103 @@
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        leftChartData: {
            type: Object,
            required: true
        },
    },
    data() {
        return {
            title: {
                t1: 'xxx',
                t2: 'XXXX',
                t3: 'xxxxx'
            },
            myLeftChart1: null,
            leftChartOption: {
                lenData: [],
                xData: [],
                serData: [],
            },
        }
    },
    watch: {
        leftChartData: {
            deep: true,
            handler(res) {
                if (res) {
                    if (res.type == "left1") {
                        this.setLeftChart1(res.val)
                    }
                }

            }
        }
    },
    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);
        },
        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
                },

                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
            }
        }
    }
@@ -40,6 +133,8 @@
        background: url(~@/assets/images/Screen/chartbg.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;

        .aside-title {
            box-sizing: border-box;
@@ -55,6 +150,19 @@
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .echartBox {
            flex: 1;
            padding: 5px;
            position: relative;

            .chartBox {
                width: calc(100% - 10px);
                height: calc(100% - 10px);

                position: absolute;
            }
        }
    }
}
</style>