道路噪声趋势图-存在柱状图部分不兼容问题

src/views/sound/road/trend/index.vue

@@ -24,13 +24,13 @@
         </a-col>
         <a-col :lg="4" :md="8" :sm="24" :xs="24">
           <a-form-item label="城区:">
-            <a-select :options="areaOptions" v-model:value="queryParams.area" placeholder="城区">
+            <a-select mode="multiple" :options="areaOptions" @change="handleAreaChange" placeholder="城区">
             </a-select>
           </a-form-item>
         </a-col>
         <a-col :lg="4" :md="8" :sm="24" :xs="24">
           <a-form-item label="测点名称:">
-            <a-select :options="palceOptions" v-model:value="queryParams.place" placeholder="测点名称">
+            <a-select mode="multiple" :options="placeOptions" @change="handlePlaceChange" placeholder="测点名称">
             </a-select>
           </a-form-item>
         </a-col>
@@ -38,7 +38,7 @@
       <a-row>
         <a-col :lg="4" :md="8" :sm="24" :xs="24">
           <a-space>
-            <a-button type="primary" class="mb-20" @click="startStatistic">开始统计</a-button>
+            <a-button type="primary" class="mb-20" @click="drawTrend">开始统计</a-button>
           </a-space>
         </a-col>
       </a-row>
@@ -51,6 +51,7 @@
 
 <script>
   import * as echarts from 'echarts'
+  import { markRaw } from 'vue'
   import {
     getColumnOptions,
     getTrendChart
@@ -62,10 +63,10 @@
         queryParams: {
           startYear: 2020,
           endYear: 2021,
-          area: '',
+          areaList: ['兴宁区','西乡塘区'],
-          place: ''
+          placeList: []
         },
-        tableData: [],
+        trendData: [],
         chartColumn: null,
         placeOptions: [],
         areaOptions: [],
@@ -77,7 +78,13 @@
       this.drawTrend()
     },
     methods: {
-      /**获取下来框数据 */
+      handleAreaChange(value) {
+        this.queryParams.areaList = Object.values(value)
+      },
+      handlePlaceChange(value) {
+        this.queryParams.placeList = Object.values(value)
+      },
+      // 下拉列表
       loadOptionData() {
         getColumnOptions("place").then((res) => {
           this.placeOptions = res.data.data.map((item) => {
@@ -104,95 +111,33 @@
           });
         });
       },
-      // 开始统计
-      startStatistic() {
-        getTrendChart(this.queryParams).then( res =>{
-          console.log(res)
-        })
-      },
       // 趋势图
       drawTrend() {
-        this.chartColumn = echarts.init(document.getElementById('chartColumn'))
+        getTrendChart(this.queryParams).then( res => {
-        this.chartColumn.setOption({
+          this.trendData = res.data.data
-          tooltip: {
+          this.chartColumn = markRaw(echarts.init(document.getElementById('chartColumn')))
-            trigger: 'axis',
+          this.chartColumn.setOption({
-            axisPointer: {
+            tooltip: {
-              type: 'cross',
+              trigger: 'axis',
-              crossStyle: {
+              axisPointer: {
-                color: '#999'
+                type: 'cross',
-              }
+                crossStyle: {
-            }
+                  color: '#999'
-          },
+                }
-          toolbox: {
-            feature: {
-              dataView: {
-                show: true,
-                readOnly: false
-              },
-              magicType: {
-                show: true,
-                type: ['line', 'bar']
-              },
-              restore: {
-                show: true
-              },
-              saveAsImage: {
-                show: true
-              }
-            }
-          },
-          legend: {
-            data: ['Evaporation', 'Precipitation', 'Temperature']
-          },
-          xAxis: [{
-            type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-            axisPointer: {
-              type: 'shadow'
-            }
-          }],
-          yAxis: [{
-              type: 'value',
-              name: 'Precipitation',
-              min: 0,
-              max: 250,
-              interval: 50,
-              axisLabel: {
-                formatter: '{value} ml'
               }
             },
-            {
+            toolbox: {
-              type: 'value',
+              feature: {
-              name: 'Temperature',
+                saveAsImage: {
-              min: 0,
+                  show: true
-              max: 25,
+                }
-              interval: 5,
-              axisLabel: {
-                formatter: '{value} °C'
               }
-            }
-          ],
-          series: [{
-              name: 'Evaporation',
-              type: 'bar',
-              data: [
-                2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
-              ]
             },
-            {
+            legend: this.trendData.legend,
-              name: 'Precipitation',
+            xAxis: this.trendData.xAxis,
-              type: 'bar',
+            yAxis: this.trendData.yAxis,
-              data: [
+            series: this.trendData.series
-                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+          })
-              ]
-            },
-            {
-              name: 'Temperature',
-              type: 'line',
-              yAxisIndex: 1,
-              data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
-            }
-          ]
         })
       }
     }