交通趋势图相关调整

年度相关调整

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

@@ -5,22 +5,10 @@
       :wrapper-col="{ md: { span: 18, }, sm: { span: 24 } }" labelAlign="left" layout="vertical">
       <a-row>
         <a-col :lg="4" :md="8" :sm="24" :xs="24">
-          <a-form-item label="开始年度">
-            <a-select v-model:value="queryParams.startYear" allowClear showSearch>
-              <a-select-option v-for="item in yearOptions" :key="item.value">
-                {{ item.label }}
-              </a-select-option>
-            </a-select>
-          </a-form-item>
-        </a-col>
-        <a-col :lg="4" :md="8" :sm="24" :xs="24">
-          <a-form-item label="结束年度">
-            <a-select v-model:value="queryParams.endYear" allowClear showSearch>
-              <a-select-option v-for="item in yearOptions" :key="item.value">
-                {{ item.label }}
-              </a-select-option>
-            </a-select>
-          </a-form-item>
+        <a-form-item label="年度:">
+          <a-select mode="multiple" v-model:value="queryParams.yearList" :options="yearOptions" placeholder="请选择年度">
+          </a-select>
+        </a-form-item>
         </a-col>
         <a-col :lg="4" :md="8" :sm="24" :xs="24">
         <a-form-item label="区域等级:">
@@ -78,8 +66,7 @@
     data() {
       return {
         queryParams: {
-          startYear: 2020,
-          endYear: 2021,
+          yearList: ["2020", "2021"],
           areaList: ['南宁市'],
           placeList: [],
           regionLevel: '市级', // 区域等级
@@ -218,6 +205,51 @@
           yAxis: this.trendData.yAxis,
           series: this.trendData.series
         }
+        trendChart.on("legendselectchanged", obj => {
+          console.log('obj', obj);
+          let index
+          if (this.queryParams.xco === '年度') {
+            index = this.queryParams.areaList.indexOf(obj.name)
+            if (index > -1) {
+              this.queryParams.areaList.splice(index, 1)
+            } else {
+              index = this.queryParams.placeList.indexOf(obj.name)
+              index > -1 && this.queryParams.placeList.splice(index, 1)
+            }
+          } else {
+            index = this.queryParams.yearList.indexOf(obj.name.substring(0,obj.name.length - 1))
+            index > -1 && this.queryParams.yearList.splice(index, 1)
+          }
+          this.drawTrend()
+        });
+        //添加一个新的刻度线 实现折线在柱状图的中间显示
+        option.xAxis[1] = {
+          type: 'value',
+          max: option.xAxis[0].data.length,
+          show: false
+        }
+
+        // option.xAxis[0].splitLine = { show: false } //去除网格线
+        // option.xAxis[0].splitArea = { show: false } //保留网格区域
+        // option.xAxis[0].axisTick = { show: false } //隐藏刻度线
+        // let barArray = option.series.filter(item => item.type === 'bar')
+        // barArray.forEach(item=>{
+        //   item.barGap = '0%'
+        // })
+        let lineArray = option.series.filter(item => item.type === 'line')
+        lineArray.forEach((item,index) => {
+          item.xAxisIndex = 1
+          item.lineStyle = {
+            type: 'dashed',
+          }
+          item.data = item.data.map((x, i) => [(i + 1 / (option.legend.data.length + 1) * (index + 1 )) , x])
+        })
+
+        // option.series[2].xAxisIndex = 1
+        // option.series[3].xAxisIndex = 1
+        // option.series[2].data = option.series[2].data.map((x, i) => [(0.25+i) , x])
+        //   option.series[3].data = option.series[3].data.map((x, i) => [(0.75+ i) , x])
+        console.log('option', option);
         trendChart.setOption(option)
       }
     }