ECharts 5 把第三列映射为气泡图的点的大小实例

源代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>ECharts 5 把第三列映射为气泡图的点的大小 实例</title>
  
  <script src="https://cdn.staticfile.org/echarts/5.4.3/echarts.min.js"></script>
</head>

// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

var option = {
      dataset: {
        source: [
          [12, 323, 11.2],
          [23, 167, 8.3],
          [81, 284, 12],
          [91, 413, 4.1],
          [13, 287, 13.5]
        ]
      },
      visualMap: {
        show: false,
        dimension: 2, // 指向第三列（列序号从 0 开始记，所以设置为 2）。
        min: 2, // 需要给出数值范围，最小数值。
        max: 15, // 需要给出数值范围，最大数值。
        inRange: {
          // 气泡尺寸：5 像素到 60 像素。
          symbolSize: [5, 60]
        }
      },
      xAxis: {},
      yAxis: {},
      series: {
        type: 'scatter'
      }
    };

option && myChart.setOption(option);
  </script>
</body>

</html>

运行结果