echart 完成气泡图效果
时间: 2023-07-23 10:28:48 浏览: 41
要使用 ECharts 实现气泡图效果,可以使用 ECharts 中的 scatter 图表类型,并设置每个数据项的 x 值、y 值和气泡大小。下面是一个简单的示例代码:
```javascript
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));
// 指定图表的配置项和数据
var option = {
xAxis: {},
yAxis: {},
series: [{
type: 'scatter',
data: [
[10.0, 8.04, 10],
[8.0, 6.95, 8],
[13.0, 7.58, 13],
[9.0, 8.81, 9],
[11.0, 8.33, 11],
[14.0, 9.96, 14],
[6.0, 7.24, 6],
[4.0, 4.26, 4],
[12.0, 10.84, 12],
[7.0, 4.82, 7],
[5.0, 5.68, 5]
],
symbolSize: function (data) {
return Math.sqrt(data[2]) * 5; // 设置气泡大小
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
在上面的代码中,我们创建了一个 scatter 类型的 series,通过 data 属性设置了每个气泡的 x 值、y 值和大小。其中,symbolSize 属性是一个回调函数,根据数据中的第三个值设置气泡大小。最后,通过 setOption 方法将配置项应用到图表中。