echarts 4.0.4怎么下载_怎么用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下载，更多示例将会持续更新，欢迎关注。