Echarts数据可视化 第4章 Echarts可视化图 4.4 散点图 梦里梦外; 2024-03-26 17:47 42阅读 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
还没有评论，来说两句吧...