怎么用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 下载，更多示例将会继续更新，欢送关注。