From 703703929e97b94ca1c1c5e35a578e5fe9d4cfea Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期一, 30 九月 2024 09:58:04 +0800
Subject: [PATCH] 代码修改
---
src/views/visualization/leftMenu.vue | 118 +++++++++++++++-------------------------------------------
1 files changed, 31 insertions(+), 87 deletions(-)
diff --git a/src/views/visualization/leftMenu.vue b/src/views/visualization/leftMenu.vue
index 8c3d8c2..311369e 100644
--- a/src/views/visualization/leftMenu.vue
+++ b/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
- },
-
- 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
- }
+ initEchart1() {
+ var chart1= data[3];
+ chart1.id = "myChart01";
+ this.childData =chart1
+ },
+ initEchart2() {
+ var chart2= data[4];
+ chart2.id = "myChart02";
+ this.childData1 = chart2
+ }, initEchart3() {
+ var chart3= data[5];
+ chart3.id = "myChart03";
+ this.childData2 = chart3
}
}
}
--
Gitblit v1.9.3