Echarts数据可视化第4章 Echarts可视化图 4.4 散点图

梦里梦外; 2024-03-26 17:47 101阅读 0赞

#### Echarts数据可视化 ####

#### 文章目录 ####

*   *   *  Echarts数据可视化
         *  第4章 Echarts可视化图
         *   *  4.4 散点图

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

#### 第4章 Echarts可视化图 ####

##### 4.4 散点图 #####

制作散点图也很简单，只需要将series 的 type 参数值设置为 scatter 即可。

举个栗子

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'
        }
      ]
    };

渲染效果

![在这里插入图片描述][e7ad9cda8ef84caf998ba166a828a687.png_pic_center]

这个图由于是在二维直角坐标系中绘制的，所以每个点都需要用两个维度来表示。同时散点图的data 结构也有所差异。

在实际应用中，我们也经常需要将不同的散点展现在同一张图中

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'
        }
      ]
    };

渲染效果

![在这里插入图片描述][1d2c48db99c941d5afc0151647977a4f.png_pic_center]

使用legend 图例区分两种不同的散点。

[e7ad9cda8ef84caf998ba166a828a687.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5057fdf112944e8885ecebda1fc56346.png
[1d2c48db99c941d5afc0151647977a4f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b42d2df5391a4474b2777cfd9d8f3439.png