园龄：4年11个月粉丝：36 关注：8

【前端可视化】ECharts中国地图+散点图demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="main" style="height: 400px"></div>
    <script src="../libs/echarts-5.3.3.js"></script>
    <!-- 
    1.导入了一个中国的 geo json
    window.china_geojson = {}
  -->
    <script src="./geojson/china_geojson.js"></script>
    <script>
      window.onload = function () {
        let mapName = '中国';
        // 2.注册一下中国地图的 geo json ( 需要在setOption之前调用 )
        echarts.registerMap(mapName, { geoJSON: china_geojson });

        let myChart = echarts.init(document.getElementById('main'));

        var data = [
          { name: '北京', value: 199 },
          { name: '天津', value: 42 },
          { name: '河北', value: 102 },
          { name: '山西', value: 81 },
          { name: '内蒙古', value: 47 },
          { name: '辽宁', value: 67 },
          { name: '吉林', value: 82 },
          { name: '黑龙江', value: 123 },
          { name: '上海', value: 154 },
          { name: '江苏', value: 102 },
          { name: '浙江', value: 114 },
          { name: '安徽', value: 109 },
          { name: '福建', value: 116 },
          { name: '江西', value: 91 },
          { name: '山东', value: 119 },
          { name: '河南', value: 137 },
          { name: '湖北', value: 116 },
          { name: '湖南', value: 114 },
          { name: '重庆', value: 101 },
          { name: '四川', value: 125 },
          { name: '贵州', value: 62 },
          { name: '云南', value: 83 },
          { name: '西藏', value: 9 },
          { name: '陕西', value: 80 },
          { name: '甘肃', value: 56 },
          { name: '青海', value: 10 },
          { name: '宁夏', value: 18 },
          { name: '新疆', value: 120 },
          { name: '广东', value: 193 },
          { name: '广西', value: 59 },
          { name: '海南', value: 14 },
        ];

        var geoCoordMap = {};
        /*获取地图数据*/
        myChart.showLoading();
        // console.log(echarts.getMap(mapName));

        // 1.先拿到地图的 geo json 对象
        var mapFeatures = echarts.getMap(mapName).geoJson.features;
        mapFeatures.forEach(function (v) {
          // 地区名称
          var name = v.properties.name;
          // 地区经纬度
          geoCoordMap[name] = v.properties.cp;
        });
        myChart.hideLoading();
        console.log('data=>', data);
        console.log('geoCoordMap=>', geoCoordMap);

        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: [...geoCoord, data[i].value],
              });
            }
          }
          console.log('res=>', res);
          return res;
        };

        // 2.指定图表的配置项和数据
        var option = {
          tooltip: {}, // 提示框

          // visualMap: {  // 视觉映射组件
          //   left: "20%",
          //   seriesIndex: [0],
          //   inRange: {
          //     color: ["#04387b", "#467bc0"], // 蓝绿
          //   },
          // },

          geo: {
            // 注册一个地理坐标系组件( 给散点图用 )
            map: '中国',
            roam: false,
            label: { show: false },
            aspectScale: 0.75, // 缩放地图
            itemStyle: {
              areaColor: '#023677',
              borderColor: '#1180c7',
            },
            emphasis: {
              itemStyle: { areaColor: '#4499d0' },
              label: { color: 'white' },
            },
          },
          series: [
            {
              name: '中国地图',
              type: 'map',
              map: '中国',
              data, // 给地图填充数据

              // 地图样式
              itemStyle: {
                areaColor: '#023677',
                borderColor: '#1180c7',
              },
              emphasis: {
                itemStyle: { areaColor: '#4499d0' },
                label: { color: 'white' },
              },
              select: {
                label: { color: 'white' },
                itemStyle: { areaColor: '#4499d0' },
              },
              // 地图样式
            },

            {
              name: '散点图充电桩',
              type: 'effectScatter',

              // 散点图使用的坐标系: geo定义的坐标系组件
              geoIndex: 0,
              coordinateSystem: 'geo', // 使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。

              data: convertData(data),

              symbolSize: function (val) {
                return val[2] / 10;
              },

              itemStyle: {
                color: 'yellow',
                shadowBlur: 10,
                shadowColor: 'yellow',
              },
              tooltip: {
                show: true,
                trigger: 'item',
                formatter: function (params) {
                  console.log(params);
                  var data = params.data;
                  return `${params.seriesName} <div style="margin:5px 0px;"/> ${data.name} ${data.value[2]}`;
                },
              },
            },
          ],
        };

        myChart.setOption(option);
      };
    </script>
  </body>
</html>