如何利用ECharts画散点图和气泡图

ECharts 是一款开源的可视化图表库，支持多种类型的图表展示，包括折线图、柱状图、饼图、散点图、气泡图等。在本篇文章中，我们将重点介绍如何利用 ECharts 画散点图和气泡图。

1. 散点图

散点图通常用于展示两个变量的相关性，比如身高和体重、温度和降雨量等。下面是一个简单的散点图示例：


要绘制一个散点图，我们需要准备好数据集，数据集包括每个数据点的坐标和对应的标签。下面是一个示例数据集：

var data = [
    [5, 20, 'A'],
    [10, 30, 'B'],
    [20, 40, 'C'],
    [30, 50, 'D'],
    [40, 60, 'E'],
];

这个数据集包括五个数据点，每个数据点的 维和第二维分别表示横坐标和纵坐标，第三维表示标签。接下来，我们就可以利用 ECharts 的 API 来绘制散点图。首先，我们需要引入 ECharts 的 JavaScript 文件：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>

然后，我们需要在 HTML 页面中添加一个 div 元素，用于显示图表：

<div id="scatter-chart" style="width: 600px; height: 400px;"></div>

接下来，我们需要编写 JavaScript 代码来绘制散点图：

var chartDom = document.getElementById('scatter-chart');
var myChart = echarts.init(chartDom);

var option = {
    xAxis: {
        type: 'value',
        name: 'X',
        nameLocation: 'middle',
        nameGap: 20,
    },
    yAxis: {
        type: 'value',
        name: 'Y',
        nameLocation: 'middle',
        nameGap: 20,
    },
    series: [{
        data: data,
        type: 'scatter',
        symbolSize: 10,
    }]
};

myChart.setOption(option);

这段代码中，我们首先通过 getElementById 方法获取了要显示图表的 div 元素，并使用 echarts.init 方法初始化了一个 ECharts 实例。然后，我们定义了一个 option 对象，其中 xAxis 和 yAxis 分别表示横轴和纵轴的属性，type 属性表示坐标轴类型是数值型。最后，我们定义了一个 series 对象，其中 data 属性是我们准备好的数据集，type 属性设置为 'scatter'，表示绘制散点图，symbolSize 属性表示数据点的大小。

最后一步，通过调用 myChart.setOption 方法即可将散点图渲染到页面上。

2. 气泡图

和散点图类似，气泡图也是用于展示两个变量的相关性。不同之处在于，气泡图中每个数据点的大小表示数据的第三个维度。下面是一个简单的气泡图示例：


要绘制一个气泡图，我们依然需要准备好数据集，数据集包括每个数据点的坐标、大小和标签。下面是一个示例数据集：

var data = [
    [5, 20, 10, 'A'],
    [10, 30, 20, 'B'],
    [20, 40, 30, 'C'],
    [30, 50, 40, 'D'],
    [40, 60, 50, 'E'],
];

这个数据集包括五个数据点，每个数据点的 维和第二维分别表示横坐标和纵坐标，第三维表示数据点的大小，第四维表示标签。接下来，我们就可以利用 ECharts 的 API 来绘制气泡图。下面是完整的 JavaScript 代码：

var chartDom = document.getElementById('bubble-chart');
var myChart = echarts.init(chartDom);

var option = {
    xAxis: {
        type: 'value',
        name: 'X',
        nameLocation: 'middle',
        nameGap: 20,
    },
    yAxis: {
        type: 'value',
        name: 'Y',
        nameLocation: 'middle',
        nameGap: 20,
    },
    series: [{
        data: data,
        type: 'scatter',
        symbolSize: function (data) {
            return data[2];
        },
        label: {
            show: true,
            position: 'top',
        },
        itemStyle: {
            opacity: 0.8,
        },
    }]
};

myChart.setOption(option);

这段代码中，我们首先通过 getElementById 方法获取了要显示图表的 div 元素，并使用 echarts.init 方法初始化了一个 ECharts 实例。然后，我们定义了一个 option 对象，其中 xAxis 和 yAxis 分别表示横轴和纵轴的属性，type 属性表示坐标轴类型是数值型。最后，我们定义了一个 series 对象，其中 data 属性是我们准备好的数据集，type 属性设置为 'scatter'，表示绘制气泡图，symbolSize 属性是一个回调函数，用于设置每个数据点的大小，label 属性用于设置气泡图上的标签，itemStyle 属性用于设置气泡图的样式。

和绘制散点图的过程类似，最后一步，通过调用 myChart.setOption 方法即可将气泡图渲染到页面上。

结语

本文介绍了如何利用 ECharts 绘制散点图和气泡图。总体来说，利用 ECharts 绘制图表的过程比较简单，只需要准备好数据集，并通过 API 来设置坐标轴、标签、样式等属性，就可以将图表渲染到页面上。如果你对使用 ECharts 进行数据可视化感兴趣，建议多看看官方文档和示例，以及相关的书籍和视频教程。