ECharts 实现立体地图 + 散点图在地图中分布

nknmn_

已于 2023-05-06 15:18:57 修改

阅读量503

点赞数

文章标签： echarts javascript ecmascript

于 2023-05-04 17:02:31 首次发布

本文链接：https://blog.csdn.net/qq_50829019/article/details/130490746

版权

该代码示例展示了如何使用Echarts5.3.3版本结合geoJSON数据渲染北京地图，并添加多层地图效果。同时，创建了一个散点图，以朝阳区和密云区为例，通过散点大小表示数据值，提供了一种动态的数据展示方式。

摘要由CSDN通过智能技术生成

<body>
    <div id="main" style="height: 400px; width: 600px"></div>

    <script src="./echarts-5.3.3.js"></script>
    <script src="./geojson/bj_geojson.js"></script>

    <script>
      echarts.registerMap("北京", { geoJSON: beijing_geojson });

      var myChart = echarts.init(document.getElementById("main"), null, {
          renderer: 'svg'
      });

      var option = {
        geo: [
          {
            type: 'map',
            map: '北京',
            top: 20,
            label: {
              show: true
            },
            emphasis: {
              itemStyle: {
                areaColor: "#4499d0",
              },
              label: {
                color: "white",
              },
            },
            zlevel: 4,
              itemStyle: {
                color: 'blue', 
                borderWidth: '1', 
                borderColor: 'white', 
              },
          },
          {
            map: '北京',
            top: 21,
            zlevel: 3,
            itemStyle: {
              borderWidth: '1', 
              borderColor: 'blue', 
            },
            silent: true
          },
          {
            map: '北京',
            top: 24,
            zlevel: 2,
            itemStyle: {
              borderWidth: '4',
              borderColor: 'lightblue', 
            },
            silent: true
          },
          {
            map: '北京',
            top: 26 ,
            zlevel: 1,
            itemStyle: {
              borderWidth: '1', 
              borderColor: 'yellow', 
            },
            silent: true
          },
        ],

        series: [
          {
            name: "散点图",
            type: "effectScatter",
            geoIndex: 0, // geo 支持数组，默认是 0
            coordinateSystem: "geo", // 使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
            label: {
              show: true,
              position: [60,-40],
              formatter: function(val) {
                return val.data.name.replace('区','区域')
              }
            },
            labelLine: {
              show: true,
              length2: 110,
              minTurnAngle: 120
            },
            zlevel: 4,
            data: [
              {
                name: "朝阳区",
                value :[116.486409,39.921489, 300]
              },
              {
                name: "密云区",
                value: [116.843352,40.377362, 400]
              }
            ],
            symbolSize: function (val) {
              return val[2] / 100;
            },
            itemStyle: {
              color: "yellow",
              shadowBlur: 10,
              shadowColor: "yellow",
            },
          },
        ],
      };
        
      myChart.setOption(option);
    </script>
</body>