散点（气泡）图

涟漪特效散点图。
html
<!doctype html>
<html lang="zh-Hans">
  <head>
    <title>散点（气泡）图</title>
    <meta property="og:description" content="涟漪特效散点图。" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
    <script src="https://unpkg.com/echarts"></script>
    <script src="https://unpkg.com/@naivemap/maplibre-gl-echarts-layer"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #map {
        height: 400px;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      const map = new maplibregl.Map({
        container: 'map',
        style: 'https://www.naivemap.com/demotiles/style.json',
        bounds: [
          [105.289838, 32.204171],
          [110.195632, 28.164713]
        ],
        fitBoundsOptions: {
          padding: { top: 10, bottom: 10, left: 10, right: 10 }
        }
      })
      map.on('load', () => {
        const data = [
          { name: '涪陵区', value: [107.384728, 29.705364, 15] },
          { name: '渝中区', value: [106.565204, 29.555761, 20] },
          { name: '沙坪坝区', value: [106.452283, 29.543723, 24] },
          { name: '南岸区', value: [106.641061, 29.503544, 17] },
          { name: '北碚区', value: [106.391793, 29.807495, 12] },
          { name: '綦江区', value: [106.64761, 29.031223, 10] },
          { name: '大足区', value: [105.71809, 29.709322, 12] },
          { name: '渝北区', value: [106.627442, 29.720893, 12] },
          { name: '巴南区', value: [106.53688, 29.405196, 12] },
          { name: '黔江区', value: [108.766614, 29.536555, 12] },
          { name: '长寿区', value: [107.076865, 29.860372, 12] },
          { name: '江津区', value: [106.255498, 29.292994, 15] },
          { name: '合川区', value: [106.272908, 29.975394, 18] },
          { name: '永川区', value: [105.923646, 29.359118, 5] },
          { name: '南川区', value: [107.094714, 29.160315, 16] },
          { name: '璧山区', value: [106.223599, 29.594697, 5] },
          { name: '铜梁区', value: [106.052475, 29.84725, 13] },
          { name: '潼南区', value: [105.836863, 30.194192, 5] },
          { name: '荣昌区', value: [105.590602, 29.407506, 15] },
          { name: '开州区', value: [108.388356, 31.163047, 16] },
          { name: '梁平区', value: [107.76527, 30.656713, 10] },
          { name: '城口县', value: [108.660037, 31.949894, 12] },
          { name: '丰都县', value: [107.726387, 29.866134, 10] },
          { name: '垫江县', value: [107.328478, 30.329991, 10] },
          { name: '忠县', value: [108.033505, 30.302183, 10] },
          { name: '云阳县', value: [108.692762, 30.932934, 10] },
          { name: '万州区', value: [108.403998, 30.809981, 10] },
          { name: '奉节县', value: [109.459151, 31.020697, 10] },
          { name: '巫山县', value: [109.874449, 31.077103, 10] },
          { name: '巫溪县', value: [109.565328, 31.400913, 10] },
          { name: '石柱土家族自治县', value: [108.109488, 30.002104, 10] },
          { name: '秀山土家族苗族自治县', value: [109.002577, 28.451425, 10] },
          { name: '酉阳土家族苗族自治县', value: [108.763496, 28.844468, 5] },
          { name: '彭水苗族土家族自治县', value: [108.161257, 29.297059, 5] },
          { name: '万盛区', value: [106.934677, 28.971242, 2] },
          { name: '武隆区', value: [107.755067, 29.32831, 5] }
        ]
        const option = {
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: 'Apple',
              type: 'scatter',
              data: data,
              symbolSize: (val) => {
                return val[2]
              },
              encode: {
                value: 2
              },
              label: {
                formatter: '{b}',
                position: 'right'
              },
              emphasis: {
                label: {
                  show: false
                }
              }
            },
            {
              name: 'Top 5',
              type: 'effectScatter',
              data: data
                .sort((a, b) => {
                  return b.value[2] - a.value[2]
                })
                .slice(0, 6),
              symbolSize: (val) => {
                return val[2]
              },
              encode: {
                value: 2
              },
              rippleEffect: {
                brushType: 'stroke'
              },
              label: {
                formatter: '{b}',
                position: 'right'
              },
              emphasis: {
                scale: true,
                label: {
                  show: true
                }
              },
              itemStyle: {
                shadowBlur: 10,
                shadowColor: '#333'
              }
            }
          ]
        }

        const layer = new EChartsLayer('echarts-layer', option)
        map.addLayer(layer)
      })
    </script>
  </body>
</html>
散点（气泡）图 ​

散点（气泡）图
