趋势图前端代码提交-未完成

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

@@ -0,0 +1,206 @@
+<template>
+  <div class="ele-body">
+    <!-- 搜索表单 -->
+    <a-form :model="queryParams" :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
+      :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-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>
+          </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>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <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-space>
+        </a-col>
+      </a-row>
+    </a-form>
+    <a-card :bordered="false">
+      <div id="chartColumn" style="width: 100%; height: 500px;"></div>
+    </a-card>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts'
+  import {
+    getColumnOptions,
+    getTrendChart
+  } from "@/api/ecology/noise/road-sound";
+  export default {
+    components: {},
+    data() {
+      return {
+        queryParams: {
+          startYear: 2020,
+          endYear: 2021,
+          area: '',
+          place: ''
+        },
+        tableData: [],
+        chartColumn: null,
+        placeOptions: [],
+        areaOptions: [],
+        yearOptions: []
+      };
+    },
+    mounted() {
+      this.loadOptionData();
+      this.drawTrend()
+    },
+    methods: {
+      /**获取下来框数据 */
+      loadOptionData() {
+        getColumnOptions("place").then((res) => {
+          this.placeOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+        getColumnOptions("area").then((res) => {
+          this.areaOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+        getColumnOptions("monitor_year").then((res) => {
+          this.yearOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+      },
+      // 开始统计
+      startStatistic() {
+        getTrendChart(this.queryParams).then( res =>{
+          console.log(res)
+        })
+      },
+      // 趋势图
+      drawTrend() {
+        this.chartColumn = echarts.init(document.getElementById('chartColumn'))
+        this.chartColumn.setOption({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              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'
+              }
+            },
+            {
+              type: 'value',
+              name: 'Temperature',
+              min: 0,
+              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
+              ]
+            },
+            {
+              name: 'Precipitation',
+              type: 'bar',
+              data: [
+                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]
+            }
+          ]
+        })
+      }
+    }
+
+  }
+</script>
+<style scoped lang="less">
+  .mb-20 {
+    margin-bottom: 20px;
+  }
+</style>