tdzcxx-frontend/src/views/tj/compoent/map3Data.vue

<template>
  <div>
    <div style="width:800px;height:600px" ref="chartsDOM"></div>
  </div>


</template>

<script>
import * as echarts from "echarts";
import shandong from "@views/tj/areaJson/shandong.json"
import {getAction} from "@api/manage";

export default {
  name: "mapData",
  data() {
    return {
      resdata: [],
      yData: [],
      barData: [],
      tem_title: "",
      centerData: {},
      myChart: null,
      tem_resultMapData: {},
      tem_data: {},
      visible: false,
      max1: 100,
      areaData: "", //地区数据,
      tem_areaData: "",//临时数据
      areaUrl: "",
      options: {},
      myTool1_show: false,
      rangeMax: 200,
      rangeMin: 0,
    }
  },
  mounted() {

  },
  watch: {
    resultMapData: {
      deep: true,
      handler(newVal, oldVal) {
        this.tem_data = newVal
        this.$nextTick(function () {
          for (var i = 0; i < newVal.length; i++) {
            this.barData.push(newVal[i]);
            this.yData.push(i + newVal[i].name);
          }
          this.getPie()
        })
        // 获取组件允许最大值
        // this.rangeMax = Math.max.apply(Math, newVal.map(item => item.value));
        // 获取组件允许最小值
        // this.rangeMin = Math.min.apply(Math, newVal.map(item => item.value));

      }
    },
    tem_data: {
      deep: true,
      handler(newVal, oldVal) {
        if (oldVal != "") {
          this.tem_resultMapData = oldVal
          this.getPie()
        }

      }

    }
  },
  created() {
    this.initMap()

  },

  props: {
    resultMapData: {
      type: Array,
      default: [{name: '济南市', value: 496, ssqy: 200, szdw: 296},
        {name: '青岛市', value: 66, ssqy: 200, szdw: 296},
        {name: '烟台市', value: 222, ssqy: 200, szdw: 296},
        {name: '潍坊市', value: 688, ssqy: 200, szdw: 296},
        {name: '菏泽市', value: 75, ssqy: 200, szdw: 296},
        {name: '日照市', value: 121, ssqy: 200, szdw: 296},
        {name: '威海市', value: 91, ssqy: 200, szdw: 296},
        {name: '枣庄市', value: 479, ssqy: 200, szdw: 296},
        {name: '临沂市', value: 34, ssqy: 200, szdw: 296},
        {name: '滨州市', value: 631, ssqy: 200, szdw: 296},
        {name: '东营市', value: 400, ssqy: 200, szdw: 296},
        {name: '淄博市', value: 988, ssqy: 200, szdw: 296},
        {name: '泰安市', value: 693, ssqy: 200, szdw: 296},
        {name: '聊城市', value: 934, ssqy: 200, szdw: 296},
        {name: '济宁市', value: 748, ssqy: 200, szdw: 296},
        {name: '德州市', value: 900, ssqy: 200, szdw: 296},]
    },
    titles: {
      type: Object,
    }
  },
  methods: {
    initMap() {
      this.areaData = require("@views/tj/areaJson/shandong.json")
      this.setCenter(shandong)
      this.tem_title = ""
    },
    setCenter(data) {
      var arr = data.features
      arr.length > 0 && arr.forEach((item, index) => {
        var obj = {}
        this.centerData[item.properties.name] = item.properties.center
      })

    },
    getPie() {
      var _this = this
      var myChart = echarts.init(this.$refs["chartsDOM"]);
      document.oncontextmenu = function () {
        return false;
      };
      // 获取组件允许最大值
      this.rangeMax = Math.max.apply(Math, this.tem_data.map(item => item.value));
      // 获取组件允许最小值
      this.rangeMin = Math.min.apply(Math, this.tem_data.map(item => item.value));

      // 显示 loading 动画
      myChart.showLoading();
      myChart.on("contextmenu", (params) => {
        if (_this.areaData.features[0].properties.level == 'district') {
          this.areaData = require("@views/tj/areaJson/shandong.json")
          this.setCenter(_this.areaData)
          this.tem_data = this.tem_resultMapData
          this.tem_title = ""
          this.$emit('visible', {xzqh: ""});
          this.myTool1_show = false

        }
      })
      _this.tem_areaData = _this.areaData

      myChart.on("click", (params) => {
        _this.tem_title = params.data.name
        _this.myTool1_show = true
        if (_this.areaData.features[0].properties.level == 'city') {
          _this.$emit('visible', {xzqh: params.data.xzqhdm, xzqhmc: params.data.name});
          _this.areaData = require("@views/tj/GeographicDataJson/" + params.data.name + ".json")
          _this.setCenter(_this.areaData)
          if (this.titles.orgCode == "A04") {
            getAction("/qcsb.qyxx/qcQyxx/dtdktjSQByxq", {orgCode: "A04", xzqh: params.data.xzqhdm}).then(res => {
              if (res.code == 200) {
                _this.tem_data = res.result
              }
            })
          } else if (this.titles.orgCode == "A03") {
            getAction("/qcsb.qyxx/qcQyxx/dtdktjSQByxq", {orgCode: "A03", xzqh: params.data.xzqhdm}).then(res => {
              if (res.code == 200) {
                _this.tem_data = res.result
              }
            })
          }
        } else if (_this.tem_areaData.features[0].properties.level == 'district') {
          _this.$emit('visible', {xzqh: params.data.xzqhdm, sfsb: "3"});
          // var areaDataItem = _this.areaData.features.filter(item => item.properties.name == params.data.name)
          // console.log(areaDataItem);
          // _this.areaData = {
          //   "type": "FeatureCollection",
          //   "features": areaDataItem
          // }
          // console.log(_this.areaData);
          // _this.setCenter(_this.areaData)
          // _this.resultMapData = [{
          //   "xzqhdm": "3717",
          //   "value2": 38456.0543,
          //   "name": "潍城区",
          //   "value": 220
          // }]
        }
      })

      // 再得到数据的基础上，进行地图绘制
      // 得到结果后，关闭动画
      myChart.hideLoading();
      // 注册地图(数据放在axios返回对象的data中哦)
      echarts.registerMap('SD', this.areaData);
      this.options = {
        title: [{
          show: true,
          text: this.tem_title ? this.tem_title + this.titles.title : '山东省' + this.titles.title,
        }],
        toolbox: {
          orient: 'vertical',
          right: '5%',
          top: '3%',
          itemSize: 15,
          itemGap: 25,
          feature: {
            myTool1: {
              show: this.myTool1_show,
              title: '返回上级',
              icon: 'path://M250.283494 0.000618a45.730811 45.730811 0 0 0-32.753149 13.595647L21.011454 210.115156a45.730811 45.730811 0 0 0 0 65.506297L53.764602 308.992586l164.383727 163.147759a43.876859 43.876859 0 0 0 32.753149 13.595647 45.730811 45.730811 0 0 0 32.753149-13.595647 46.348795 46.348795 0 0 0 0-65.506297l-123.596788-123.596787h460.398033a332.475358 332.475358 0 0 1 330.621406 257.081317 323.823582 323.823582 0 0 1-316.407776 389.947864H48.202747a48.202747 48.202747 0 0 0-48.202747 48.202747 44.494843 44.494843 0 0 0 44.494843 44.494843h591.410627A415.903189 415.903189 0 0 0 1050.572691 596.9731a432.588755 432.588755 0 0 0-432.588755-405.397462H170.563566l112.473077-112.473076a46.348795 46.348795 0 0 0 0-65.506297 45.730811 45.730811 0 0 0-32.753149-13.595647z',
              onclick: function () {
                if (_this.areaData.features[0].properties.level == 'district') {
                  _this.areaData = require("@views/tj/areaJson/shandong.json")
                  _this.setCenter(_this.areaData)
                  _this.tem_data = _this.tem_resultMapData
                  _this.tem_title = ""
                  _this.$emit('visible', {xzqh: ""});
                  _this.myTool1_show = false
                }
              }
            },
          }
        },
        tooltip: {
          triggerOn: "mousemove",   //mousemove、click
          padding: 8,
          borderWidth: 1,
          borderColor: '#409eff',
          backgroundColor: 'rgba(255,255,255,0.9)',
          formatter: function (params) {
            return params.name + ':' + '</br>' + "地块数量:" + params.value + '块' + '</br>' + "实际占用总面积:" + parseFloat(params.data.value2).toFixed(2) + "亩"
          },

        },
        visualMap: {
          type: 'continuous',
          orient: 'horizontal',
          itemWidth: 10,
          itemHeight: 80,
          text: ['高', '低'],
          showLabel: false,
          seriesIndex: [0],
          // min: 0,
          min: this.rangeMin,
          max: this.rangeMax,
          inRange: {
            color: ['#ADD6F1', '#26AEFB', '#0290EB'] // 渐变颜色
          },
          textStyle: {
            color: '#7B93A7'
          },
          bottom: 30,
          left: 'left',
        },
        geo: {
          roam: false,
          map: 'SD',
          select: { //选中显示设置
            label: {
              show: false,
            },
          },
          // layoutSize: '80%',
          label: {
            normal: {
              show: false, //显示省份标签
            },
            emphasis: { //对应的鼠标悬浮效果
              show: false,
              textStyle: {
                color: "#000"
              }
            }
          },
          itemStyle: {
            emphasis: {
              areaColor: '#fff464'
            }
          }
        },
        series: [{
          name: 'mapSer',
          type: 'map',
          roam: false,
          geoIndex: 0,
          label: {
            show: false,
            fontSize: 0,
          },
          data: this.tem_data
        }]
      };
      myChart.clear();
      console.log("tem_data", this.tem_data);
      myChart.setOption(this.options, true);
      myChart.resize();
      //地图的点击事件


      var option = {
        xAxis: [],
        yAxis: [],
        grid: [],
        series: [],
      };
      echarts.util.each(_this.tem_data, function (dataItem, idx) {

        var geoCoord = _this.centerData[dataItem.name];
        var coord = myChart.convertToPixel('geo', geoCoord);
        idx += '';
        var inflationData = [dataItem.value];
        option.xAxis.push({
          id: idx,
          gridId: idx,
          type: 'category',
          nameLocation: 'middle',
          name: dataItem.name,
          nameGap: 3,
          nameTextStyle: {
            color: "#000000",
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#fff",
            show: false
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: '#555'
            }
          },
          data: ["地块数量"],
          z: 100
        });
        option.yAxis.push({
          id: idx,
          gridId: idx,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          min: 0,
          max: 1000,
          z: 100
        });
        option.grid.push({
          id: idx,
          width: 15,
          height: 35,
          left: coord[0] - 15,
          top: coord[1] - 30,
          z: 100
        });
        option.series.push({
          id: idx,
          type: 'bar',
          xAxisId: idx,
          yAxisId: idx,
          barGap: 0,
          barCategoryGap: 0,
          data: inflationData,
          label: {
            normal: {
              show: true,//开启显示
              position: 'top',//柱形上方
              textStyle: { //数值样式
                color: '#000000'
              }
            }
          },
          z: 100,
          itemStyle: {
            normal: {
              barBorderRadius: [5, 5, 0, 0],
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, [{
                  offset: 0,
                  color: '#FE735A'
                },
                  {
                    offset: 1,
                    color: '#f1cb07'
                  }
                ]
              )
            }
          }
        });
      })
      myChart.setOption(option);
    },

  }
}

</script>

<style scoped>

</style>