vue echart地图划分大区_vue实现echarts的全国地图点击某个区域地图切换到这个区域的地图

首先上图：

引入china.json文件: https://download.csdn.net/download/liming1016/12487994

首先要通过npm安装echart，.vue文件同目录引入china.json

<template>
  <div class="app-container">
    <div class="chart-wrapper">
      <div id="chinaMap" style="width: 100%;height: 500px"></div>
    </div>
  </div>
</template>
<script>
  import  'echarts/map/js/china.js'
  import echarts from 'echarts'
  import chinaJson from './china.json' // 这个是json引用
  export default {
    name: '',
    data () {
      return {
        chinaMapData: [
          {name: '东北', value: this.randomValue()},
          {name: '华北', value: this.randomValue()},
          {name: '西北', value: this.randomValue()},
          {name: '西南', value: this.randomValue()},
          {name: '华中', value: this.randomValue()},
          {name: '华南', value: this.randomValue()},
          {name: '华东', value: this.randomValue()}
        ],
        chinaDaquGeo: {}
      }
    },
    methods:{
      progressFormat(percentage){
        return ""
      },
      randomValue() {
        return Math.round(Math.random()*1000);
      },
      drawChinaMap(id){
        this.mapCharts = echarts.init(document.getElementById(id));
        var option = {
          tooltip: {
            formatter:function(params,ticket, callback){
              return params.seriesName+'<br />'+params.name+'：'+params.value
            }//数据格式化
          },
          visualMap: {
            min: 0,
            max: 1500,
            left: 'left',
            top: 'bottom',
            type:"piecewise",
            //text: ['高','低'],//取值范围的文字
            inRange: {
              color: ['#e0ffff', '#006edd']//取值范围的颜色
            },
            show:true//图注
          },
          geo: {
            map: 'china',
            roam: true,//不开启缩放和平移
            zoom: 1,//视角缩放比例
            center: [108.5525, 34.3227],
            label: {
              normal: {
                show: true,
                fontSize:'10',
                color: 'rgba(0,0,0,0.7)'
              }
            },
            itemStyle: {
              normal:{
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis:{
                areaColor: '#F3B329',//鼠标选择区域颜色
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series : [
            {
              name: '事业部',
              type: 'map',
              geoIndex: 0,
              data:this.chinaMapData
            }
          ]
        };
        this.mapCharts.setOption(option);
        /*this.mapCharts.on('click', function (params) {
          alert(params.name);
        });*/
      },
      //划分大区
      mergeProvinces(chinaJson, names, properties) {//合并大区里省份的coordinates
        var features = chinaJson.features;
        var polygons = [];
        for (var i = 0; i < names.length; i++) {
          var polygonsCoordinates = [];
          for (var z = 0; z < names[i].length; z++) {
            for (var j = 0; j < features.length; j++) {
              if (features[j].properties.name == names[i][z]) {
                if (features[j].geometry.coordinates[0].constructor == String) {//合并coordinates
                  for (var l = 0; l < features[j].geometry.coordinates.length; l++) {
                    polygonsCoordinates.push(features[j].geometry.coordinates[l]);
                  }
 
                } else if (features[j].geometry.coordinates[0].constructor == Array) {
                  for (var k = 0; k < features[j].geometry.coordinates.length; k++) {
                    for (var d = 0; d < features[j].geometry.coordinates[k].length; d++) {
                      polygonsCoordinates.push(features[j].geometry.coordinates[k][d]);
                    }
                  }
                }
                break;
              }
            }
          }
          polygons.push(polygonsCoordinates);
        }
 
        // 构建新的合并区域
        var features = [];
 
        for(var a = 0;a<names.length;a++){
          var feature = {
            id: features.length.toString(),
            type: "FeatureCollection",
            geometry: {
              type: "Polygon",
              coordinates: polygons[a]
            },
            properties: {
              name: properties.name[a] || "",
              childNum:polygons[a].length
            }
          };
          if(properties.cp[a]) {
            feature.properties.cp = properties.cp[a];
          }
 
          // 将新的合并区域添加到地图中
          features.push(feature);
        }
        this.chinaDaquGeo.type = "FeatureCollection";
        this.chinaDaquGeo.features = features;
      },
 
      repRegionStrategy(){
        var params = {
          names: [//把各个大区的省份用二维数组分开
            ['北京','天津','河北','山西','内蒙古'],
            ["黑龙江","吉林","辽宁"],
            ['山东','江苏','安徽','江西','浙江','福建','上海','台湾'],
            ['河南','湖北','湖南'],
            ['广东','广西','海南','香港','澳门'],
            ['重庆','四川','云南','西藏','贵州'],
            ['陕西','甘肃','青海','宁夏','新疆']
          ],
          properties: {//自定义大区的名字，要和上面的大区省份一一对应
            name: ['华北','东北','华东','华中','华南','西南','西北'],
            cp: [//经纬度可以自己随意定义
              [116.24,39.54],
              [126.32,43.50],
              [121.28,31.13],
              [114.20,30.32],
              [113.15,23.08],
              [104.04,30.39],
              [103.49,36.03]
            ]
          }
        };
        this.mergeProvinces(chinaJson, params.names, params.properties);
      }
    },
    //调用
    created() {
      this.repRegionStrategy()
      // 注册地图
      this.echarts.registerMap('china', this.chinaDaquGeo) // 如果是js引入就不需要这一行了
    },
    mounted(){
      this.$nextTick(function() {
        this.drawChinaMap('chinaMap')
      })
    }
  }
</script>
<style>
 
</style>