Echarts一张图展示省市区三级区域，无需点击层级查看

Warsen Liu

已于 2025-01-21 10:45:24 修改

阅读量1.2k

点赞数 2

分类专栏： Echarts地图文章标签： echarts javascript

于 2021-09-14 09:20:52 首次发布

本文链接：https://blog.csdn.net/Junyaxx/article/details/120279700

版权

Echarts地图专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Echarts一次性展示省市区三级区域，无需逐级点击。通过在features数组中加入所有区域对象，包括市级和区县级，解决Echarts不自动处理层级的问题。注意对象顺序，避免被上级区域遮挡，可以调整透明度或JSON顺序。示例代码中导入了包含所有区域信息的JSON文件，并提供了地图选择器的相关资源。

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

先看效果图

可以看出，图例中不仅展示了湖北省所有市的区域范围，而且随州市的三个行政区划也显示在其中，上完整代码

<template>
  <div>
    <div id="allMap" style="width: 1000px; height: 800px"></div>
  </div>
</template>

<script>
import AllJson from '@/assets/json/All.json'; // 此json下面会具体讲
import * as echarts from 'echarts';
export default {
  name: 'Demo',
  data() {
    return {

    }
  },
  mounted() {
    this.allMap();
  },
  methods: {
    allMap() {
      console.log("412")
      var option = {
        backgroundColor: "#041646",
        title: {
          show: true,
          text: "湖北省",
          top: '10',
          textStyle: {
            color: 'white'
          },
          left: "center"
        },
        series: [
          {
            type: "map", //特效散点图
            mapType: '湖北',
            nameProperty: 'name',
            label: {
              show: true
            },
            geoIndex: 0,
            data: [
              {
                name: '随州市',
                label: {
                  position: 'top',
                  color: 'red',
                  fontWeight: 'bold',
                  fontSize: '16'
                },
                itemStyle: {
                  borderColor: 'red',
                  borderWidth: '2',
                }
              },
            ],
            nameMap: {
              '十堰市': '十堰市',
              '神农架林区': '神农架',
              '恩施土家族苗族自治州': '恩施州',
              '宜昌市': '宜昌市',
              '襄阳市': '襄阳市',
              '荆门市': '荆门市',
              '荆州市': '荆州市',
              '潜江市': '潜江市',
              '天门市': '天门市',
              '仙桃市': '仙桃市',
              '随州市': '随州市',
              '孝感市': '孝感市',
              '咸宁市': '咸宁市',
              '武汉市': '武汉市',
              '黄冈市': '黄冈市',
              '黄石市': '黄石市',
              '鄂州市': '鄂州市'
            },

          }
        ]
      }

      var mapChart = echarts.init(document.getElementById("allMap"));
      echarts.registerMap('湖北', AllJson);

      mapChart.setOption(option);
    },
  }
}
</script>

import AllJson from '@/assets/json/All.json';