如何魔改 Echarts 实现其没有的气泡图

气泡图的实现

如下图所示，图的大小不一，颜色不同。

antv 有类似的，但是和想要的差距还比较大。echarts 一开始没有发现类似的案例。

一开始我搜索的是散点图。只能看到类似的，但是都是用 D3.js 或者其他方案实现的。因为项目只引入了echarts，所以还是想着用echarts实现比较好点。

这里比较关键的是关键词的搜索，早先见过热力图，热点图，但是都是汉字字母类型，很少有如下图所示的情况。还是产品给的关键词搜索出来的结果比较符合要求，这个有点意外。

翻遍官网的 demo，实际上比较像的只有graph 类型下面的几个案例。

通过隐藏其他无关节点，基本上可以实现所需要的效果。

不多说，贴代码

const option = {
      series: [{
        type: 'graph',
        layout: 'force',
        force: {
          repulsion: 70,
          edgeLength: [10, 40]
        },
        label: {
          show: true,
          formatter: [
            '{b|{b}}'
          ].join('\n'),
          align: 'center',
          verticalAlign: 'center'
        },
        data: data
      }]
    };

//data 如下
data={
      'name': '',名称
      'symbol': 'circle',
      'symbolSize': 26,
      'itemStyle': {
        'normal': { 'color': 'red }
      }
    }

总结：

• 遇到未知问题，合适的搜索关键词很重要

• 思路很关键

• 多看官方文档、API 手册