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

原创

已于 2025-01-21 10:45:24 修改 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript

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

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

先看效果图

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

<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: '湖北',