在這裏，演示的是引入兩個錶盤，那麼直接通過代碼來看吧...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- ECharts單文件引入 -->
<script src="js/dist/echarts.js"></script>
</head>
<body>
<!-- 爲ECharts準備具備大小（寬高）的Dom -->
<div id="temp" style="height:350px;width:500px"></div>
<div id="co" style="height:350px"></div>
</body>
<script type="text/javascript">
// 路徑配置
require.config({
paths: {
echarts: 'js/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/gauge' // 淺色儀表盤
],
SetEcharts
);
function SetEcharts(ec){
TempGauge(ec);
CoGauge(ec);
}
/*第一個*/
function TempGauge(ec) {
// 基於準備好的dom，初始化echarts圖表
var TempChart = ec.init(document.getElementById('temp'));
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}℃"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name:'當前溫度值',
type:'gauge',
splitNumber: 10, // 分割段數，默認爲5
axisLine: { // 座標軸線
lineStyle: { // 屬性lineStyle控制線條樣式
color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
width: 8
}
},
axisTick: { // 座標軸小標記
splitNumber: 10, // 每份split細分多少段
length :12, // 屬性length控制線長
lineStyle: { // 屬性lineStyle控制線條樣式
color: 'auto'
}
},
axisLabel: { // 座標軸文本標籤，詳見axis.axisLabel
textStyle: { // 其餘屬性默認使用全局文本樣式，詳見TEXTSTYLE
color: 'auto'
}
},
splitLine: { // 分隔線
show: true, // 默認顯示，屬性show控制顯示與否
length :30, // 屬性length控制線長
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
color: 'auto'
}
},
pointer : {
width : 5
},
title : {
show : true,
offsetCenter: [0, '-40%'], // x, y，單位px
textStyle: { // 其餘屬性默認使用全局文本樣式，詳見TEXTSTYLE
fontWeight: 'bolder'
}
},
detail : {
formatter:'{value}℃',
textStyle: { // 其餘屬性默認使用全局文本樣式，詳見TEXTSTYLE
color: 'auto',
fontWeight: 'bolder'
}
},
data:[{value: 50, name: '溫度(℃)'}]
}
]
};
TempChart.setOption(option);
}
/*第二個*/
function CoGauge(ec) {
// 基於準備好的dom，初始化echarts圖表
var CoChart = ec.init(document.getElementById('co'));
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}ppm"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name:'當前CO濃度值',
type:'gauge',
splitNumber: 10, // 分割段數，默認爲5
axisLine: { // 座標軸線
lineStyle: { // 屬性lineStyle控制線條樣式
color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
width: 8
}
},
axisTick: { // 座標軸小標記
splitNumber: 10, // 每份split細分多少段
length :12, // 屬性length控制線長
lineStyle: { // 屬性lineStyle控制線條樣式
color: 'auto'
}
},
axisLabel: { // 座標軸文本標籤，詳見axis.axisLabel
textStyle: { // 其餘屬性默認使用全局文本樣式，詳見TEXTSTYLE
color: 'auto'
}
},
splitLine: { // 分隔線
show: true, // 默認顯示，屬性show控制顯示與否
length :30, // 屬性length控制線長
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
color: 'auto'
}
},
pointer : {
width : 5
},
title : {
show : true,
offsetCenter: [0, '-40%'], // x, y，單位px
textStyle: { // 其餘屬性默認使用全局文本樣式，詳見TEXTSTYLE
fontWeight: 'bolder'
}
},
detail : {
formatter:'{value}ppm',
textStyle: { // 其餘屬性默認使用全局文本樣式，詳見TEXTSTYLE
color: 'auto',
fontWeight: 'bolder'
}
},
data:[{value: 50, name: 'CO(ppm)'}]
}
]
};
CoChart.setOption(option);
}
</script>
</html>