echarts：散点图

最新推荐文章于 2024-07-26 11:09:07 发布

莫小封

最新推荐文章于 2024-07-26 11:09:07 发布

阅读量2.9k

点赞数

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

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

版权

echarts可视化专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

以上代码可以在浏览器中运行，并显示一个简单的散点图，如下图所示：

在这里插入图片描述
在实际应用中，可以根据需要调整图表的样式和数据，以满足不同的需求。

莫小封

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
echarts：散点图

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

扫一扫