echarts：散点图

最新推荐文章于 2025-06-06 11:33:20 发布

莫小封

最新推荐文章于 2025-06-06 11:33:20 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts可视化文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/qq_41390184/article/details/129877318

echarts可视化专栏收录该内容

5 篇文章

订阅专栏

Echarts是一个JavaScript库，用于数据可视化，支持包括散点图在内的多种图表类型。散点图用于展示两个变量间的关系。绘制散点图需引入Echarts库，准备数据，创建图表实例，并设置样式。示例代码展示了如何创建一个基础的散点图，包括数据点的大小和颜色配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts是一款基于JavaScript的开源可视化库，可以用于绘制各种类型的图表，包括折线图、柱状图、散点图等。散点图是一种用于显示两个变量之间关系的图表，其中每个数据点由两个数值表示，通常用于研究变量之间的相关性和趋势。

使用Echarts绘制散点图需要以下步骤：

1. 引入Echarts库

在HTML文件中引入Echarts库的JavaScript文件，可以通过CDN或下载本地文件的方式引入。例如：

<script src="echarts.js"></script>

2. 准备数据

准备要绘制的数据，每个数据点应该包含两个数值表示x轴和y轴的值。可以通过数组的方式存储数据，例如：

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

3. 创建Echarts实例

在HTML文件中创建一个div元素，用于显示散点图。然后在JavaScript代码中创建Echarts实例，并指定要绘制的图表类型为散点图。例如：

var myChart = echarts.init(document.getElementById('scatter-chart'));
myChart.setOption({
    title: {
        text: '散点图示例'
    },
    xAxis: {},
    yAxis: {},
    series: [{
        type: 'scatter',
        data: data
    }]
});

设置图表样式

通过setOption方法可以设置图表的样式，包括标题、x轴和y轴的标签、数据点的大小和颜色等。例如：

myChart.setOption({
    title: {
        text: '散点图示例'
    },
    xAxis: {
        name: 'X轴'
    },
    yAxis: {
        name: 'Y轴'
    },
    series: [{
        type: 'scatter',
        data: data,
        symbolSize: 10,
        itemStyle: {
            color: 'blue'
        }
    }]
});

其中，symbolSize表示数据点的大小，itemStyle.color表示数据点的颜色。

完整的HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>散点图示例</title>
    <script src="echarts.js"></script> //最好将代码文件与echarts.js文件放在同一文件夹中
</head>
<body>
    <div id="scatter-chart" style="width: 600px;height:400px;"></div>
    <script>
        var data = [
            [10, 20],
            [20, 30],
            [30, 40],
            [40, 50],
            [50, 60]
        ];
        var myChart = echarts.init(document.getElementById('scatter-chart'));
        myChart.setOption({
            title: {
                text: '散点图示例'
            },
            xAxis: {
                name: 'X轴'
            },
            yAxis: {
                name: 'Y轴'
            },
            series: [{
                type: 'scatter',
                data: data,
                symbolSize: 10,
                itemStyle: {
                    color: 'blue'
                }
            }]
        });
    </script>
</body>
</html>