vue3项目中使用echarts实现中国地图大区任意分区

一起学习吧吧

已于 2024-06-26 14:22:50 修改

阅读量1.3k

点赞数 12

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

于 2024-03-25 09:00:00 首次发布

本文链接：https://blog.youkuaiyun.com/qq_46673413/article/details/136969294

文章介绍了如何在ECharts中加载中国地图并进行大区划分，通过修改地图json文件，将省份合并为特定的大区，展示了从基础地图展示到大区定制化的详细步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终效果：

背景：项目需要在中国地图上显示各大区的库存情况，使用echarts将下载的中国地图挂载后，好家伙，全是一块块的省份，再定睛一看，我这项目需求的大区咋只有6个，好好好，看来得探索一波如何将各省份自定义为大区了。

1. echarts、中国地图json文件下载

echarts下载：

npm install echarts

中国地图json码文件下载

想要显示地图，这个文件很必要。下载地址：DataV.GeoAtlas地理小工具系列 (aliyun.com)

2. 实现基本地图展示

在.vue文件中引用echarts、中国地图json文件：

import * as echarts from 'echarts';
import chinaJson from "@/assets/json/china.json"

注：

1、这里echarts是全部引用，最好按需引用；

2、这里json名是改过的

html代码：

<div id="myChart" style="width:100%;height:calc(100% - 30px)"></div>

js代码：

  onMounted(() => {
    myChart= echarts.init(document.getElementById('myChart'))
    window.onresize = function(){
      // 图形随窗口变化而变化
      myChart.resize();
    }
  })

  const initMyChartt = (mychart) => {
    let dataList = [
      {name: '湖北省', value: 732},
      {name: '贵州省', value: 666},
      {name: '广东省', value: 333},
      {name: '广西壮族自治区', value: 123},
      {name: '湖南省', value: 50},
      {name: '四川省', value: 0}
    ]
    let option = {
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          return params.name+':'+params.value;//自行定义formatter格式
        }
      },
      visualMap: {
        show: false,
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'],//取值范围的文字
        inRange: {
          color: ['#79bbff', '#c45656', '#FD665F']
        },
      },
      geo: {
        map: 'china',
        roam: true,//不开启缩放和平移
        zoom: 1.23,//视角缩放比例
        scaleLimit:{min:1,max:3}, // 缩放级别
        zoom: 1.23,//视角缩放比例
        regions: [
          {
            name: "南海诸岛",
            value: 0,
            itemStyle: {
              opacity: 0, // 不绘制
            },
            label: {
              show: false // 不显示文字
            }
          }
        ],
        label: {
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)', // 大区文本颜色
          
        },
        itemStyle: {
          // borderWidth: 0,
          // borderColor: 'rgba(0, 0, 0, 0.2)', // 边界框线颜色 
          
        },
        emphasis: {
          label: {
            color: '#fff' 
          },
          itemStyle: {
            areaColor: '#337ecc',//鼠标选择区域颜色
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          }  
        }
      },
      series: [
        {
          name: '中国地图',
          type: 'map',
          geoIndex: 0,
          data: dataList
        }
      ] 
    }
    echarts.registerMap('china', { geoJSON: chinaJson });
    mychart.setOption(option, true);
  }

效果如下图：

3. 大区划分

呃呃，接下来就是大区划分了，也就是将某些省份合成一个大区，怎么合？要合什么地方？害怕！！

不行，为了项目（为了活下去），我们打开地图json码来分析一下，相信答案就在里面嘻嘻嘻。

下载下来的地图json:

里面包含了两个属性，其中“features”属性里面是个数组，里面是34个对象。好这下明白了，这不就是34个省份？!，把这些省份合成需要的大区就好了。

通过观察，保持原有的数据结构不变，将features.properties.name改成大区名，将归属改大区的省份的features.geometry.coordinates合并为一个，最后将修改后的地图挂载在echart上就能得到想要的省份合并大区了。

