Echarts数据可视化 第4章 Echarts可视化图 4.5 气泡图

Echarts数据可视化

文章目录

• • • Echarts数据可视化
    • 第4章 Echarts可视化图
    • • 4.5 气泡图

Echarts数据可视化：入门、实战与进阶

第4章 Echarts可视化图

4.5 气泡图

二维气泡图对比散点图，其实就多了一个展示气泡大小的维度信息。

可以直接修改散点图的配置

option = {
  xAxis: {},
  yAxis: {},
  legend: {
    data: ['类别1', '类别2']
  },
  series: [
    {
      name: '类别1',
      data: [
        [2.0, 8.04, 10],
        [3.0, 6.95, 20],
        [23.0, 7.58, 30],
        [18.0, 8.81, 15],
        [12.0, 8.33, 16],
        [4.0, 9.96, 5],
        [16.0, 7.24, 18],
        [14.0, 4.26, 35],
        [12.0, 10.84, 20],
        [10.0, 4.82, 50],
        [7.0, 5.68, 13]
      ],
      symbolSize: function (data) {
        return data[2];
      },
      type: 'scatter'
    },

    {
      name: '类别2',
      data: [
        [1.0, 2.04],
        [2.0, 15.95],
        [26.0, 17.58],
        [13.0, 7.81],
        [22.0, 5.33],
        [14.0, 9.96],
        [6.0, 4.24],
        [4.0, 4.26],
        [22.0, 13.84],
        [16.0, 14.82],
        [17.0, 15.68]
      ],
      type: 'scatter'
    }
  ]
};

渲染效果

function 函数返回当前气泡信息(三维数据) 的第三个维度数据，也就是气泡的大小。[从0 开始代表第一维]