VUE，echart3D地图，自定义信息框

 

<template>

  <div class="chart" ref="nanjingMap"></div>

</template>

<script>

import nanjing from "./nanjing.json";

import echarts from "echarts";

import "echarts-gl";

export default {

  name: "NanjingMap",

  data() {

    return {

        data:[

               {name: '玄武区', value: 543,a:112,b:131,c:333,d:213,f:42,g:13},

               {name: '秦淮区', value: 646,a:132,b:123,c:323,d:211,f:42,g:23},

               {name: '建邺区', value: 564,a:112,b:163,c:343,d:214,f:42,g:33},

               {name: '鼓楼区', value: 586,a:212,b:153,c:133,d:213,f:42,g:43},

               {name: '栖霞区', value: 442,a:112,b:143,c:133,d:211,f:42,g:53},

               {name: '雨花台区', value: 353,a:312,b:313,c:233,d:221,f:42,g:63},

               {name: '江宁区', value: 578,a:121,b:131,c:391,d:213,f:42,g:73},

               {name: '六合区', value: 298,a:122,b:123,c:133,d:211,f:42,g:23},

               {name: '溧水区', value: 268,a:172,b:133,c:323,d:212,f:42,g:33},

               {name: '高淳区', value: 121,a:142,b:183,c:334,d:218,f:42,g:43},

               {name: '浦口区', value: 594,a:122,b:113,c:331,d:201,f:42,g:53},

            ],

    };

  },

  methods: {

    initNanjingMap() {

      let nanjingMapChart = this.$echarts.init(this.$refs.nanjingMap);

      this.$echarts.registerMap("nanjing", nanjing);

      let area = "";

     let option = {

    visualMap: {

            min: 0,

            max: 700,

            left: '10%',

            text: ['高', '低'], // 文本，默认为数值文本

              color: '#f08c2e',

            calculable: true,

                   inRange: {

                color: ['#6de8fa61', '#5470c678', '#061f5570']

            }

        },

          series:[

            {

              type: "map3D",

               map: "nanjing",

                data:this.data,

            

          itemStyle: {

            //areaColor: 'blue',

            //opacity: 3,

            borderWidth: 2,

            borderColor: "rgb(62,215,213)",

            //opacity: 0.48,

          },

             "label": {

                "emphasis": {

                    "show": true,

                     color: "#f7e500", 

                     fontSize: 20,

                },

                "normal": {

                    "show": true,

                     color: "#f7e500", 

                     fontSize: 16,

                }

            }, 

            //"mapType": "nanjing",

            "roam": true,

           // "type": "map",

            

             zoom:1.2,

          }

        

          ],

       viewControl: {

            //用于鼠标的旋转，缩放等视角控制。

            autoRotate: true, //是否开启视角绕物体的自动旋转查看

            distance: 70, //默认视角距离主体的距离，对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。

          },

          tooltip: {

            trigger: 'item',

             backgroundColor:"#186a7891",

             borderRadius: 10,

              padding: [20, 20, 20, 20],

               textStyle: {

                 color:'white',

                align: 'left',

                fontSize: 14

              },

           // formatter: '{b}<br/>主体数量:{c} '

            formatter(params){

           //for(let x in params){

              let p=params.data;

               return p.name+'    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp总计：  '+p.value+"</br></br><Row><Col span='6'>食品餐饮："+p.a+ "</Col><Col span='6' offset='2'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp药品药械："+p.b+ "</Col<Col span='6' offset='2'>&nbsp&nbsp&nbsp&nbsp&nbsp化妆品："+p.c+ "</Col></Row></br></br><Row><Col span='6'>特种设备："+p.d+ "</Col><Col span='6' offset='2'>&nbsp&nbsp&nbsp&nbsp&nbsp医疗器械："+p.f+ "</Col<Col span='6' offset='2'>&nbsp&nbsp&nbsp&nbsp&nbsp其他："+p.g+ "</Col></Row>"

         //  }

            

       }

        },

      };

      nanjingMapChart.getZr().on("click", function (e) {

       console.log(area);

      });

      nanjingMapChart.setOption(option);

    },

    init() {

      const self = this;

      setTimeout(() => {

        window.addEventListener("resize", function () {

          self.nanjingMap = self.$echarts.init(self.$refs.nanjingMap);

          self.nanjingMap.resize();

        });

      }, 10);

    },

 show(a){

console.log(a);

 },

  },

  created() {},

  mounted() {

    this.initNanjingMap();

    this.init();

  },

};

</script>

<style lang="less" scoped>

.chart {

  height: 100%;

  width: 100%;

  // background: url("../../../assets/home-img/JZ.png") -50px;

}

</style>