修改中国地图json文件代码：

  import chinaJson from "@/assets/json/chinaLand.json"
  // 将省份合并成大区
  const mergeProvinces = (features, province, region) => {//合并大区里省份的coordinates
    let newFeatures = [];
    if(features[0].properties.name.indexOf('大区')!==-1) {
      return
    }
    for(let i = 0; i < province.length; i++) {
      for(let j = 0; j < province[i].length; j++) {
        for(let k = 0; k < features.length; k++) {
          if(features[k].properties.name == province[i][j]) {
            if(newFeatures[i]) {
              if(features[k].properties.name == '内蒙古自治区') {
                features[k].geometry.coordinates = [features[k].geometry.coordinates]
              }
              newFeatures[i].geometry.coordinates.push(...features[k].geometry.coordinates)
            }else {
              newFeatures.push(features[k])
              newFeatures[i].properties.name = region[i]
            }
            break
          }
        }
      }
    }
    chinaJson.features = newFeatures;
  };
  // 按照需要设定大区分区，province中元素内容为region中各大区所包含的省份，需要对应好
  const provinceAndregion = {
      province: [//把各个大区的省份用二维数组分开
        ["黑龙江省", "吉林省",  "辽宁省", '北京市', '天津市', '河北省'],
        [ '湖北省', '上海市', '江苏省', '安徽省', '浙江省'],
        ["河南省", '山东省'],
        ['湖南省', '重庆市', '四川省', '云南省', '西藏自治区', '贵州省'],
        ['陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区','山西省',"内蒙古自治区"],
        ['广东省', '广西壮族自治区', '福建省', '海南省', '江西省', '香港特别行政区', '澳门特别行政区', '台湾省'],
      ],
      region: ['东北大区', '华东大区', '华中大区', '西南大区', '西北大区', '华南大区'],
  };

  // 调用
  mergeProvinces(chinaJson.features, provinceAndregion.province, provinceAndregion.region);

最终实现分区js代码（全部）：

  onMounted(() => {
    myChart= echarts.init(document.getElementById('myChart'))
    window.onresize = function(){
      // 图形随窗口变化而变化
      myChart.resize();
    }
  })
  // 将省份合并成大区
  const mergeProvinces = (features, province, region) => {//合并大区里省份的coordinates
    let newFeatures = [];
    if(features[0].properties.name.indexOf('大区')!==-1) {
      return
    }
    for(let i = 0; i < province.length; i++) {
      for(let j = 0; j < province[i].length; j++) {
        for(let k = 0; k < features.length; k++) {
          if(features[k].properties.name == province[i][j]) {
            if(newFeatures[i]) {
              if(features[k].properties.name == '内蒙古自治区') {
                features[k].geometry.coordinates = [features[k].geometry.coordinates]
              }
              newFeatures[i].geometry.coordinates.push(...features[k].geometry.coordinates)
            }else {
              newFeatures.push(features[k])
              newFeatures[i].properties.name = region[i]
            }
            break
          }
        }
      }
    }
    chinaJson.features = newFeatures;
  };
  const initMyChartt = (mychart) => {
   const provinceAndregion = {
      province: [//把各个大区的省份用二维数组分开
        ["黑龙江省", "吉林省",  "辽宁省", '北京市', '天津市', '河北省'],
        [ '湖北省', '上海市', '江苏省', '安徽省', '浙江省'],
        ["河南省", '山东省'],
        ['湖南省', '重庆市', '四川省', '云南省', '西藏自治区', '贵州省'],
        ['陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区','山西省',"内蒙古自治区"],
        ['广东省', '广西壮族自治区', '福建省', '海南省', '江西省', '香港特别行政区', '澳门特别行政区', '台湾省'],
      ],
      region: ['东北大区', '华东大区', '华中大区', '西南大区', '西北大区', '华南大区'],
    };
    mergeProvinces(chinaJson.features, provinceAndregion.province, provinceAndregion.region);
    let dataList = [
      {name: '西北大区', value: 732},
      {name: '华南大区', value: 666},
      {name: '东北大区', value: 333},
      {name: '西南大区', value: 123},
      {name: '华东大区', value: 50},
      {name: '华中大区', value: 0}
    ]
    let option = {
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          return params.name+':'+params.value;//自行定义formatter格式
        }
      },
      visualMap: {
        show: false,
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'],//取值范围的文字
        inRange: {
          color: ['#79bbff', '#c45656', '#FD665F']
        },
      },
      geo: {
        map: 'china',
        roam: true,//不开启缩放和平移
        zoom: 1.23,//视角缩放比例
        scaleLimit:{min:1,max:3}, // 缩放级别
        zoom: 1.23,//视角缩放比例
        regions: [
          {
            name: "南海诸岛",
            value: 0,
            itemStyle: {
              opacity: 0, // 不绘制
            },
            label: {
              show: false // 不显示文字
            }
          }
        ],
        label: {
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)', // 大区文本颜色
          
        },
        itemStyle: {
          borderWidth: 0,
          // borderColor: 'rgba(0, 0, 0, 0.2)', // 边界框线颜色 
          
        },
        emphasis: {
          label: {
            color: '#fff' 
          },
          itemStyle: {
            areaColor: '#337ecc',//鼠标选择区域颜色
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          }  
        }
      },
      series: [
        {
          name: '中国地图',
          type: 'map',
          geoIndex: 0,
          data: dataList
        }
      ] 
    }
    echarts.registerMap('china', { geoJSON: chinaJson });
    mychart.setOption(option, true);
  }

最终效果：