Echarts气泡图（相邻效果，气泡之间不叠加）

效果图

 借助Echarts中提供的样例完成，官网样例可自行前往

官网链接放下面啦！！

Examples - Apache ECharts

使用版本

 完整代码如下

注意点

一、如何实现的最大的背景图不显示

我这里是加了这个来判断了，大家用数据可以自己改成想要的判断，原则就是一个让对应圆的半径为0即可

（本人不太熟悉D3.js如果有大神知道如何写更好请赐教，研究了一天我真的哭了只能用这种方式了，太菜了）

 下面是注掉红框后的显示效果

 二、圆圈的间距

使用padding括号中的值来改变

 改成 padding(20)(displayRoot)效果图如下

 三、注意使用； 

在d3. 的写法使用中注意分号的作用，不要遗漏以免造成不必要的错误。

四、比较low的一部分数据在外，一部分数据在里

再创建一套数据并且重新设置 renderItem方法renderItem2

然后在renderItem2中修改 textConfig中 position的设置

this.option = {
      dataset: {
        source: seriesData
      },
      tooltip: {},
      hoverLayerThreshold: Infinity,
      series: [{
        type: 'custom',
        colorBy: 'data',
        renderItem: renderItem,
        progressive: 0,
        coordinateSystem: 'none',
        encode: {
          tooltip: 'value',
          itemName: 'id'
        }
      },
        {
          type: 'custom',
          colorBy: 'data',
          renderItem: renderItem2,
          progressive: 0,
          coordinateSystem: 'none',
          encode: {
            tooltip: 'value',
            itemName: 'id'
          }
        }]
    }