ZRZYQC/UI2/src/views/tj/compoent/map3Data.vue

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

</template>

<script>
import * as echarts from "echarts";
import GetShandong from "@api/GetShandong";
import shandong from "@views/tj/shandong.json"

export default {
  name: "mapData",
  data() {
    return {
      resdata: [],
      yData:[],
      barData:[],
      centerData:{} ,
      myChart:null,
      visible:false

    }
  },
  mounted() {

  },
  watch: {
    resultMapData() {
      this.$nextTick(function () {
        for (var i = 0; i < 10; i++) {
          this.barData.push(this.resultMapData[i]);
          this.yData.push(i + this.resultMapData[i].name);
        }
        this.getPie()
      })
    },
  },
  created() {
      var arr = shandong.features
      arr.length>0 && arr.forEach((item,index) =>{
        var obj = {}
        this.centerData[item.properties.name] = item.properties.center
      })

  },

  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: String,
    }
  },
  methods: {
    getPie() {
      var _this = this
      var myChart = echarts.init(this.$refs["chartsDOM"]);
      // 显示 loading 动画
      myChart.showLoading();
      myChart.on("click", (params) => {

        _this.$emit('visible',{xzqh:params.data.xzqhdm});
      })

      // 再得到数据的基础上，进行地图绘制
        // 得到结果后，关闭动画
        myChart.hideLoading();
        // 注册地图(数据放在axios返回对象的data中哦)

        echarts.registerMap('SD', shandong);
        var options = {
          title: [{
            show: true,
            text: this.titles,

          }],
          tooltip: {
            triggerOn: "mousemove",   //mousemove、click
            padding:8,
            borderWidth:1,
            borderColor:'#409eff',
            backgroundColor:'rgba(255,255,255,0.7)',
            formatter: function (params) {
              return params.name + ':' + '</br>' + "地块数量:" + params.value + '块' + '</br>'+"实际占用总面积:"+params.data.value2.toFixed(2)+"亩"
            },

          },
          visualMap: {
            type: 'continuous',
            orient: 'horizontal',
            itemWidth: 10,
            itemHeight: 80,
            text: ['高', '低'],
            showLabel: true,
            seriesIndex: [0],
            min: 0,
            max: 1500,
            inRange: {
              color: ['#ccdaeb', '#50afe4', '#308ae3'] // 渐变颜色
            },
            textStyle: {
              color: '#7B93A7'
            },
            bottom: 30,
            left: 'left',
          },
          geo: {
            roam: false,
            map: 'SD',

            // 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,
            data: this.resultMapData
          }]
        };
        myChart.clear();
        myChart.setOption(options , true);
        myChart.resize();
        //地图的点击事件
        myChart.on('click', function(params) {
        })

        var option = {
          xAxis: [],
          yAxis: [],
          grid: [],
          series: [],
        };
        echarts.util.each(_this.resultMapData, function(dataItem, idx) {
          debugger
          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'
              }
            },
            z: 100
          });
          option.grid.push({
            id: idx,
            width: 15,
            height: 20,
            left: coord[0]-15,
            top: coord[1] -15,
            z: 100
          });
          option.series.push({
            id: idx,
            type: 'bar',
            xAxisId: idx,
            yAxisId: idx,
            barGap: 0,
            barCategoryGap: 2,
            data: inflationData,
            label: {
              normal: {
                show: true,//开启显示
                position: 'top',//柱形上方
                textStyle: { //数值样式
                  color: '#494848'
                }
              }},
            z: 100,
            itemStyle: {
              normal: {
                color: function(params){
                  // 柱状图每根柱子颜色
                  var colorList = ['#3553d5','#ff0404'];//['#fcae91','#fb6a4a','#cb181d'];
                  return colorList[params.dataIndex];
                }
              }
            }
          });
        })
        myChart.setOption(option);


    },

  }
  // mounted() {
  //   this.getPie()
  // },
}

</script>

<style scoped>

</style>