手把手教你用ECharts画散点图和气泡图

上一篇 / 下一篇  2021-06-08 10:19:27

  01 散点图
  散点图是一种基础的可视化图,在ECharts中,制作散点图时需要将series中type参数值设置为scatter,一幅简单的散点图如图4-17所示。这里省略了很多组件,感兴趣的读者可以自行查阅。
▲图4-17 散点图
  代码如下:
  option = { 
      xAxis: {}, 
      yAxis: {}, 
      series: [{ 
          data: [ 
              [2.0, 8.04], 
              [3.0, 6.95], 
              [23.0, 7.58], 
              [18.0, 8.81], 
              [12.0, 8.33], 
              [4.0, 9.96], 
              [16.0, 7.24], 
              [14.0, 4.26], 
              [12.0, 10.84], 
              [10.0, 4.82], 
              [7.0, 5.68] 
          ], 
          type: 'scatter' 
      }] 
  }; 
  需要注意的是,图4-17的散点图是在二维直角坐标系上绘制的,所以每个点需要用两个维度表示,同时要注意data参数中的数据结构,这和之前几种可视化的数据结构差异较大。
  我们常常需要将不同类别的散点展现在同一张图中,按照之前几幅图的学习经验,只需要在series中增加新的数据即可,代码如下:
  option = { 
      xAxis: {}, 
      yAxis: {}, 
      legend: { 
          data: ['类别1','类别2'] 
      }, 
      series: [{ 
          name: '类别1', 
          data: [ 
              [2.0, 8.04], 
              [3.0, 6.95], 
              [23.0, 7.58], 
              [18.0, 8.81], 
              [12.0, 8.33], 
              [4.0, 9.96], 
              [16.0, 7.24], 
              [14.0, 4.26], 
              [12.0, 10.84], 
              [10.0, 4.82], 
              [7.0, 5.68] 
          ], 
          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' 
      } 
      ] 
  }; 
  这里为数据赋予了name参数,所以可以使用legend区分两种散点。
  可视化结果如图4-18所示。
▲图4-18 多类别的散点图
  02 气泡图
  气泡图和散点图类似,区别是二维散点图展现的是两个维度信息,而二维气泡图可以展现三个维度的信息,因为多了一个展示气泡大小的维度信息。
  我们修改散点图的代码,在类别1的数据中增加一个维度数据作为气泡大小,这里会使用到function函数功能,函数返回当前气泡信息(三维数据)的第三个维度数据,也就是气泡的大小,需要注意的是,data[2]代表第三维数据,因为是从data[0]开始计算。具体代码如下:
  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' 
      } 
      ] 
  }; 
  可视化结果如图4-19所示,类别1的气泡大小不一,而类别2的气泡大小相同,为一般散点图。
▲图4-19 气泡图

TAG: 散点图 气泡图

 

评分:0

我来说两句

Open Toolbar