02-Echarts散点图基本实现、气泡图、涟漪效果等

最新推荐文章于 2024-03-05 22:02:34 发布

请问大家代码怎么敲

最新推荐文章于 2024-03-05 22:02:34 发布

阅读量1.8k

点赞数

分类专栏： Echarts 数据可视化 js

本文链接：https://blog.csdn.net/liumuye88888/article/details/116722241

版权

js 同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

Echarts

7 篇文章 0 订阅

订阅专栏

数据可视化

7 篇文章 0 订阅

订阅专栏

散点图特点

散点图可以帮助我们推断出变量间的相关性
比如身高和体重的关系
散点图也常用在地图的标注上

散点图实现方法

1.x轴数据和y轴数据:都是二维数组
比如 [[‘身高’,体重],[‘身高’,体重],…]
2.图标类型:在series下设置type:scatter xAxis和yAxis的type都要设置为value
3.调整将坐标轴都设置为脱离0值比例,scale:true

散点图基本实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.min.js"></script>
</head>
<body>
  
        <div style="width: 600px; height: 600px;"></div>
</body>
<script>
     //1. ECharts最基本的代码结构
    //2. x轴和y轴数据 二维数组 [ [身高,体重],...   ]
    //3. 将type的值设置为scatter, x轴和y轴的type都是value
    var data = [{ "gender": "female", "height": 161.2, "weight": 51.6 }, { "gender": "female", "height": 167.5, "weight": 59 }, { "gender": "female", "height": 159.5, "weight": 49.2 }, { "gender": "female", "height": 157, "weight": 63 }, { "gender": "female", "height": 155.8, "weight": 53.6 }, { "gender": "female", "height": 170, "weight": 59 }, { "gender": "female", "height": 159.1, "weight": 47.6 }, { "gender": "female", "height": 166, "weight": 69.8 }, { "gender": "female", "height": 176.2, "weight": 66.8 }, { "gender": "female", "height": 160.2, "weight": 75.2 }, { "gender": "female", "height": 172.5, "weight": 55.2 }, { "gender": "female", "height": 170.9, "weight": 54.2 }, { "gender": "female", "height": 172.9, "weight": 62.5 }, { "gender": "female", "height": 153.4, "weight": 42 }, { "gender": "female", "height": 160, "weight": 50 }, { "gender": "female", "height": 147.2, "weight": 49.8 }, { "gender": "female", "height": 168.2, "weight": 49.2 }, { "gender": "female", "height": 175, "weight": 73.2 }, { "gender": "female", "height": 157, "weight": 47.8 }, { "gender": "female", "height": 167.6, "weight": 68.8 }, { "gender": "female", "height": 159.5, "weight": 50.6 }, { "gender": "female", "height": 175, "weight": 82.5 }, { "gender": "female", "height": 166.8, "weight": 57.2 }, { "gender": "female", "height": 176.5, "weight": 87.8 }, { "gender": "female", "height": 170.2, "weight": 72.8 }, { "gender": "female", "height": 174, "weight": 54.5 }]

    var axisData = []
    for(var i = 0;i<data.length;i++){
        var height = data[i].height
        var weight = data[i].weight
        var newArr = [height,weight]
        axisData.push(newArr)
    }
    console.log(axisData);
    var mCharts = echarts.init(document.querySelector('div'))
    var option = {
        xAxis:{
            type:'value',
            scale:true
        },
        yAxis:{
            type:'value',
            scale:true
        },
        series:[
            {
                type:'scatter',
                data:axisData
            }
        ]

    }
    mCharts.setOption(option)
</script>
</html>

如图所示
在这里插入图片描述

气泡图

散点的大小不同,颜色不同来实现

series:[
            {
                type:'scatter',
                data:axisData,
                // 气泡图
                symbolSize:function(arg){
                    // console.log(arg);
                    var height = arg[0]/100
                    var weight = arg[1]
                    // BMI计算 = 体重/(身高*身高) 大于28,就代表肥胖
                    var bmi =weight / (height*height)
                    if(bmi > 28){
                        return 20
                    }
                    return 5
                },
                itemStyle:{ //设置散点图颜色,可以是一个函数
                    color:function(arg){
                        console.log(arg);
                        var height = arg.data[0]/100
                        var weight = arg.data[1]
                    // BMI计算 = 体重(kg)/(身高(m)*身高) 大于28,就代表肥胖
                    var bmi =weight / (height*height)
                    if(bmi > 28){
                        return 'red'
                    }
                    return 'green'
                    }
                }
            }
        ]

点击进入:BMI计算
执行结果
在这里插入图片描述

涟漪动画效果

 series:[
            {
 
                // 涟漪动画效果
               type:'effectScatter',
               rippleEffect:{
                scale:5 //缩放 涟漪动画范围大小
              },
                showEffectOn:'emphasis', // 悬停散点涟漪执行
                }
                ]

执行结果
在这里插入图片描述
更多配置请去Echarts官网学习
Echarts官网:请点击

请问大家代码怎么敲

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
02-Echarts散点图基本实现、气泡图、涟漪效果等

目录散点图特点散点图实现方法散点图基本实现气泡图涟漪动画效果散点图特点散点图可以帮助我们推断出变量间的相关性比如身高和体重的关系散点图也常用在地图的标注上散点图实现方法1.x轴数据和y轴数据:都是二维数组比如 [[‘身高’,体重],[‘身高’,体重],…]2.图标类型:在series下设置type:scatter xAxis和yAxis的type都要设置为value3.调整将坐标轴都设置为脱离0值比例,scale:true散点图基本实现<!DOCTYPE html>&lt
复制链接

扫一扫