ECharts_散点图

3.3 散点图

散点图可以帮助我们推断出变量间的相关性。

比如身高和体重的关系。

 

3.3.1 实现步骤

  • Echarts最基本的代码结构

    • 引入js文件

    • DOM容器

    • 初始化对象

    • 设置option

  • x轴和y轴的数据：二维数组

  • 图标类型

    • 在series下设置 type:scatter

    • xAxis和yAxis的type都要设置为value

  • 调整：将坐标轴设置为脱离0值比例 scale: true

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/echarts.min.js"></script>
</head>
<body>
    <div style="height: 400px; width: 600px;"></div>

    <script>
        var mCharts = echarts.init(document.querySelector('div'))

        var axisData = [[182.9, 85], [176.5, 87.9], [184.2, 77.3], 
                        [159.1, 47.6], [166,69.8], [176.2,66.8], [160.2, 75.2],
                        [172.5,55.2], [170.8,54.2],[153.4, 42], [160,50],[168.2,49.2]]

        var option = {
            xAxis: {
                type: 'value',
                scale: 'true'
            },
            yAxis: {
                type: 'value',
                scale: 'ture'
            },
            series: [
                {
                    type: 'scatter',
                    data:axisData
                }
            ]
        }

        mCharts.setOption(option)
    </script>
</body>
</html>
复制代码

3.3.2 常见效果

  • 气泡图效果

    • 散点大小不同 symbolSize

      自定义散点：

      复制代码
      series: [
    {
        type: 'scatter',
        data:axisData,
        symbolSize: function(arg) {
            //bmi = 体重/(身高*身高)
            var height = arg[0] / 100;
            var weight = arg[1];

            var bmi = weight / (height*height);
            if (bmi > 28) {
                return 20;
            } else {
                return 5;
            }
        }
    }
]
      复制代码

    • 散点颜色不同 itemStyle
      复制代码
       series: [
    {
        type: 'scatter',
        data:axisData,
        itemStyle: {
            color: function (arg) {
                //bmi = 体重/(身高*身高)
                var height = arg.data[0] / 100;
                var weight = arg.data[1];

                var bmi = weight / (height * height);
                if (bmi > 28) {
                    return 'red';
                } else {
                    return 'green';
                }
            }
        }
    }
]
      复制代码

  • 涟漪动画效果 type: 'effectScatter'

    • showEffectOn

      • showEffectOn: 'render' 散点渲染完成后具有涟漪效果

      • showEffectOn: 'emphasis' 鼠标划过时显示涟漪效果

    • rippleEffect

      • scale 设置涟漪范围大小

posted @   Gazikel  阅读(1076)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示
AI IDE Trae