echarts散点图
程序员文章站
2024-01-19 13:01:40
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>散点图</title>
<style>
#test{
margin: 20px;
width: 700px;
height: 500px;
}
</style>
</head>
<body>
<!--建立dom 容器-->
<div id="test"></div>
<!--引入echarts-->
<script src="https://lib.baomitu.com/echarts/4.7.0/echarts.min.js"></script>
<script>
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('test'));
//数据
const data=[
//x,y, z
[0, 0, 20],
[10,10,40],
[20,10,50],
[30,30,30],
];
// 指定图表的配置项和数据
const option = {
/*x 轴*/
xAxis:{},
/*y轴*/
yAxis:{},
/*散点图 scatter
* data 数据
* symbolSize 散点尺寸
* */
series:{
type:'scatter',
data,
// symbolSize:40,
symbolSize:(data)=>{
console.log(data);
return data[2];
},
},
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
上一篇： 左式堆学习
下一篇： 云服务器应用实施还需政策细化