vue echart地图划分大区

深藏阁楼爱情的钟 2021-07-26 22:08 529阅读 0赞

**首先上图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70][]

引入china.json文件: [https://download.csdn.net/download/liming1016/12487994][https_download.csdn.net_download_liming1016_12487994]

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

![20200602151913195.png][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70]: /images/20210726/5e448e68f05f49dda15418b984a2755e.png
[https_download.csdn.net_download_liming1016_12487994]: https://download.csdn.net/download/liming1016/12487994
[20200602151913195.png]: /images/20210726/140f3492473f484596de605dd44866a2.png