wj-smartcity 引入vue-echarts使用resize特性完成图表自适应并减少option代码量，部分字体大小自适应

wj-smartcity/package.json

@@ -49,6 +49,7 @@
     "vue": "^2.6.11",
     "vue-clipboard2": "^0.3.1",
     "vue-draggable-resizable": "^2.3.0",
+    "vue-echarts": "^6.7.2",
     "vue-router": "^3.4.6",
     "vue-seamless-scroll": "^1.1.23",
     "vuex": "^3.5.1"

wj-smartcity/src/main.js

@@ -18,6 +18,9 @@ Vue.component('vue-draggable-resizable', VueDraggableResizable)
 // script引入element use
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
+import "echarts";
+import Chart from 'vue-echarts';
+Vue.component('v-chart', Chart)
 Vue.use(ElementUI, {
   size: 'small',
 })

wj-smartcity/src/views/signal/index.vue

@@ -5,6 +5,7 @@
           @showPolygon="showPolygon"
           @openGreenWaveDialog="openGreenWaveDialog" :show="boxesShow"></msgs>
     <div :class="boxesShow ? '' : 'hideBackToMain'" @click="backToMain" v-if="isCrossDetail" class="backToMain"></div>
+    <!--切换图层 收起放开侧边栏-->
     <layers-switch
         ref="switch"
         :show="boxesShow"

wj-smartcity/src/views/signal/msgs/right/detailComponents/queueLength.vue

@@ -12,7 +12,7 @@
         </el-option>
       </el-select>
     </div>
-    <div class="d-chart" id="d-queueLength"></div>
+    <v-chart class="d-chart" autoresize :option="option"/>
   </div>
 </template>
 
@@ -25,6 +25,7 @@ export default {
   props:['crossData'],
   data() {
     return {
+      option:{},
       turnMap: {'r':'右转','s':'直行','l':'左转'},
       options: [],
       selectVal: '',
@@ -240,12 +241,7 @@ export default {
           return series;
         })(),
       };
-      if (!this.chart) {
-        this.chart = echarts.init(
-            document.getElementById("d-queueLength")
-        );
-      }
-      this.chart && this.chart.setOption(option, {notMerge: true});
+      this.option = option
     },
     // 渲染转向级别排队图表
     renderTurn() {
@@ -383,12 +379,7 @@ export default {
           return series;
         })(),
       };
-      if (!this.chart) {
-        this.chart = echarts.init(
-            document.getElementById("d-queueLength")
-        );
-      }
-      this.chart && this.chart.setOption(option, {notMerge: true});
+      this.option = option
     },
   },
 

wj-smartcity/src/views/signal/msgs/right/detailComponents/trafficFlow.vue

@@ -14,7 +14,8 @@
         </el-option>
       </el-select>
     </div>
-    <div class="d-chart" id="d-trafficFlow"></div>
+<!--    <div class="d-chart" id="d-trafficFlow"></div>-->
+    <v-chart class="d-chart" autoresize :option="option"/>
   </div>
 </template>
 
@@ -27,6 +28,7 @@ export default {
   name: 'trafficFlow',
   data() {
     return {
+      option:{},
       colors :[
         "rgba(24, 144, 255, 1)",
         "rgba(0, 189, 208, 1)",
@@ -299,16 +301,10 @@ export default {
               data: yDatas[key],
             })
           }
-          console.log("series", series);
           return series;
         })(),
       };
-      if (!this.chart) {
-        this.chart = echarts.init(
-            document.getElementById("d-trafficFlow")
-        );
-      }
-      this.chart && this.chart.setOption(option, {notMerge: true});
+      this.option = option
     },
     // 渲染转向级别流量图表
     renderTurn() {
@@ -471,12 +467,7 @@ export default {
           return series;
         })(),
       };
-      if (!this.chart) {
-        this.chart = echarts.init(
-            document.getElementById("d-trafficFlow")
-        );
-      }
-      this.chart && this.chart.setOption(option, {notMerge: true});
+      this.option = option
     },
     // 渲染车道级流量图表
     renderLane(){
@@ -637,12 +628,7 @@ export default {
           return series;
         })(),
       };
-      if (!this.chart) {
-        this.chart = echarts.init(
-            document.getElementById("d-trafficFlow")
-        );
-      }
-      this.chart && this.chart.setOption(option, {notMerge: true});
+      this.option = option
     }
   },
 

wj-smartcity/src/views/signal/msgs/right/detailComponents/trafficStatus.vue

 <template>
   <div class="full-w-h d-trafficStatus">
-    <div class="d-trafficStatus-pie" id="d-trafficStatus-pie"></div>
+    <v-chart class="d-trafficStatus-pie" autoresize :option="option"/>
     <div class="legends">
       <div class="legend-item" v-for="(item, index) of pieData" :key="index">
         <div :style="`background-color:${colorMap[item.name]}`" class="color"></div>
@@ -34,37 +34,16 @@ export default {
         'spilloverTimeRate':'#ffd145',
         'unbalanceTimeRate':'#afafaf',
         'unblockedTimeRate':'#00933a'
-      }
+      },
+
     }
   },
   mounted() {
     this.renderCharts()
   },
