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