正文

学会用ECharts绘制散点图：快速上手教程及代码实例

/0 浏览量
0719

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松地在网页中添加交互式的图表。散点图是 ECharts 中非常常用的一种图表类型，用于展示两个变量之间的关系。本教程将带你快速上手 ECharts 散点图的绘制，并提供详细的代码实例。

环境准备

在开始之前，请确保你的网页中已经引入了 ECharts 的 JavaScript 文件。可以通过以下代码实现：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>

创建散点图

1. 准备数据

首先，我们需要准备散点图所需的数据。以下是一个简单的数据示例：

var data = [
    [10, 20],
    [20, 30],
    [30, 40],
    [40, 50],
    [50, 60]
];

2. 设置图表配置项

接下来，我们需要设置散点图的配置项。以下是创建一个基本散点图的配置示例：

var option = {
    title: {
        text: '散点图示例'
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: data,
        type: 'scatter'
    }]
};

3. 初始化图表实例

在 HTML 页面中添加一个用于显示图表的容器元素，并为该元素设置一个 ID。然后，使用 ECharts 的 init 方法初始化图表实例：

var myChart = echarts.init(document.getElementById('main'));

4. 设置图表配置项并渲染图表

最后，将配置项设置到图表实例中，并调用 setOption 方法渲染图表：

myChart.setOption(option);

代码实例

以下是完整的代码示例：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="main" style="height: 100%"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script type="text/javascript">
    var data = [
        [10, 20],
        [20, 30],
        [30, 40],
        [40, 50],
        [50, 60]
    ];
    var option = {
        title: {
            text: '散点图示例'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: data,
            type: 'scatter'
        }]
    };
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(option);
</script>
</body>
</html>

总结

通过以上教程，你已经学会了如何使用 ECharts 绘制散点图。你可以根据自己的需求修改数据、配置项等，以创建出更加丰富的图表效果。希望这篇教程能帮助你快速上手 ECharts 散点图的绘制。

-- 展开阅读全文 --