仪表盘参数配置项
- series 系列列表
可以添加多个系列列表 - series.min 最小数据值
数据项的最小取值 - series. max 最大数据值
数据项的最大取值 - series. splitNumber 表盘刻度的分割段数
把整个表盘均分为几大段 - series.detail 仪表盘详情
用于显示数据,也就是指针指向的数值 - series.radius 仪表盘半径
可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。 - series.center 仪表中心位置
center:[“50%”,“50%”], - series.startAngle: 仪表盘起始角度。
圆心 正右手侧为0度，正上方为90度，正左手侧为180度。 - series.endAngle:仪表盘结束角度。
- series.data数据项数据
- series.title对数据项名进设置
- series.axisLine 仪表盘轴线相关配置
也就是设置仪表盘的圆环 - series.axisTick 刻度样式
对splitNumber分的每一段进行在划分 - series. axisLabel刻度标签。
splitNumber分割线的标签显示与样式设置 - series. pointer指针样式设置
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>clock</title>
<meta charset="utf-8">
<script src="static/js/echarts.min3.js"></script>
</head>
<body>
<div id="main" style="width: 200px;height: 200px;background-color:pink ;">
</div>
<script>
var myChart = echarts.init(document.getElementById("main"));
var option = {
title:{
text:"天梭时钟",
left: "center",
},
tooltip : {
formatter: "{a} <br/>{b} : {c}"
},
textStyle:{
color: "#0000",
},
series: [
{
name: '时钟-秒',
type: 'gauge',
radius:"70%",
center:["50%","50%"],
startAngle: 90,
endAngle:-269.999,
// 最小数据值（数据项的最小取值）
min: 0,
// 最大数据值 （数据项的最大取值）
max: 60,
// 表盘刻度的分割段数(均分为几大段)
splitNumber: 12,
// 仪表盘详情，用于显示数据,也就是指针指向的数值
detail: {
show: false,
fontSize:12,
color: "white",
// 格式化函数或者字符串(格式化显示详情,对显示的内容,格式进行定制)
formatter: function(value){
if (value == 0)
return "00:";
else if (value<10)
return "0"+value;
else
return value ;
},
offsetCenter: [12,"125%"],
},
// 数据项
data: [{value: 59, name: '秒'}],
// data 数据的标题名设置
title:{
show:false,
},
// 仪表盘轴线相关配置
axisLine:{
lineStyle:{
color:[[1, '#FF0000']],
width:5,
},
},
splitLine:{
length:10,
lineStyle:{
color: "#000",
width:5,
}
},
axisTick:{
show:false,
splitNumber: 5,
lineStyle:{
color: "#000",
}
},
axisLabel:{
show:false,
distance:5,
formatter: function (value) {
if (value == 0 || value == 60)
return "60";
else if (value<10)
return "0"+value;
else
return value;
}
},
pointer:{
length: "70%",
width: 3,
},
itemStyle:{
color:"#000",
}
},
{
name: ' 时钟-分',
type: 'gauge',
radius:"70%",
center:["50%","50%"],
startAngle: 90,
endAngle:-269.999,
min: 0,
max: 60,
splitNumber: 12,
// 仪表盘详情，用于显示数据,也就是指针指向的数值
detail: {
show: false,
fontSize:12,
color: "white",
formatter: function(value){
if (value == 0)
return "00:";
else if (value<10)
return "0"+value + ":";
else
return value + ":";
},
offsetCenter: [0,"125%"],
},
data: [{value: 59, name: '分'}],
title:{
show:false,
},
axisLine:{
lineStyle:{
color:[[1, '#14c8d4']],
width:5,
},
},
splitLine:{
length:10,
lineStyle:{
color: "#000",
width:5,
}
},
axisTick:{
show:true,
splitNumber: 5,
lineStyle:{
color: "#000",
}
},
axisLabel:{
show:false,
distance:5,
formatter: function (value) {
if (value == 0 || value == 60)
return "60";
else if (value<10)
return "0"+value;
else
return value;
}
},
pointer:{
length: "70%",
width: 3,
},
},
{
name: '时钟-时',
type: 'gauge',
radius:"70%",
center:["50%","50%"],
startAngle: 90,
endAngle:-269.999,
// 最小数据值（数据项的最小取值）
min: 0,
// 最大数据值 （数据项的最大取值）
max: 12,
// 表盘刻度的分割段数(均分为几大段)
splitNumber: 12,
// 仪表盘详情，用于显示数据,也就是指针指向的数值
detail: {
show: true,
fontSize:12,
color: "white",
backgroundColor: '#0000FF',
borderWidth:1,
borderRadius:3,
shadowColor:"#0000CD",
shadowBlur:10,
// 格式化函数或者字符串(格式化显示详情,对显示的内容,格式进行定制)
formatter: function(value){
value=parseInt(value);
var dt_ = new Date();
hour_ = dt_.getHours();
// 判断是上午还是下午
if((hour_ - value) == 12)
value = hour_;
var minutes = option.series[1].data[0].value;
var seconds = option.series[0].data[0].value;
minutes = minutes<10?("0" + minutes):minutes;
seconds = seconds<10?("0" + seconds):seconds;
if (value == 0 || value == 12)
return "12" + ":" + minutes + ":" + seconds;
else if (value<10)
return "0"+ value + ":" + minutes + ":" + seconds;
else
return value + ":" + minutes + ":" + seconds;
},
// 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。
// 可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
offsetCenter: [0,"125%"],
},
// 数据
data: [{value: 8, name: 'TISSOT'}],
// data 数据的标题名
title:{
show:true,
fontSize:10,
},
axisLine:{
lineStyle:{
color:[[1, '#FFD700']],
width:5,
},
},
splitLine:{
length:10,
lineStyle:{
color: "#14c8d4",
width:5,
}
},
axisTick:{
show:false,
splitNumber: 5,
lineStyle:{
color: "#14c8d4",
}
},
axisLabel:{
show:true,
distance:5,
formatter: function (value) {
// console.log(value + ":" + option.series[1].data[0].value + ":" + option.series[2].data[0].value);
if (value == 0 || value == 12)
return "12";
else if (value<10)
return "0"+value;
else
return value;
}
},
pointer:{
length: "50%",
width: 3,
},
},
]
};
setInterval(function(){
var date = new Date();
Hour = date.getHours()<=12?date.getHours():date.getHours()-12;
Minutes = date.getMinutes();
Seconds = date.getSeconds();
option.series[1].data[0].value = Minutes;
option.series[0].data[0].value = Seconds;
option.series[2].data[0].value = Hour + Minutes/12/10;
myChart.setOption(option);
},1000);
</script>
</body>
</html>