web数据可视化(Echarts版)4-7单仪表盘图(代码仅供参考)
【代码】web数据可视化(Echarts版)4-7单仪表盘图(代码仅供参考)
·
echarts.js文件下载地址:ehcarts – geren博客网站 (wordpress.com)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="echarts.js"></script>
<title></title>
</head>
<body>
<div id = "main" style="width: 800px; height: 800px;"></div>
<script type="text/javascript">
var myChart =echarts.init(document.getElementById("main"));
var data1 = [{ name:"完成率(%)",value: 50,}];
var color1 = [[0.2, "rgba(255,0,0,1)"], [0.8, "rgba(0,255,255,1)"] ];
var option = {
backgroundColor:'rgba(128,128,128,0.1)',
tooltip:{
show:true,
formatter:"{b}：{c}%",
backgroundColor:"rgba(255,0,0,0.8)",
borderColor:"#333",
borderWidth:0,
padding:5,
textStyle:{
},
},
title:{
text:'项目实际完成率(%)',
x:'center',y:25,
show:true,
offsetCenter:[50,"20%"],
textStyle:{
fontFamily:"黑体",
color:"blue",
fontSize:20,
}
},
series: [
{
name:"单仪表盘实例",
type:"gauge",
radius:"80%",
center:["50%","55%"],
startAngle:225,
endAngle:-45,
clockwise:true,
min:0,
max:100,
splitNumber:10,
axisLine:{
show:true,
lineStyle:{
color:color1,
opacity:1,
width:30,
shadowBlur:20,
shadowColor:"#fff"
}
},
splitLine:{
show:true,
length:30,
lineStyle:{
color:"#eee",
opacity:1,
width:2,
type:"solid",
shadowBlur:10,
shadowColor:"#fff",
}
},
axisTick:{
show:true,
splitNumber:5,
length:8,
lineStyle:{
color:"#eee",
opacity:1,
width:1,
type:"solid",
shadowBlur:10,
shadowColor:"#fff",
},
},
axisLabel:{
show:true,
distance:25,
color:"blue",
fontSize:32,
formatter:"{value}",
},
pointer:{
show:true,
length:"70%",
width:9,
},
itemStyle:{
color:"auto",
opacity:1,
borderType:"solid",
borderColor:"#000",
borderWidth:0,
shadowBlur:10,
shadowColor:"#fff",
},
emphasis:{
itemStyle:{
}
},
detail:{
show:true,
offsetCenter:[0,"50%"],
color:"auto",
fontSize:30,
formatter:"{value}%",
},
data:data1
}
],
};
setInterval(function () {
option.series[0].data[0].value =(Math.random()*100).toFixed(2);
myChart.setOption(option,true);
},2000);
myChart.setOption(option);
</script>
</body>
</html>
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
1
0- 0
已为社区贡献17条内容
所有评论(0)