ECharts 基础散点图示例

创作时间:

作者:

@小白创作中心

ECharts 基础散点图示例

引用

CSDN

https://m.blog.csdn.net/qq_22182989/article/details/145369949

散点图简介

散点图是一种常见的数据可视化图表，用于展示两个变量之间的关系。通过散点图，我们可以直观地观察数据的分布、趋势以及是否存在相关性。ECharts 提供了强大的配置项，能够轻松实现散点图，并支持丰富的样式和交互功能。本文将带领大家从零开始实现一个基础散点图。

实现步骤

1. 初始化 ECharts 实例

首先，我们需要初始化一个 ECharts 实例，并绑定到一个 DOM 容器上。

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

2. 配置标题

通过 title 配置项，我们可以为图表添加标题。

title: {
    text: '基础散点图', // 标题内容
    left: 'center' // 标题居中
}

3. 配置坐标轴

散点图需要配置 X 轴和 Y 轴。通过 xAxis 和 yAxis 配置项，我们可以设置坐标轴的类型、范围等。

xAxis: {
    type: 'value', // X 轴类型为数值轴
    scale: true // 自动缩放
},
yAxis: {
    type: 'value', // Y 轴类型为数值轴
    scale: true // 自动缩放
}

4. 配置数据系列

通过 series 配置项，我们可以添加散点图的数据系列。每个数据点由两个数值组成，分别表示 X 轴和 Y 轴的值。

series: [{
    type: 'scatter', // 图表类型为散点图
    data: [ // 数据内容
        [10, 20],
        [15, 25],
        [20, 30],
        [25, 35],
        [30, 40],
        [35, 45],
        [40, 50],
        [45, 55],
        [50, 60]
    ],
    symbolSize: 10 // 数据点的大小
}]

5. 配置提示框（Tooltip）

通过 tooltip 配置项，我们可以设置鼠标悬停时的提示框内容。

tooltip: {
    trigger: 'item', // 触发类型为数据项
    formatter: '({c})' // 提示框内容格式：数据点的坐标
}

完整代码示例（带详细注释）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 基础散点图示例</title>
    <!-- 引入 ECharts 的 CDN 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 创建一个 div 容器，用于放置 ECharts 图表 -->
    <div id="main" style="width: 800px;height:600px;"></div>
    <script>
        // 初始化 ECharts 实例，绑定到 id 为 'main' 的 DOM 元素上
        var myChart = echarts.init(document.getElementById('main'));
        // 配置项
        var option = {
            // 标题配置
            title: {
                text: '基础散点图', // 主标题
                left: 'center' // 标题居中
            },
            // X 轴配置
            xAxis: {
                type: 'value', // X 轴类型为数值轴
                scale: true // 自动缩放
            },
            // Y 轴配置
            yAxis: {
                type: 'value', // Y 轴类型为数值轴
                scale: true // 自动缩放
            },
            // 提示框配置
            tooltip: {
                trigger: 'item', // 触发类型为数据项
                formatter: '({c})' // 提示框内容格式：数据点的坐标
            },
            // 数据系列配置
            series: [{
                type: 'scatter', // 图表类型为散点图
                data: [ // 数据内容
                    [10, 20],
                    [15, 25],
                    [20, 30],
                    [25, 35],
                    [30, 40],
                    [35, 45],
                    [40, 50],
                    [45, 55],
                    [50, 60]
                ],
                symbolSize: 10 // 数据点的大小
            }]
        };
        // 将配置项应用到图表中，渲染图表
        myChart.setOption(option);
    </script>
</body>
</html>