Echarts绘制仪表图
2020-01-30 本文已影响0人
ssttIsme
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仪表图</title>
<script src="script/echarts.min.js"></script>
</head>
<body>
<!--为echarts准备一个容器，画图就画在里面-->
<div id="box" style="width: 600px;height: 600px;"></div>
<script>
//初始化ehcharts实例
var myChart=echarts.init(document.getElementById("box"));
//指定图表的配置项和数据
var option={
//标题
title:{
show:true,
x:'center',
text:'cpu使用率',//主标题
},
//工具栏组件
toolbox:{
show:true, //是否显示
feature:{ //要显示的具体功能
saveAsImage:{ //保存图片
show:true
}
}
},
//弹窗组件
tooltip:{
formatter:"{b}:{c}%"
},
//数据-data是最终要显示的数据
series:[{
name:'cpu使用率',//图例名称
type:'gauge',
detail:{formatter:'{value}%'},
data:[
{value:85,name:'cpu使用率'},
]
}]
};
//使用刚刚指定的配置项和数据项显示图表
myChart.setOption(option);
</script>
</body>
</html>
动态修改仪表图的值
setInterval(function () {
option.series[0].data[0].value=parseInt(Math.random()*(100-15+1)+15,10);
myChart.setOption(option,true);
},1000);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仪表图</title>
<script src="script/echarts.min.js"></script>
</head>
<body>
<!--为echarts准备一个容器，画图就画在里面-->
<div id="box" style="width: 600px;height: 600px;"></div>
<script>
//初始化ehcharts实例
var myChart=echarts.init(document.getElementById("box"));
//指定图表的配置项和数据
var option={
//标题
title:{
show:true,
x:'center',
text:'cpu使用率',//主标题
},
//工具栏组件
toolbox:{
show:true, //是否显示
feature:{ //要显示的具体功能
saveAsImage:{ //保存图片
show:true
}
}
},
//弹窗组件
tooltip:{
formatter:"{b}:{c}%"
},
//数据-data是最终要显示的数据
series:[{
name:'cpu使用率',//图例名称
type:'gauge',
detail:{formatter:'{value}%'},
data:[
{value:85,name:'cpu使用率'},
]
}]
};
//使用刚刚指定的配置项和数据项显示图表
myChart.setOption(option);
setInterval(function () {
option.series[0].data[0].value=parseInt(Math.random()*(100-15+1)+15,10);
myChart.setOption(option,true);
},1000);
</script>
</body>
</html>
