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

<template>
  <div class="body-wrapper">
    <div class="charts">
      <div style="width: 50%;height: 220px">
        <h5 style="color: white">区域分析</h5>
        <br>
        <barchart
          class="side-chart"
          :autoStop="false"
          :colorArr="[ '#5d78ff']"
          legendIcon="react"
          :bottom="30"
          :xlabelFormat="xLabelFormat1"
          :top="60"
          :left="80"
          yAxisName="(停车次数)"
          :tooltip="tooltipFormat1"
          :dataset="bardata"
          :encode="[
            {x: 'month', y: 'hs'},
            ]"
          :labelSize="12"
          id="qyfx"
        />
      </div>

      <div style="width: 50%;height: 220px;">
        <h5 style="color: white">车场数量</h5>
        <br>
        <piechart
          class="model-pie-body"
          id="ccsl"
          :radiusArr="['30%', '50%']"
          :roseType = "false"
          :labelFormat="['{name|{b}}', '{sub|{@value}个 {d}%}', '{hr|}']"
          :dataset="ccslvalue"
          :encode="{ itemName: 'name', value: 'value' }"
        />
      </div>
      <br>
    </div>
    <br>
    <br>
    <br>
    <div class="charts">
      <div style="width: 50%;height: 220px;">
        <h5 style="color: white">停车分布分析</h5>
        <br>
        <barchart
          class="side-chart"
          :autoStop="false"
          :colorArr="[ '#5d78ff','#00ff83']"
          legendIcon="react"
          :bottom="30"
          :xlabelFormat="xLabelFormat1"
          :top="60"
          yAxisName="(辆)"
          :tooltip="tooltipFormat2"
          :dataset="tcfbfx"
          :encode="[
            {x: 'mouth', y: 'cs', seriesName: '路外停车'},
            {x: 'mouth', y: 'hs', seriesName: '路内停车'},
            ]"
          :labelSize="12"
          id="tcfbfx"
        />
      </div>

      <div style="width: 50%;height: 220px;">
        <h5 style="color: white">余位分析</h5>
        <br>
        <barchart
          class="side-chart"
          :autoStop="false"
          :colorArr="[ '#5d78ff','#00ff83']"
          legendIcon="react"
          :bottom="30"
          :xlabelFormat="xLabelFormat1"
          :top="60"
          yAxisName="(泊位)"
          :tooltip="tooltipFormat3"
          :dataset="ywfx"
          :encode="[
            {x: 'mouth', y: 'cs', seriesName: '路外余位'},
            {x: 'mouth', y: 'hs', seriesName: '路内余位'},
            ]"
          :labelSize="12"
          id="ywfx"
        />
      </div>

      <br>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="charts">
      <div style="width: 50%;height: 220px;">
        <h5 style="color: white">停车热点分析</h5>
        <br>
        <div class="bottom" id="map"></div>
      </div>

      <div style="width: 50%;height: 220px;">
        <h5 style="color: white">车流量分析</h5>
        <br>
        <linechart
          :autoStop="false"
          :top="30"
          :bottom="30"
          :left="50"
          :legendTop="0"
          yAxisName=""
          :dataset="cllfx"
          :tooltipFormat="lineTooltipFormat4"
          :encode="[
              { x: 'month', y: 'lastAmount', seriesName: '车流量' ,bool:'true'},
            ]"
          id="cllfx"
        />
      </div>

      <br>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="charts">
      <div style="width: 50%;height:220px;">
        <h5 style="color: white">低利用率停车场分析</h5>
        <br>
        <barchart
          class="side-chart"
          :autoStop="false"
          :colorArr="[ '#5d78ff']"
          legendIcon="react"
          :bottom="30"
          :xlabelFormat="xLabelFormat1"
          :top="60"
          yAxisName=""
          :tooltip="lineTooltipFormat5"
          :dataset="dlyltcc"
          :encode="[
            {x: 'mouth', y: 'hs'},
            ]"
          :labelSize="12"
          id="dlyltcc"
        />
      </div>

      <div style="width: 50%;height: 220px;">
        <h5 style="color: white">高峰路线分析</h5>
        <br>
        <div id="ChinaLineMap"></div>
      </div>
      <br>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="charts">
      <div style="width: 50%;height: 220px;">
        <h5 style="color: white">车辆进场占比</h5>
        <br>
      <piechart
          class="model-pie-body"
          id="chart1"
          :roseType="false"
          :radiusArr="['30%', '70%']"
          :colorArr="modelPieColor"
          :labelFormat="['{name|{b}}', '{sub|{@value} {d}%}', '{hr|}']"
          :dataset="zdcljcfx"
          :encode="{ itemName: 'name', value: 'value' }"
        />
    </div>

