转载请联系大数据DT公众号。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]],类型：'分散'}]}；需要注意的是，图4-17中的散点图是在二维笛卡尔坐标系上绘制的，所以每个点都需要二维表示，需要注意数据参数Structure中的数据，与之前的可视化数据结构有很大的不同。我们经常需要在同一张图中显示不同类型的散点。根据前面图的学习经验，我们只需要在系列中添加新的数据即可。代码如下：option={xAxis:{},yAxis:{},legend:{data:['category1','category2']},series:[{name:'category1',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]],类型:'scatter'},{name:'category2',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]],输入:'散点图'}]};此处将名称分配给数据参数，因此可以使用图例来区分两种散点。可视化结果如图4-18所示。▲图4-18多分类散点图02气泡图气泡图与散点图类似，不同之处在于二维散点图以二维的方式展示信息，而二维气泡图可以以二维的方式展示信息三个维度。因为多了一个显示气泡大小的维度信息。我们修改散点图的代码，在类别1的数据中增加一个维度数据，作为气泡的大小。这里会用到function函数。函数返回当前气泡信息的第三维数据（三维数据），即气泡。size，需要注意的是data[2]代表的是三维数据，因为它是从data[0]计算出来的。具体代码如下：option={xAxis:{},yAxis:{},legend:{data:['category1','category2']},series:[{name:'category1',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:函数(数据){returndata[2];},type:'scatter'},{name:'category2',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]],类型:'scatter'}]};可视化结果如图4-19所示，类别1的气泡大小不同，而类别2的气泡大小相同，是一般的散点图。▲图4-19气泡图作者简介：王大伟，华东理工大学硕士毕业，目前就职于平安金融壹账通，从事数据挖掘算法工作，擅长ECharts、Python、自然语言处理、数据分析与挖掘、机器学习。获得微软最有价值专家（MVP）荣誉称号。本文节选自《ECharts数据可视化：入门、实战与进阶》，经发布者授权发布。
