ECharts学习--散点图

最新推荐文章于 2025-06-10 13:56:38 发布

有一种陪伴叫做jay

最新推荐文章于 2025-06-10 13:56:38 发布

阅读量5.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： ECharts 文章标签：数据可视化

本文链接：https://blog.youkuaiyun.com/weixin_46198692/article/details/110291856

ECharts 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了ECharts中的散点图，包括其在数据可视化中的作用和优点，如推断变量间相关性及地图标注。详细阐述了创建散点图的关键点，如数据格式、坐标轴设置，并提到了两种常见效果：气泡图和涟漪动画。通过调整series配置，可实现散点大小、颜色变化以及涟漪动画效果。

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

（一）散点图

散点图是由一些散乱的点组成的图表，这些点在哪个位置，是由x值和y值确定的，所以也叫xy散点图。

散点图的优点：

（1）可以帮助我们推断出变量间的相关性。

（2）经常用到地图的标注上

<div style="width: 700px;height: 400px;"></div>
<script>
    var mChart = echarts.init(document.querySelector('div'));
    var data = [{'height': 152,'weight': 50}, {'height': 153,'weight': 51}, {'height': 160,'weight': 55}, {'height': 155,'weight': 60}, 
    {'height': 165,'weight': 58},{'height': 170,'weight': 55},{'height': 150,'weight': 55},{'height': 163,'weight': 55},];
    var xData = []
    // 需要二维的数组
    data.map(item=>{
        xData.push([item.height,item.weight])
    })
    console.log(xData);
    var option = {
        xAxis: {
            type : 'value',
            scale : true // 将坐标轴都设置为脱离0值比例
        },
        yAxis: {
            type : 'value', // 这里也是value
            scale : true // 将坐标轴都设置为脱离0值比例
        },
        series:[{
            type : 'scatter',
            data : xData,
        }]
    }
    mChart.setOption(option)
</script>

执行以上代码可以得出：

其中要注意：

（1）x轴和y轴的数据：二维数组 [ [值1，值2,[值1，值2]... ]

（2）在series中设置type为scatter，xAxis和yAxis的type都要设置为value

（3）将坐标轴都设置为脱离0值比例，scale为true

（二）常见效果

（1）气泡图散点的大小不同，颜色不同

在series中进行配置：

symbolSize : function (arg){ // 大小
    var height = arg[0]/100
    var weight = arg[1]
    var bmi = weight / Math.pow(height,2) 
    if(bmi > 28){
        return 20
    }else{
        return 12
    }
},
itemStyle : {
   color : function (arg) { // 颜色
    console.log(arg);
    var height = arg.data[0]/100
    var weight = arg.data[1]
    // bmi = weight /   Math.pow(height,2) 
    var bmi = weight / Math.pow(height,2) 
    if(bmi > 28){
        return 'pink'
    }else{
        return 'red'
    }
}}

得到效果图：

（2）涟漪动画效果：

只需要将type的值更改为'effectScatter'，对于涟漪的大和涟漪的时机可以通过在series下配置：

rippleEffect:{
     scale : 10 //控制涟漪大小
},
showEffectOn :  'emphasis', // 鼠标移动到点上才有涟漪效果