查看“︁茄”︁的源代码

<html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>饶平方言地图</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    #map {
      width: 100%;
      height: 600px;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <script>
    // 用 fetch 加载你上传的 JSON 文件
    fetch('https://lyuri.top/index.php/文件:饶平方言图.json')
      .then(res => res.json())
      .then(geoJson => {
        // 注册地图
        echarts.registerMap('饶平', geoJson);

        var chart = echarts.init(document.getElementById('map'));

        var option = {
          tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>词汇数: {c}'
          },
          visualMap: {
            min: 0,
            max: 100,
            left: 'right',
            top: 'bottom',
            text: ['高','低'],
            inRange: { color: ['#e0f3f8', '#0868ac'] },
            calculable: true
          },
          series: [{
            type: 'map',
            map: '饶平',
            roam: true,
            label: { show: true },
            data: [
              {name: '汤溪镇', value: 30},
              {name: '东山镇', value: 20},
              {name: '平安镇', value: 50},
              {name: '其他镇', value: 10}
            ]
          }]
        };

        chart.setOption(option);
      })
      .catch(err => console.error('加载 GeoJSON 出错:', err));
  </script>
</body>
</html>