<html>
<head>
<meta charset="UTF-8">
<title>單儀表盤(pán)案例</title>
<!-- 引入 ECharts 文件 -->
<script src="js/echarts4.0.js" type="text/javascript" charset="utf-8"></script>
<body>
<!-- 為 ECharts 準(zhǔn)備一個(gè)具備大?。▽捀撸┑?容器 -->
<div id="chart1" style="width: 80%;height: 400px;top: 50px;left: 10%;border: 3px solid #000;"></div>
</body>
</html>
<script type="text/javascript">
// 基于準(zhǔn)備好的容器(這里的容器是id為chart1的div)，初始化echarts實(shí)例
var chart1 = echarts.init(document.getElementById("chart1"));
var colorTemplate1 = [[0.2, "rgba(255,0,0,0.8)"], [0.8, "rgba(0,255,255,0.8)"], [1, "rgba(0,255,0,0.8)"]];
var data1 = [{
name: "安全度",
value: 85,
}];
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
backgroundColor: "#000",
tooltip: { // 本系列特定的 tooltip 設(shè)定。
show: true,
formatter: "：{c}%",
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮層的背景顏色。注意：series.tooltip 僅在 tooltip.trigger 為 'item' 時(shí)有效。
borderColor: "#333", // 提示框浮層的邊框顏色。...
borderWidth: 0, // 提示框浮層的邊框?qū)挕?..
padding: 5, // 提示框浮層內(nèi)邊距，單位px，默認(rèn)各方向內(nèi)邊距為5，接受數(shù)組分別設(shè)定上右下左邊距。...
textStyle: { // 提示框浮層的文本樣式。...
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
},
},
series: [
{
name: "單儀表盤(pán)示例", // 系列名稱(chēng),用于tooltip的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據(jù)和配置項(xiàng)時(shí)用于指定對(duì)應(yīng)的系列。
type: "gauge", // 系列類(lèi)型
radius: "80%", // 參數(shù):number, string。 儀表盤(pán)半徑,默認(rèn) 75% ，可以是相對(duì)于容器高寬中較小的一項(xiàng)的一半的百分比，也可以是絕對(duì)的數(shù)值。
center: ["50%", "55%"], // 儀表盤(pán)位置(圓心坐標(biāo))
startAngle: 225, // 儀表盤(pán)起始角度,默認(rèn) 225。圓心 正右手側(cè)為0度，正上方為90度，正左手側(cè)為180度。
endAngle: -45, // 儀表盤(pán)結(jié)束角度,默認(rèn) -45
clockwise: true, // 儀表盤(pán)刻度是否是順時(shí)針增長(zhǎng),默認(rèn) true。
min: 0, // 最小的數(shù)據(jù)值,默認(rèn) 0 。映射到 minAngle。
max: 100, // 最大的數(shù)據(jù)值,默認(rèn) 100 。映射到 maxAngle。
splitNumber: 10, // 儀表盤(pán)刻度的分割段數(shù),默認(rèn) 10。
axisLine: { // 儀表盤(pán)軸線(xiàn)(輪廓線(xiàn))相關(guān)配置。
show: true, // 是否顯示儀表盤(pán)軸線(xiàn)(輪廓線(xiàn)),默認(rèn) true。
lineStyle: { // 儀表盤(pán)軸線(xiàn)樣式。
color: colorTemplate1, //儀表盤(pán)的軸線(xiàn)可以被分成不同顏色的多段。每段的 結(jié)束位置(范圍是[0,1]) 和 顏色 可以通過(guò)一個(gè)數(shù)組來(lái)表示。默認(rèn)取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
opacity: 1, //圖形透明度。支持從 0 到 1 的數(shù)字，為 0 時(shí)不繪制該圖形。
width: 30, //軸線(xiàn)寬度,默認(rèn) 30。
shadowBlur: 20, //(發(fā)光效果)圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設(shè)置圖形的陰影效果。
shadowColor: "#fff", //陰影顏色。支持的格式同color。
}
},
splitLine: { // 分隔線(xiàn)樣式。
show: true, // 是否顯示分隔線(xiàn),默認(rèn) true。
length: 30, // 分隔線(xiàn)線(xiàn)長(zhǎng)。支持相對(duì)半徑的百分比,默認(rèn) 30。
lineStyle: { // 分隔線(xiàn)樣式。
color: "#eee", //線(xiàn)的顏色,默認(rèn) #eee。
opacity: 1, //圖形透明度。支持從 0 到 1 的數(shù)字，為 0 時(shí)不繪制該圖形。
width: 2, //線(xiàn)度,默認(rèn) 2。
type: "solid", //線(xiàn)的類(lèi)型,默認(rèn) solid。 此外還有 dashed,dotted
shadowBlur: 10, //(發(fā)光效果)圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設(shè)置圖形的陰影效果。
shadowColor: "#fff", //陰影顏色。支持的格式同color。
}
},
axisTick: { // 刻度(線(xiàn))樣式。
show: true, // 是否顯示刻度(線(xiàn)),默認(rèn) true。
splitNumber: 5, // 分隔線(xiàn)之間分割的刻度數(shù),默認(rèn) 5。
length: 8, // 刻度線(xiàn)長(zhǎng)。支持相對(duì)半徑的百分比,默認(rèn) 8。
lineStyle: { // 刻度線(xiàn)樣式。
color: "#eee", //線(xiàn)的顏色,默認(rèn) #eee。
opacity: 1, //圖形透明度。支持從 0 到 1 的數(shù)字，為 0 時(shí)不繪制該圖形。
width: 1, //線(xiàn)度,默認(rèn) 1。
type: "solid", //線(xiàn)的類(lèi)型,默認(rèn) solid。 此外還有 dashed,dotted
shadowBlur: 10, //(發(fā)光效果)圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設(shè)置圖形的陰影效果。
shadowColor: "#fff", //陰影顏色。支持的格式同color。
},
},
axisLabel: { // 刻度標(biāo)簽。
show: true, // 是否顯示標(biāo)簽,默認(rèn) true。
distance: 5, // 標(biāo)簽與刻度線(xiàn)的距離,默認(rèn) 5。
color: "#fff", // 文字的顏色,默認(rèn) #fff。
fontSize: 12, // 文字的字體大小,默認(rèn) 5。
formatter: "{value}", // 刻度標(biāo)簽的內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式。 示例:// 使用字符串模板，模板變量為刻度默認(rèn)標(biāo)簽 {value},如:formatter: '{value} kg'; // 使用函數(shù)模板，函數(shù)參數(shù)分別為刻度數(shù)值,如formatter: function (value) {return value + 'km/h';}
},
pointer: { // 儀表盤(pán)指針。
show: true, // 是否顯示指針,默認(rèn) true。
length: "70%", // 指針長(zhǎng)度，可以是絕對(duì)數(shù)值，也可以是相對(duì)于半徑的百分比,默認(rèn) 80%。
width: 5, // 指針寬度,默認(rèn) 8。
},
itemStyle: { // 儀表盤(pán)指針樣式。
color: "auto", // 指針顏色，默認(rèn)(auto)取數(shù)值所在的區(qū)間的顏色
opacity: 1, // 圖形透明度。支持從 0 到 1 的數(shù)字，為 0 時(shí)不繪制該圖形。
borderWidth: 0, // 描邊線(xiàn)寬,默認(rèn) 0。為 0 時(shí)無(wú)描邊。
borderType: "solid", // 柱條的描邊類(lèi)型，默認(rèn)為實(shí)線(xiàn)，支持 'solid', 'dashed', 'dotted'。
borderColor: "#000", // 圖形的描邊顏色,默認(rèn) "#000"。支持的顏色格式同 color，不支持回調(diào)函數(shù)。
shadowBlur: 10, // (發(fā)光效果)圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設(shè)置圖形的陰影效果。
shadowColor: "#fff", // 陰影顏色。支持的格式同color。
},
emphasis: { // 高亮的 儀表盤(pán)指針樣式
itemStyle: {
//高亮 和正常 兩者具有同樣的配置項(xiàng),只是在不同狀態(tài)下配置項(xiàng)的值不同。
}
},
title: { // 儀表盤(pán)標(biāo)題。
show: true, // 是否顯示標(biāo)題,默認(rèn) true。
offsetCenter: [0,"20%"],//相對(duì)于儀表盤(pán)中心的偏移位置，數(shù)組第一項(xiàng)是水平方向的偏移，第二項(xiàng)是垂直方向的偏移?？梢允墙^對(duì)的數(shù)值，也可以是相對(duì)于儀表盤(pán)半徑的百分比。
color: "#fff", // 文字的顏色,默認(rèn) #333。
fontSize: 20, // 文字的字體大小,默認(rèn) 15。
},
detail: { // 儀表盤(pán)詳情，用于顯示數(shù)據(jù)。
show: true, // 是否顯示詳情,默認(rèn) true。
offsetCenter: [0,"50%"],// 相對(duì)于儀表盤(pán)中心的偏移位置，數(shù)組第一項(xiàng)是水平方向的偏移，第二項(xiàng)是垂直方向的偏移?？梢允墙^對(duì)的數(shù)值，也可以是相對(duì)于儀表盤(pán)半徑的百分比。
color: "auto", // 文字的顏色,默認(rèn) auto。
fontSize: 30, // 文字的字體大小,默認(rèn) 15。
formatter: "{value}%", // 格式化函數(shù)或者字符串
},
data: data1
}
]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表
chart1.setOption(option)
</script>
如圖所示這樣的儀表盤(pán)：
儀表盤(pán)配置
