功能概述

气泡图是显示变量之间相关性的一种图表，较大的气泡表示较大的值。可以通过气泡的位置分布和大小比例，来分析数据的规律。

ECharts 气泡图插件与内置的气泡图组件不同，它可以通过开放的自定义属性定制出更丰富的视觉效果，下图是部分示例：

示例文件包：可下载后直接导入系统参考查看。

ECharts气泡图示例.zip

添加ECharts气泡图插件

单击可视化插件按钮展开插件列表，然后在 ECharts 插件中将气泡图插件拖拽至编辑区，即可添加一个 ECharts 气泡图插件。

数据绑定

添加图表后，数据绑定面板会自动打开，在数据绑定面板中选择数据集或数据模型。

示例中我们使用的是一个数据集。

将数据集或模型中的字段拖拽到组件的各个绑定区域完成数据绑定，在左侧编辑区可见组件已经按照绑定的字段进行了绘制。

数据处理

ECharts 插件与内置图表类似都可一进行数据处理，如对数据进行聚合运算，修改数据的显示格式和单位等等，使其更符合使用场景的需要。

数据处理详细操作介绍请参考数据处理。

数据探索与分析

ECharts 插件同样支持丰富的数据探索分析能力，可为您的数据可视化分析过程提供强有力的支撑。

比如为组件添加过滤器、排名筛选、切换类型、添加参考线等等。

有关具体操作的介绍，请参考数据探索与分析中对应的介绍。

基本属性外观设置

在编辑区右侧选择属性设置或者双击该图表，打开属性设置面板可进行图表外观属性的设置。

绝大部分的属性设置项目与内置图表一致，请参考单个组件外观与属性设置。本文中主要举例介绍不同的属性设置项。

显示缩放轴

• 显示缩放轴： 开启后将在图表中显示缩放轴。

• 缩放轴尺寸： 设置缩放轴的宽度。

• 缩放轴默认长度： 设置预览图表时缩放轴默认显示的长度，也就决定了默认显示的数据数量。

• 缩放轴颜色： 设置缩放轴的颜色。

• 启用滚动缩放： 是否开启鼠标滚轮控制缩放轴功能。开启后，预览图表时无需拖动缩放轴，使用鼠标滚动即可进行缩放。

• 方向： 显示哪个方向的缩放轴。可选X轴，Y轴或者全部显示。

提示标签坐标轴指示器

用于开启鼠标提示时对应的坐标数据和指示线，开启后可进一步设置指示器类型、直线类型/颜色/宽度。

自定义属性

ECharts 插件与普通内置图表最大的不同点是可以自定义属性，使用 JS 代码进行深度定制。

自定义属性窗口编写区可直接编写JS代码，具体配置项与 ECharts 一致，请您参考 ECharts 官网 https://echarts.apache.org/zh/option.html#title。

窗口右上角的查看配置项按钮可查看产品图表中默认的配置项，当与定制内容重复时，以定制内容优先。

示例

例如使用JS 代码自定义属性修改了气泡图的显示样式，使其呈现流式渲染和视觉映射的效果。预览效果如下：

具体代码如下，供您参考。

let datas = []
option.series[0].data.forEach(item => {
	datas.push(item.value)
})

let opt = {
      title: {
        text: '房价与面积',
        left: 'center',
        top: 0
      },
      visualMap: {
        min: 15202,
        max: 159980,
        dimension: 1,
        orient: 'vertical',
        right: 10,
        top: 'center',
        text: ['HIGH', 'LOW'],
        calculable: true,
        inRange: {
          color: ['#f2c31a', '#24b7f2']
        }
      },
      tooltip: {
        trigger: 'item',
        axisPointer: {
          type: 'cross'
        }
      },
      xAxis: [
        {
          type: 'value'
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'price-area',
          type: 'scatter',
          symbolSize: 5,
          data: datas
        }
      ]
    };

return opt