Echarts散点图

最新推荐文章于 2024-05-21 23:21:19 发布

和小猫的下雨天

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量548

点赞数 14

文章标签：前端 javascript 服务器 echarts

本文链接：https://blog.csdn.net/2403_83182454/article/details/137081107

版权

散点图

散点图是一种用于展示两个变量之间关系的图表。它通过在坐标系中绘制数据点来表示变量之间的关联程度。每个数据点都由一个独立的观测值表示，其中横轴表示一个变量，纵轴表示另一个变量。散点图可以帮助我们观察和分析变量之间的趋势、相关性以及异常值。

散点图的特点包括：

可视化关系：散点图可以直观地显示两个变量之间的关系，例如正向关系、负向关系或者无关系。
趋势线：可以通过添加趋势线来更好地理解变量之间的趋势和模式。
异常值检测：通过观察离群点，可以发现数据中的异常值或者特殊情况。
分组比较：可以使用不同颜色或符号来表示不同的组别，从而比较不同组别之间的差异。

散点图的组成

一个标准的散点图至少包括以下几个部分：

纵轴：表示其中一个变量的值
横轴：表示其中一个变量的值
点：（X，Y）
回归线：最准确地贯穿所有点的线

应用场景

适合数据：两个连续数据字段的数据。
主要功能：观察数据的分布。
适用数据条数：无限制。
备注：为了更好的观察数据分布，需要设置数据点的透明度或者是颜色。
适合场景：
显示和比较数值，不光可以显示趋势，还能显示数据集群的形状，以及在数据云团中各数据点的关系。
不适合场景：
显示各个分类数据的比例。

下面我们来举个实例：

完整代码：

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <script src="js/echarts.js"></script>
 
</head>
 
<body>
    <div id="main" style="width: 820px; height: 600px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title: {
                text: '客户销售比',
              
            },
            color: [' #8F8FBD', '#9932CD'],
            xAxis: {
                scale: true,
                name: '客户数量',
                color: 'lightpink',
            },
            yAxis: {
                scale: true,
                name: '销售额',
                
            },
            series: [
            {
            type:'effectScatter',
            silent:false,
            name:'极值',
            legendHoverLink:false,
            hoverAnimation:false,
            effctType:'ripple',
            showEffectOn:'render',
            rippleEffect:{
                period:2,
                scale:5.5,
                brushType:'fill',
                },
            symbolSize:20,
            data:[
            [367, 1695026.6],    
            [2059, 9903786.32]]
            },
            {
                type: 'scatter',
                symbolSize: 20,
                data: [
                    [468, 3134352.75],
                    [1547, 8150670.62],
                    [748, 4677846.24],
                    [601, 4234075.23],
                    [2059, 9903786.32],
                    [429, 2657902.04],
                    [1012, 5128837.07],
                    [561, 3954075.17],
                    [422, 2290201.87],
                    [1188, 6193413.66],
                    [367, 1695026.6],
                    [1232, 6736514.25],
                ],
            }],
        };
        myChart.setOption(option);
    </script>
</body>
 
</html>

效果：

和小猫的下雨天

关注

14
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Echarts散点图

散点图是一种用于展示两个变量之间关系的图表。它通过在坐标系中绘制数据点来表示变量之间的关联程度。每个数据点都由一个独立的观测值表示，其中横轴表示一个变量，纵轴表示另一个变量。散点图可以帮助我们观察和分析变量之间的趋势、相关性以及异常值。
复制链接

扫一扫