1、获取四川省经纬度数据

2、通过配置regions，实现成都模块高亮

3、本地调试，请求json数据跨域问题。可以通过vscode编译器安装Live Server解决。

<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=map-HK
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/jquery"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>




  <script type="text/javascript">
    $.getJSON('./sichuan.json', function (data) {
      echarts.registerMap('sichuan', data);

      var myChart = echarts.init(document.getElementById('container'));
      myChart.showLoading(
        {
          text: '加载中...',
          color: '#c23531',
          fontSize: '28px',
          textColor: '#000',
          maskColor: 'rgba(255, 255, 255, 0.2)',
          zlevel: 0,
        });

      var scale = 1;
      //特定地方高亮data  regionsData
      var select_ed = ["成都市"]
      var regionsData = []
      for (var i = 0; i < select_ed.length; i++) {
        //这个地方是关键,通过设置regions,可以实现特定省份实现高亮
        var obj = {
          name: '',
          label:
          {
            normal:
            {
              show: true,
              fontSize: 12 * scale,
              color: "#db2424"
            }
          },
          itemStyle:
          {
            normal:
            {
              areaColor: '#f8a400',
            }
          }
        }
        obj.name = select_ed[i]
        regionsData.push(obj)
      }
      var option =
      {
        geo: {
          map: 'sichuan', // 地区名
          roam: true,//平移或缩放
          label: {
            normal: {
              show: true,
              color: 'rgba(255, 255, 255, 0.5)'
            },
            emphasis: {
              color: '#fff'
            }
          },
          itemStyle: {

            normal: {
              areaColor: '#226DA4',
              borderColor: 'rgba(255, 255, 255, 0.5)',
            },
            emphasis: {
              areaColor: '#f8a400'
            }
          },
          regions: regionsData //对不同的区块进行着色
        }
      };

      myChart.hideLoading();
      myChart.setOption(option, true);
      myChart.resize();
    })
  </script>
</body>

</html>

# echarts # 前端 # javascript
Logo
成都城市开发者社区

欢迎大家加入成都城市开发者社区，“和我在成都的街头走一走”，让我们一起携手，汇聚IT技术潮流，共建社区文明生态！

更多推荐

cover

我在大理写代码

avatar 成都城市开发者社区
cover

java-springboot四川特色小吃管理系统 基于SpringBoot的川味小吃数字化运营平台 Java技术栈下的蜀地特色小食资源整合系统计算机毕业设计

avatar 成都城市开发者社区
cover

程序人生：那些年我修炼过的武功秘籍

avatar 成都城市开发者社区