气泡图scatter/涟漪动画effectScatter"/>
echarts 散点图 气泡图scatter/涟漪动画effectScatter
文章目录
- 特点
- 基本使用
- 常见效果
- 气泡图
- 涟漪动画 type:effectScatter
特点
散点图可以帮助推断出不同纬度数据之间的相关性
也常用于地图的标注上
基本使用
身高和体重的关系 （正相关）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>散点图</title><script src="Echarts_kaifa.js"></script>
</head>
<body><div><h4>type:scatter 散点图 </h4><div id="scatter" style="width: 600px;height:400px;"></div></div><hr><script>let myEchart = echarts.init(document.querySelector("#scatter"))let data = {h:161,w:51}let xdata = []for(var i = 0; i< 500; i++){let h = data.h + Math.random()*i/10let w = data.w + Math.random()*i/10xdata.push([w,h])}console.log(xdata)let option = {xAxis:{type:'value',scale: true},yAxis:{type:'value',scale: true},series:[{type:'scatter',data:xdata, // 二维数组 [[身高1，体重1],[身高2，体重2], ...]}]}myEchart.setOption(option)</script>
</body>
</html>
常见效果
气泡图
散点大小不同 颜色不同
series:[{type:'scatter',data:xdata, // 二维数组 [[身高1，体重1],[身高2，体重2], ...]// symbolSize: 10, //散点大小symbolSize(params){ // 动态设置散点大小// bmi = 体重kg/身高m*身高m > 28 肥胖let h = params[1]/100let w = params[0]bmi = w / (h*h)return bmi > 28 ? 15 : 5},itemStyle:{color(params){let data = params.datalet h = data[1]/100let w = data[0]let bmi = w / (h*h)return bmi > 28 ? 'red' : 'green'}}
}]
涟漪动画 type:effectScatter
series:[{type:'effectScatter',showEffectOn:'emphasi', // render渲染完成自动拥有 emphasis鼠标滑过rippleEffect:{scale:10,// brushType: "stroke", // 空心},// ...
}]
更多推荐
echarts 散点图 气泡图scatter/涟漪动画effectScatter
发布评论