luohe_fronted/src/pages/index/components/parking_area.vue

<template>
  <div class="body-wrapper">
    <el-form class="form-wrapper" :inline="true" :model="formInline">
      <el-form-item label="行政区">
        <el-select clearable v-model="formInline.regionCode" placeholder="请选择" popper-class="cur-select">
          <el-option v-for="item in districtOptions"  :key="item.label" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryAll">查询</el-button>
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: space-between;">
      <div style="width: 50%; height: 300px">
        <div align="center" style="color: white">区域饱和度</div>
        <barchart
          class="side-chart"
          :autoStop="false"
          :colorArr="['#ffd201', '#00eacb', '#01b4ff', '#5d78ff']"
          legendIcon="react"
          :bottom="30"
          :xlabelFormat="xLabelFormat"
          :top="60"
          yAxisName="(%)"
          :tooltip="tooltipFormat"
          :dataset="bardata"
          :encode="[
            {x: 'month', y: 'hs', seriesName: '饱和度'}]"
          :labelSize="15"
          id="fxdqhszzt"
        />
      </div>
      <div style="width: 50%; height: 300px">
        <div align="center" style="color: white">饱和度时段分析</div>
        <linechart
          :autoStop="false"
          :top="30"
          :bottom="30"
          :left="40"
          :legendTop="0"
          yAxisName="(%)"
          :rotate="30"
          :dataset="linedata"
          :tooltipFormat="lineTooltipFormat1"
          :encode="[
              { x: 'month', y: 'lastAmount', seriesName: '饱和度',bool:'true' },
            ]"
          id="sxcyfzqk1"
        />
      </div>
    </div>
    <div style="display: flex; justify-content: space-between;margin-top: 5%">
      <div style="width: 100%; height: 500px;">
        <div align="center" style="color: white;margin-bottom: 10px;">停车热度时空分布</div>
        <div id="map" style="width: 100%; height: 600px;"/>
      </div>
    </div>
  </div>
</template>
<script>
import linechart from "@/components/lineChart";
import barchart from "@/components/barChart";
import api from '@/api/article_z'
import options from '@/util/options'
import * as echarts from 'echarts'
import 'echarts-extension-amap'

export default {
  components: {
    linechart,
    barchart,
  },
  data() {
    return {
      formInline: {
        regionCode: ''
      },
      districtOptions: options.districtOptions,
      option: {
        amap: {
          viewMode: '3D',
          center: [114.02, 33.58],
          zoom: 12,
          resizeEnable: true,
          //使用自定义主题
          mapStyle: 'amap://styles/grey',
          renderOnMoving: true,
          largeMode: false

        },
        tooltip: {
          trigger: 'item'
        },
        animation: true,
        series: [
          {
            name: 'PM2.5',
            type: 'scatter',
            coordinateSystem: 'amap',
            data: [],
            symbolSize: function (val) {
              return val[2] / 10;
            },
            encode: {
              value: 2
            },
            label: {
              formatter: '{b}',
              position: 'right',
              show: false
            },
            itemStyle: {
              normal: {
                color: '#00c1de'
              }
            },
            emphasis: {
              label: {
                show: true
              }
            }
          },
          {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'amap',
            data: [],
            symbolSize: function (val) {
              return val[2] / 10;
            },
            encode: {
              value: 2
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              formatter: '{b}',
              position: 'right',
              show: true
            },
            itemStyle: {
              color: '#f00',
              shadowBlur: 10,
              shadowColor: '#333'
            },
            zlevel: 1
          }
        ]
      },
      linedata: [],
      bardata: [],
    }
  },
  mounted() {
    this.queryAll()

  },
  watch: {

  },
  methods: {
    queryAll() {
      this.getBarData()
      this.getLineData()
      this.getMapData()
    },
    getBarData() {
      api.queryParkingArea_qybhd({...this.formInline}).then(res => {
        this.bardata = res.data || []
      })
    },
    getLineData() {
      api.queryParkingArea_bhdsdfx({...this.formInline}).then(res => {
        this.linedata = res.data || []
      })
    },
    lineTooltipFormat1(params) {
      const data = params[0].data;
      return `<div class="line-tooltip">
        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
        params[0].data.lastAmount || "--"
      }(%)</div>`;
    },

    xLabelFormat(name) {
      const nameArr = []
      for(let i=0; i<name.length; i+=7) {
        nameArr.push(name.substring(i, i+7))
      }
      return nameArr.join('\n');
    },
    tooltipFormat(params) {
      const type = params[0].seriesType;
      const data = params[0].data;
      // ${params[0].name || "--"}月：
      return `<div class="${type==='bar' ? 'bar-tooltip-dz' : type==='line' ? 'line-tooltip-dz' : ''}">${params[0].seriesName}:${data.hs || "--"}%</div>`;
    },
    getMapData() {
      api.queryParkingArea_Tcrdskfb({...this.formInline}).then(res => {
        let resData = res.data || []
        let data = resData.map(item => ({name: item[2], value: item[3]}))
        let geoCoordMap = {}
        resData.map(item => {geoCoordMap[item[2]] = [item[0],item[1]]})
        let myChart = echarts.init(document.getElementById("map"));
        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
              });
            }
          }
          return res;
        };
        let option = {
          amap: {
            viewMode: '3D',
            center: [114.02, 33.58],
            zoom: 10,
            resizeEnable: true,
            //使用自定义主题
            mapStyle: 'amap://styles/grey',
            renderOnMoving: true,
            largeMode: false
          },
          tooltip: {
            trigger: 'item'
          },
          animation: true,
          series: [
            {
              name: '停车热度',
              type: 'scatter',
              coordinateSystem: 'amap',
              data: convertData(data),
              symbolSize: function (val) {
                return val[2] / 100;
              },
              encode: {
                value: 2
              },
              label: {
                formatter: '{b}',
                position: 'right',
                show: false
              },
              itemStyle: {
                normal: {
                  color: '#00c1de'
                }
              },
              emphasis: {
                label: {
                  show: true
                }
              }
            },
            {
              name: 'Top 5',
              type: 'effectScatter',
              coordinateSystem: 'amap',
              data: convertData(data.sort(function (a, b) {
                return b.value - a.value;
              }).slice(0, 5)),
              symbolSize: function (val) {
                return val[2] / 100;
              },
              encode: {
                value: 2
              },
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              label: {
                formatter: '{b}',
                position: 'right',
                show: false
              },
              itemStyle: {
                color: '#f00',
                shadowBlur: 10,
                shadowColor: '#333'
              },
              zlevel: 1
            }
          ]
        };
        myChart.setOption(option);
      });
    }
  }
}
</script>
<style  lang="scss" scoped>

.model-pie-body {
  width: 100%;
  height: 99%;
}


</style>
<style lang="less" scoped>
  .bottom {
    height: 600px;
    width: 100%;
  }
  /deep/ .el-input__inner {
    background: #2d3744;
    border: none;
    border-radius: 0;
  }
  /deep/ .el-select {

    /* 下面设置右侧按钮居中 */
    .el-input__suffix {
      top: 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
    }
    /* 输入框加上上下边是 32px + 2px =34px */
    .el-input__icon {
      line-height: 0px;
    }
  }
  .body-wrapper {
    .button-block{
      text-align: right;
      margin-bottom: 20px;
    }

  }
  .audit-dialog{
    .mg-bt{
      margin-bottom: 24px;
    }
    .label{
      text-align: right;
    }
  }
  /deep/ .el-textarea.is-disabled .el-textarea__inner {
    background: #2a2a2a;
    color: #fff;
  }
</style>