vue 使用echarts地图实现全国地图

代码参考来自 <https://www.cnblogs.com/lude1994/p/12482355.html>

json数据自己收集保存，包含世界坐标、全国坐标及各省份内的坐标

附代码及json数据下载：https://download.csdn.net/download/loa_loa/19339991?spm=1001.2014.3001.5503

 

地图json数据：

http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json

 

1.安装echarts

npm install echarts --save

 

2.在main.js中引入

import echarts from 'echarts';

//引入遇到报错 "export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’

//新版本需要使用该代码引入 ：const echarts = require('echarts');



import 'echarts/map/js/china.js'; //node_modules中 官方依赖已不提供map文件 需要自行导入其中

Vue.prototype.$echarts = echarts

3.在页面中使用：

<div ref="map" style="height:300px;" ></div>

4.将函数写在methods中，然后再mounted中调用

js函数方法：

getmap() {
      // 基于准备好的dom(myEchartPillar)，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.map);
      this.$echarts.registerMap('china',china);

      var mapName = 'china'
      var data = [
        {
          code: "10",
          name: "其他",
          value: 5
        },
        {
          code: "11",
          name: "北京市",
          value: 26
        },
        {
          code: "12",
          name: "天津市",
          value: 1
        },
        {
          code: "13",
          name: "河北省",
          value: 3
        },
        {
          code: "31",
          name: "上海市",
          value: 6
        },
        {
          code: "32",
          name: "江苏省",
          value: 8
        },
        {
          code: "33",
          name: "浙江省",
          value: 3
        },
        {
          code: "34",
          name: "安徽省",
          value: 2
        },
        {
          code: "35",
          name: "福建省",
          value: 1
        },
        {
          code: "37",
          name: "山东省",
          value: 4
        },
        {
          code: "41",
          name: "河南省",
          value: 3
        },
        {
          code: "42",
          name: "湖北省",
          value: 3
        },
        {
          code: "44",
          name: "广东省",
          value: 25
        },
        {
          code: "61",
          name: "陕西省",
          value: 3
        }
      ];
      var geoCoordMap = {};
      var toolTipData= [
        {
          code: "10",
          name: "其他",
          value: 5
        },
        {
          code: "11",
          name: "北京市",
          value: 26
        },
        {
          code: "12",
          name: "天津市",
          value: 1
        },
        {
          code: "13",
          name: "河北省",
          value: 3
        },
        {
          code: "31",
          name: "上海市",
          value: 6
        },
        {
          code: "32",
          name: "江苏省",
          value: 8
        },
        {
          code: "33",
          name: "浙江省",
          value: 3
        },
        {
          code: "34",
          name: "安徽省",
          value: 2
        },
        {
          code: "35",
          name: "福建省",
          value: 1
        },
        {
          code: "37",
          name: "山东省",
          value: 4
        },
        {
          code: "41",
          name: "河南省",
          value: 3
        },
        {
          code: "42",
          name: "湖北省",
          value: 3
        },
        {
          code: "44",
          name: "广东省",
          value: 25
        },
        {
          code: "61",
          name: "陕西省",
          value: 3
        }
      ];
      /*获取地图数据*/
      myChart.showLoading();
      var mapFeatures = this.$echarts.getMap(mapName).geoJson.features;
      myChart.hideLoading();
      mapFeatures.forEach(function(v) {
        // 地区名称
        var name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp;

      });
      var max = 480,
        min = 9; // todo
      var maxSize4Pin = 100,
        minSize4Pin = 20;

      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;
      };

//指定图表的配置项和数据，绘制图表
      myChart.setOption({

        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            var toolTiphtml = ''
            if (typeof(params.value)[2] == "undefined") {

              for (let i = 0; i < toolTipData.length; i++) {
                if (params.name == toolTipData[i].name) {
                  toolTiphtml += toolTipData[i].name + '：'+toolTipData[i].value
                }
              }
              console.log(toolTiphtml)
              // console.log(convertData(data))
              return toolTiphtml;
            } else {
              for (let i = 0; i < toolTipData.length; i++) {
                if (params.name == toolTipData[i].name) {
                  toolTiphtml += toolTipData[i].name + '：'+toolTipData[i].value
                }
              }
              console.log(toolTiphtml)
              // console.log(convertData(data))
              return toolTiphtml;
            }
          }
        },
        // legend: {
        //     orient: 'vertical',
        //     y: 'bottom',
        //     x: 'right',
        //     data: ['credit_pm2.5'],
        //     textStyle: {
        //         color: '#fff'
        //     }
        // },
        visualMap: {
          show: true,
          min: 0,
          max: 25,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {

            color: ['#83c5ff', '#c6eb68'] // 蓝绿


          }
        },

        geo: {
          show: true,
          map: mapName,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false,
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#f8f8f8',
              borderColor: '#3B5077',
            },
            emphasis: {
              areaColor: '#2B91B7',
            }
          }
        },
        series: [{
          name: '散点',
          type: 'scatter',
          coordinateSystem: 'geo',
          data: convertData(data),
          symbolSize: function(val) {
            return val[2] / 10;
          },
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: true
            },
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: '#05C3F9'
            }
          }
        },
          {
            type: 'map',
            map: mapName,
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#3B5077',
              },
              emphasis: {
                areaColor: '#2B91B7'
              }
            },
            animation: false,
            data: data
          },
          {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin', //气泡
            symbolSize: function(val) {
              var a = (maxSize4Pin - minSize4Pin) / (max - min);
              var b = minSize4Pin - a * min;
              b = maxSize4Pin - a * max;
              return a * val[2] + b;
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 9,
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#9c0a16', //标志颜色
              }
            },
            zlevel: 6,
            data: convertData(data),
          },
          {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data.sort(function(a, b) {
              return b.value - a.value;
            }).slice(0, 5)),
            symbolSize: function(val) {
              return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: 'yellow',
                shadowBlur: 10,
                shadowColor: 'yellow'
              }
            },
            zlevel: 1
          },

        ]
      });

      //解决自适应
      setTimeout(function() {
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }, 500);

    }

调用：

this.getmap();

 

5.效果图