怎麼用ECharts繪製帶排名的柱狀圖以及在ECharts地圖上繪製氣泡散點圖、帶漣漪動畫的散點圖？

最近要用ECharts作一個圖，要求是右邊用柱狀圖根據數量排名展現，左邊是地圖，不一樣省份區域根據數量不一樣，顏色深淺不一樣，數量越多顏色越深。排名前五的省份須要帶漣漪動畫的散點圖，用氣泡散點圖顯示各個省份數量，另外就是省份須要用拼音顯示。因而站在前人的肩膀上順便作了個ECharts地圖的綜合示例，見上圖。

帶排名的柱狀圖主要是要用到富文本標籤rich屬性，另外就是必定要引入地圖數據china.js文件。直接看代碼吧，加了些必要的註釋，代碼有點長，只貼了一部分，完整示例請到GitHub倉庫下載。

1. 代碼怎麼寫？

series: [
        // 散點圖, 藍色的點
        {
          name: '散點圖',
          type: 'scatter',
          coordinateSystem: 'geo',
          data: convertData(data),
          symbolSize: function (val) {
            return val[2] / 100;
          },
          label: {
            normal: {
              formatter: function (obj) {
                let name = transferProvinceName(obj.name);
                return name || '';
              },
              position: 'right',
              show: true
            },
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: '#4444FF'
            }
          }
        },
        // 地圖
        {
          type: 'map',
          map: mapName,
          geoIndex: 0,
          aspectScale: 0.75, // 地圖長寬比
          showLegendSymbol: false,
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: false,
              textStyle: {
                color: '#fff'
              }
            }
          },
          roam: true,
          animation: false,
          data: data
        },
        // 氣泡散點圖，紅色氣泡
        {
          name: '氣泡散點圖',
          type: 'scatter',
          coordinateSystem: 'geo',
          // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
          symbol: 'pin', //氣泡
          symbolSize: function (val) {
            // 根據value值，設置symbol大小，根據實際狀況本身調整
            if (val[2] === 0) {
              return 0;
            }
            var a = (maxSize4Pin - minSize4Pin) / (max - min);
            var b = maxSize4Pin - a * max;
            return a * val[2] + b * 1.2;
          },
          label: {
            normal: {
              show: true,
              formatter: function (obj) {
                return obj.data.value[2];
              },
              textStyle: {
                color: '#fff',
                fontSize: 9,
              }
            }
          },
          itemStyle: {
            normal: {
              // 氣泡顏色
              color: '#F62157', 
            }
          },
          zlevel: 6,
          data: convertData(data),
        },
        // 前五名，帶有漣漪特效動畫的散點（氣泡）圖，黃色
        {
          name: 'Top 5',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: convertData(data.sort(function (a, b) {
            return b.value - a.value;
          }).slice(0, 5)),
          symbolSize: function (val) {
            return val[2] / 120;
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: function (obj) {
                let name = transferProvinceName(obj.name);
                return name || '';
              },
              position: 'right',
              show: false
            }
          },
          itemStyle: {
            normal: {
              color: 'yellow',
              shadowBlur: 10,
              shadowColor: 'yellow'
            }
          },
          zlevel: 1
        },
        // 柱狀圖
        {
          name: '柱狀圖',
          type: 'bar',
          roam: false,
          visualMap: false,
          barMaxWidth: 20,
          zlevel: 2,
          barGap: 0,
          itemStyle: {
            normal: {
              // 柱狀圖，漸變色
              color: function (params) {
                var colorList = [{
                  colorStops: [{
                    offset: 0,
                    color: '#f0515e'
                  }, {
                    offset: 1,
                    color: '#ef8554'
                  }]
                },
                {
                  colorStops: [{
                    offset: 0,
                    color: '#3c38e4'
                  }, {
                    offset: 1,
                    color: '#24a5cd'
                  }]
                }
                ];
                if (params.dataIndex < 3) {
                  return colorList[0]
                } else {
                  return colorList[1]
                }
              },
            },
            // 柱狀圖hover顏色
            emphasis: {
                color: "#f0515e"
            },
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              textBorderWidth: 0
            }
          },
          data: barData
        }
      ]

2. 示例代碼下載

能夠複製以上代碼運行查看使用效果，也能夠到GitHub: https://github.com/Jackyyans/code123下載，更多示例將會持續更新，歡迎關注。