儀表盤參數配置項
- 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>