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

导读：散点图是一种基础的可视化图。气泡图和散点图类似，区别是二维散点图展现的是两个维度信息，而二维气泡图可以展现三个维度的信息。

作者：王大伟

来源：大数据DT（ID：hzdashuju）

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

    ]

};