在这里,演示的是引入两个表盘,那么直接通过代码来看吧...
<!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>