2025年ECharts学习--散点图

科技前沿 • 2025-04-11 20:43 • 阅读 65

大家好，我是讯享网，很高兴认识大家。

（一）散点图

散点图是由一些散乱的点组成的图表，这些点在哪个位置，是由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', // 鼠标移动到点上才有涟漪效果

2025年ECharts学习--散点图

（一）散点图

（二）常见效果

相关推荐