-  methods:{
-    renderCharts(){
-      getCrossStatusTimeRate({crossId: this.crossData.id}).then(res=>{
-        console.log('交通状态',res)
-        let result = []
-        for(let key in res.content){
-          if(key!=='crossId'){
-            result.push({
-              value:res.content[key],
-              // name:this.fieldMap[key],
-              name:key,
-              // nameVal: key
-              itemStyle:{
-                color:this.colorMap[key]
-              }
-            })
-          }
-        }
-        this.pieData = result
-        let chartDom = document.getElementById('d-trafficStatus-pie');
-        if(!this.chart){
-          this.chart = echarts.init(chartDom);
-        }
-        console.log('result',result)
-        let option = {
+  computed:{
+    option(){
+      return {
         tooltip: {
           show:false,
           trigger: 'item'
@@ -93,11 +72,31 @@ export default {
             labelLine: {
               show: false
             },
-              data: result
+            data: this.pieData
           }
         ]
-        };
-        option && this.chart.setOption(option);
+      }
+    }
+  },
+  methods:{
+    renderCharts(){
+      getCrossStatusTimeRate({crossId: this.crossData.id}).then(res=>{
+        console.log('交通状态',res)
+        let result = []
+        for(let key in res.content){
+          if(key!=='crossId'){
+            result.push({
+              value:res.content[key],
+              // name:this.fieldMap[key],
+              name:key,
+              // nameVal: key
+              itemStyle:{
+                color:this.colorMap[key]
+              }
+            })
+          }
+        }
+        this.pieData = result
       })
 
     }

wj-smartcity/src/views/signal/msgs/right/keyCross.vue

@@ -2,8 +2,7 @@
   <msg-card class="item-keyCross" title="重点路口监测">
     <div class="full-w-h" style="position: relative">
       <div class="keyCrossTitle">排队长度(m)</div>
-      <div id="keyCross" class="full-w-h chart">
-      </div>
+      <v-chart autoresize :option="option"/>
     </div>
   </msg-card>
 </template>
@@ -18,66 +17,23 @@ let timer = null;
 export default {
   name: "keyCross",
   components: {
-    msgCard,
+    msgCard
   },
   data() {
     return {
       tabsLoading: true,
       charts: {},
+      xData:[],
+      chartResult:{},
     };
   },
-  methods: {
-    getData(){
-      getKeyCross({crossId:''}).then(res=>{
-        console.log('key cross...',res)
-        if(res.content){
-          let xData = res.content.map(item=>{
-            return new Date(item.timeStamp).toLocaleString().slice(-8).slice(0,5)
-          })
-          let maxDirList = res.content.reduce((a,b)=>{
-            for(let item of b.detailList){
-              if(!a.includes(item.dir)){
-                a.push(item.dir)
-              }
-            }
-            return a
-          },[])
-          let results = res.content.reduce((a,b)=>{
-            let flags = {}
-            for(let item of maxDirList){
-              flags[item] = false
-            }
-            for(let item of b.detailList){
-              flags[item.dir] = true
-              if(a[item.dir]){
-                a[item.dir].push(item.queueLength)
-              }else{
-                a[item.dir] = [item.queueLength]
-              }
-            }
-            for(let key in flags){
-              if(!flags[key]){
-                if(a[key]){
-                  a[key].push(0)
-                }else{
-                  a[key] = [0]
-                }
-              }
-            }
-            return a
-          },{})
-          console.log('results',results)
-          this.renderCharts(xData, results)
-        }
-
-      })
-    },
-    renderCharts(xData, lists){
-      let option = {
+  computed:{
+    option(){
+      return {
         dataZoom: {
           type: "inside",
-          startValue: Object.keys(lists).length - 6,
-          endValue: Object.keys(lists).length - 1,
+          startValue: Object.keys(this.chartResult).length - 6,
+          endValue: Object.keys(this.chartResult).length - 1,
         },
         color: [
           "rgba(24, 144, 255, 1)",
@@ -124,7 +80,7 @@ export default {
         },
         xAxis: {
           type: "category",
-          data: xData,
+          data: this.xData,
           axisLabel: {
             fontSize: getFontSize(12),
             color: "rgba(126, 139, 166, 1)",
@@ -152,7 +108,9 @@ export default {
         },
         series: (() => {
           let series = [];
-          for(let key in lists){
+          console.log('this.chartResult',this.chartResult)
+          for(let key in this.chartResult){
+            console.log('push')
             let nameReal = this.$store.state.dicts.Direction.find((item) => {
               return item.code == key;
             }).name
@@ -166,18 +124,57 @@ export default {
               emphasis: {
                 focus: "series",
               },
-              data: lists[key],
+              data: this.chartResult[key],
             })
           }
-          console.log("series", series);
           return series;
         })(),
-      };
-      this.charts.cross = echarts.init(
-          document.getElementById("keyCross")
-      );
-      this.charts.cross && this.charts.cross.setOption(option);
       }
+    }
+  },
+  methods: {
+    getData(){
+      getKeyCross({crossId:''}).then(res=>{
+        console.log('key cross...',res)
+        if(res.content){
+          this.xData = res.content.map(item=>{
+            return new Date(item.timeStamp).toLocaleString().slice(-8).slice(0,5)
+          })
+          let maxDirList = res.content.reduce((a,b)=>{
+            for(let item of b.detailList){
+              if(!a.includes(item.dir)){
+                a.push(item.dir)
+              }
+            }
+            return a
+          },[])
+          this.chartResult = res.content.reduce((a,b)=>{
+            let flags = {}
+            for(let item of maxDirList){
+              flags[item] = false
+            }
+            for(let item of b.detailList){
+              flags[item.dir] = true
+              if(a[item.dir]){
+                a[item.dir].push(item.queueLength)
+              }else{
+                a[item.dir] = [item.queueLength]
+              }
+            }
+            for(let key in flags){
+              if(!flags[key]){
+                if(a[key]){
+                  a[key].push(0)
+                }else{
+                  a[key] = [0]
+                }
+              }
+            }
+            return a
+          },{})
+        }
+      })
+    },
   },
   mounted() {
     let queue = [];

wj-smartcity/src/views/signal/msgs/trafficFlow.vue

@@ -16,7 +16,7 @@ import msgCard from "../../../components/Standard/msg-card.vue";
 import {getFlows, getSingalFlow} from "@/dao/optApi";
 
 let timer = null;
-
+let watchChartWc = null
 export default {
   name: "trafficFlow",
   components: {
@@ -370,6 +370,7 @@ export default {
       this.charts.cross && this.charts.cross.setOption(option);
     }
   },
+
   mounted() {
     // let queue = [];
     // let needDicts = [

wj-smartcity/src/views/signalEvaluation/rightIndex/lineComponents/mutLineChart.vue

@@ -11,11 +11,11 @@
     <div class="content-container" style="flex: 1;display: flex;flex-direction: column">
       <div class="forms" style="display: flex;">
         <div class="select-box">
-          <label>路口名称：</label>
+          <label class="custom-form-label">路口名称：</label>
           <el-select
               v-model="crossModel"
               placeholder="请选择路口"
-              style="width: 200px;"
+              class="custom-form-input"
               @change="initLineData"
           >
             <el-option
@@ -26,9 +26,9 @@
             >
             </el-option>
           </el-select>
-          <label style="margin-left: 10px;">范围：</label>
+          <label class="custom-form-label">范围：</label>
           <el-select
-              style="width: 100px;"
+              class="custom-form-input"
               v-model="scopeModel"
               placeholder="请选择"
               @change="scopeChange"
@@ -59,7 +59,7 @@
           </el-select>
         </div>
         <div class="select-box">
-          <label>时间粒度：</label>
+          <label class="custom-form-label">时间粒度：</label>
           <el-select
               v-model="timeModel"
               placeholder="请选择"
@@ -75,7 +75,7 @@
           </el-select>
         </div>
         <div class="select-box">
-          <label>指标选择：</label>
+          <label class="custom-form-label">指标选择：</label>
           <el-select
               v-model="indexModel"
               placeholder="请选择"

wj-smartcity/src/views/signalEvaluation/rightIndex/lineComponents/oneLineChart.vue

 <template>
-  <div id="one-line-chart" ref="chartLine"></div>
+  <v-chart class="chart" autoresize :option="chartLineOption"/>
 </template>
 
 <script>
@@ -15,15 +15,16 @@ export default {
     };
   },
   mounted() {
-    // if (this.data1 && this.data2) {
-    //   this.getChart();
-    // }
   },
-  computed: {},
-  props: ["data1", 'data2', "indexModelMiddle", 'compareTimeType'],
-  methods: {
-    getChart() {
-      let [cur, com] = [this.data1, this.data2]
+  computed: {
+    chartLineOption(){
+      let [cur, com] = [[],[]]
+      if(this.data1?.length){
+        cur =  this.data1
+      }
+      if(this.data2?.length){
+        com =  this.data2
+      }
       const xData = cur.map((item) => item.metricTime);
       const xData1 = com.map((item) => item.metricTime);
       let ifTwoXAxis = [2, 3].includes(this.compareTimeType)
@@ -67,15 +68,13 @@ export default {
         boundaryGap: false,
         data: xData,
       }
-      let myChart = echarts.init(this.$refs.chartLine);
-      let option = {
+      return {
         legend:{
           show: true,
           icon:'circle',
           textStyle: {
             color: 'rgba(255,255,255,0.8)',
           }
-
         },
         backgroundColor: "transparent",
         tooltip: {
@@ -119,17 +118,13 @@ export default {
           },
         ],
         series: series,
-      };
-      myChart.setOption(option, true);
-      watchChartWc = new ResizeObserver(() => {
-        myChart.resize()
-      })
-      watchChartWc.observe(document.getElementById('one-line-chart'))
+      }
+    }
   },
+  props: ["data1", 'data2', "indexModelMiddle", 'compareTimeType'],
+  methods: {
   },
   beforeDestroy() {
-    watchChartWc?.unobserve(document.getElementById('one-line-chart'))
-
   }
 };
 </script>