<!--      <div style="width: 50%;height: 500px;">-->
<!--        <h5 style="color: white">重点车辆追踪</h5>-->
<!--        <br>-->
<!--        <div id="ChinaLineMap2"></div>-->
<!--      </div>-->
    </div>

  </div>
</template>
<script>
import api from "@/api/audit.js";
import piechart from "@/components/pieChart";
import linechart from "@/components/lineChart";
import barchart from "@/components/barChart";
import * as echarts from 'echarts'
import * as geoJson from '@/util/411100.json'

export default {
  name: "chinaLineMap",
  components: {
    piechart,
    linechart,
    barchart
  },
  data() {
    return {
      ccslvalue: [],
      bardata: [],
      tcfbfx: [],
      ywfx: [],
      cllfx: [],
      dlyltcc: [],
      tableData: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      dqIndex: -1,
      timer: null,
      option: {
        visualMap: {
          show: true,
          type: "continuous",
          left: "0%",
          bottom: "0%",
          calculable: true,
          textStyle: {
            color: "white",
          },
          text: ["(次)"],
          min: 0,
          max: 100,
          inRange: {
            color: ["#4FC9FB","#36ADFC","#1788D1","#0E6BAE","#1871A2","#0D4D7D"],
          },
        },
        geo: {
          map: "luohe",
          // aspectScale: 1,
          roam: false,
          itemStyle: {
            normal: {
              borderColor: "#2ab8ff",
              borderWidth: 2.5,
              areaColor: "#12235c",
            },
            emphasis: {
              areaColor: "#2AB8FF",
              shadowColor: "rgba(42,184,255, 0.7)",
              shadowOffsetY: 5,
              shadowOffsetX: 5,
              shadowBlur: 5,
            },
          },
        },
        tooltip: {
          confine: true,
          formatter: this.mapTooltip,
          position: "inside",
          backgroundColor: "transparent",
        },
        series: [
          {
            type: "map",
            // roam: true,
            label: {
              normal: {
                textStyle: {
                  color: "#fff",
                },
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              normal: {
                borderColor: "#76bef5",
                borderWidth: 1.5,
                areaColor: "#4282de",
              },
              emphasis: {
                areaColor: "#002aff",
                borderWidth: 0,
                color: "green",
              },
            },
            roam: false,
            map: "luohe", //使用
            data: [],
          },
        ],
      },
      total: 0,
      pageSize: 10,
      pageNum: 1,
      radio: '2',
      dialogVisible: false,
      selRow: {},
      searchWords: undefined,
      searchWords2: undefined,
      searchWords3: undefined,
      modelPieColor: ["#4382f6", "#9078f8", "#79a7db", "#FF9800"],
      zdcljcfx: [],
    }
  },
  mounted() {
    this.getQyfx()
    this.getCcsl()
    this.getTcfbfx()
    this.getYwfx()
    this.getCllfx()
    this.getDlyltcc()
    this.getZdcljcfx()
    this.loadChinaLineMap()
    this.loadMap()
  },
  watch: {
  },
  methods: {
    setIntervalMap(chart) {
      this.timer = setInterval(() => {
        chart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: this.dqIndex + 1,
        });
        this.dqIndex++;
        if (this.dqIndex > 7) {
          this.dqIndex = -1;
        }
      }, 3000);
    },
    getQyfx() {
      api.qyfx().then(res => {
        this.bardata = res.data || []
      })
    },
    getCcsl() {
      api.ccsl().then(res => {
        this.ccslvalue = res.data || []
      })
    },
    getTcfbfx() {
      api.tcfbfx().then(res => {
        this.tcfbfx = res.data || []
      })
    },
    getYwfx() {
      api.ywfx().then(res => {
        this.ywfx = res.data || []
      })
    },
    getCllfx() {
      api.cllfx().then(res => {
        this.cllfx = res.data || []
      })
    },
    getDlyltcc() {
      api.dlyltcc().then(res => {
        this.dlyltcc = res.data || []
      })
    },
    getZdcljcfx() {
      api.zdcljcfx().then(res => {
        this.zdcljcfx = res.data || []
      })
    },
    xLabelFormat1(name) {
      const nameArr = []
      for(let i=0; i<name.length; i+=7) {
        nameArr.push(name.substring(i, i+7))
      }
      return nameArr.join('\n');
    },
    tooltipFormat1(params) {
      const data = params[0].data;
      return `<div class="bar-tooltip-dz">${data.hs || "--"}次</div>`;
    },
    tooltipFormat2(params) {
      const data = params[0].data;
      return `<div class="line-tooltip">
        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
        params[0].data.cs || 0
      }(辆)</div>
        <div style="color: ${params[1].color}">${params[1].seriesName}: ${
        params[0].data.hs || 0
      }(辆)</div>
      </div>`;
    },
    tooltipFormat3(params) {
      const data = params[0].data;
      return `<div class="line-tooltip">
        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
        params[0].data.cs || "--"
      }(辆)</div>
        <div style="color: ${params[1].color}">${params[1].seriesName}: ${
        params[0].data.hs || "--"
      }(辆)</div>
      </div>`;
    },
    lineTooltipFormat4(params) {
      const data = params[0].data;
      return `<div class="bar-tooltip-dz">${data.lastAmount || "--"}次</div>`;
    },
    lineTooltipFormat5(params) {
      const data = params[0].data;
      return `<div class="bar-tooltip-dz">${data.hs || "--"}</div>`;
    },
    mapTooltip(data) {
      return `<div class="map-tooltip">
        <div class="map-tooltip-name">${data.name}:<span class="map-tooltip-value">${data.value}次</span></div>
      </div>`;
    },
    loadMap() {
      api.tcrdfx().then(res => {
        let arr = []
        let dataSoure = res.data || {}
        for (const key in dataSoure) {
          if (key !== '411100') {
            arr.push({
              name: dataSoure[key].quyuName,
              value: Number(dataSoure[key].zb),
            });
          }
        }
        let mapMax = Math.max(...arr.map(item => item.value))
        let mapMin = Math.min(...arr.map(item => item.value))
        let chart = echarts.init(document.getElementById("map"));
        echarts.registerMap("luohe", geoJson);
        this.option.series[0].data = arr;
        this.option.visualMap.min = mapMin;
        this.option.visualMap.max = mapMax;
        chart.setOption(this.option);
        this.dqIndex = -1;
        this.setIntervalMap(chart);
        //鼠标移入静止播放
        chart.on("mouseover", (e) => {
          clearInterval(this.timer);
          chart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: e.dataIndex,
          });
        });
        chart.on("mouseout", (e) => {
          clearInterval(this.timer);
          //鼠标移出后先把上次的高亮取消
          chart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: e.dataIndex,
          });
          this.setIntervalMap(chart);
        });
      })
    },
    //加载轨迹地图
    loadChinaLineMap() {
      api.gflxfx().then(res => {
        echarts.registerMap('河南', geoJson);
        var myCharts = echarts.init(document.getElementById('ChinaLineMap'));
        // var myCharts2 = echarts.init(document.getElementById('ChinaLineMap2'));
        var geoCoordMap = res.data.geoCoordMap || {};
        var chinaDatas = (res.data.chinaDatas || []).map(item => ([{name: item.from, value: item.value}, {name: item.to, value: 0}]));
        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = geoCoordMap[dataItem[0].name];
            // var toCoord = [114.026405, 33.575855];
            var toCoord = geoCoordMap[dataItem[1].name];
            if (fromCoord && toCoord) {
              res.push([{
                coord: fromCoord,
                value: dataItem[0].value
              }, {
                coord: toCoord,
              }]);
            }
          }
          return res;
        };
        //飞线数据
        var series = [];
        [['漯河市', chinaDatas]].forEach(function (item, i) {
          console.log(item)
          series.push({
              type: 'lines',
              zlevel: 2,
              effect: {
                show: true,
                period: 4, //箭头指向速度，值越小速度越快
                trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'arrow', //箭头图标
                symbolSize: 5, //图标大小
              },
              lineStyle: {
                normal: {
                  color:'#EE5652',
                  width: 1, //尾迹线条宽度
                  opacity: 1, //尾迹线条透明度
                  curveness: .3 //尾迹线条曲直度
                }
              },
              data: convertData(item[1])
            }, {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 2,
              rippleEffect: { //涟漪特效
                period: 4, //动画时间，值越小速度越快
                brushType: 'stroke', //波纹绘制方式 stroke, fill
                scale: 4 //波纹圆环最大限制，值越大波纹越大
              },
              label: {
                normal: {
                  show: false,
                  position: 'right', //显示位置
                  offset: [5, 0], //偏移设置
                  formatter: function (params) {//圆环显示文字
                    return params.data.name;
                  },
                  color:'#FFD200',
                  fontSize: 16
                },
                emphasis: {
                  show: true
                }
              },
              symbol: 'circle',
              // symbolSize: function (val) {
              // 	return 5 + val[2] * 5; //圆环大小
              // },
              itemStyle: {
                normal: {
                  show: true,
                  color: '#ffffff'
                }
              },
              data: item[1].map(function (dataItem) {
                return {
                  name: dataItem[0].name,
                  value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                };
              }),
            },
          );
        });
        let option = {
          backgroundColor: "#0c0c0c",
          geo: [
            {
              map: '河南',
              aspectScale: 1,
              roam: false, // 是否允许缩放
              zoom: 1.2, // 默认显示级别
              layoutSize: '95%',
              layoutCenter: ['55%', '51.5%'],
              itemStyle: {
                areaColor: 'rgba(0,27,95,0.4)',
                borderColor: '#004db5',
                borderWidth: 1
              },
              zlevel: 1,
              silent: true
            }
          ],
          series: series
        };
        //var max = Math.max.apply(Math, newarray);
        //option.visualMap.max = max;
        myCharts.clear();
        myCharts.setOption(option);
        // myCharts2.clear();
        // myCharts2.setOption(option);
        // myChart.setOption(option);
      })
    }
  }
}
</script>
<style  lang="scss" scoped>
.body-wrapper {
  .button-block{
    text-align: right;
    margin-bottom: 20px;
  }
  .search-card{
    font-size: 24px;
    font-weight: bold;
    color: #3498db;
    margin-bottom: 20px;
    .input-wrapper{
      width: 36%;
    }
  }
}
#ChinaLineMap{
  width: 100%;
  height:calc(100% - 7vh);
}
#ChinaLineMap2{
  width: 100%;
  height:calc(100% - 7vh);
}
.charts{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.btn_save{
  background-color: #3498db;
  color: #ffffff;
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  height: 30px;
}

.sel{
  height: 200px;
  margin-right: 10px;
}

.input-search{
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
  background-color: #2a2a2a;
  border: 1px solid #333;
  color: #ffffff;
}
.bottom {
  height: 90%;
  width: 100%;
}
.audit-dialog{
  .mg-bt{
    margin-bottom: 24px;
  }
  .label{
    text-align: right;
  }
}
/deep/.map-tooltip {
  font-size: 18px;
  padding: 10px 20px;
  background: url("../../../../static/img/u231.png");
  background-size: 100% 100%;
  .map-tooltip-name {
    color: #00e4ff;
  }
  .map-tooltip-value {
    color: white;
    margin-left: 20px;
  }
}

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

.bar-tooltip-dz {
  padding: 5px 10px;
  background: url("../../../../static/img/u261.png");
  background-size: 100% 100%;
  color: #333;
  position: absolute;
  top: 0;
}
</style>