仪表盘踩坑
我采用的是单文件引入的方式来加载echarts图标也可以使用配置等方式详情参考文档，如果同学们要做出更加丰富的样式请参考文档配置手册
配置手册：http://echarts.baidu.com/opti...
引入js文件已经配置 echart图表环境文档：http://echarts.baidu.com/tuto...
下面上代码
html代码
<div id="main" style="width: 350px;height:350px; float: left;"></div>
<div id="main1" style="width: 350px;height:350px; float: left;"></div>
<div id="main2" style="width: 350px;height:350px; float: left;"></div>
<div id="main3" style="width: 350px;height:350px; margin-top: 20px; float: left;"></div>
<div id="main4" style="width: 350px;height:350px; margin-top: 20px; float: left;"></div>JS代码
<script type="text/javascript">
$(function() {
all();
});
//温度
function char_update_tem(datas) {
var myChart = echarts.init(document.getElementById('main'));
}
//气压
function chart_update_pre(data) {
var myChart = echarts.init(document.getElementById('main2'));
var option = {
tooltip: {
formatter: "{b} : {c}"
},
toolbox: {
show: true,
feature: {
mark: {
show: false
},
restore: {
show: false
},
saveAsImage: {
show: false
},
dataView: {
show: false
}
}
},
series: [{
name: '气压',
type: 'gauge',
radius: '50%',
min: 550,
max: 1050,
detail: {
formatter: '{value}',
fontSize: 3,
},
//表盘
axisLine: {
show: true,
lineStyle: {
width: 8
}
},
//分隔线
splitLine: {
show: true,
length: 8
},
axisTick: {
show: true,
},
axisLabel: {
show: true,
fontSize: 1,
},
itemStyle: {
normal: {
color: 'auto'
}
},
pointer: {
lenght: '20%',
width: 5
},
detail: {
formatter: '{value}',
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0,
fontFamily: 'Courier New',
fontSize: 10,
borderColor: '#ccc',
width: 60,
height: 50,
offsetCenter: [0, 50],
},
data: [{
value: data,
name: '气压',
}]
}]
};
myChart.setOption(option);
}
//风向
function char_update_wind(data) {
var myChart = echarts.init(document.getElementById('main1'));
// 指定图表的配置项和数据
option = {
tooltip: {
formatter: "{b} : {c}"
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [{
name: '风向',
type: 'gauge',
radius: "50%",
min: 0,
max: 360,
splitNumber: 20,
startAngle: 90,
endAngle: -270,
precision: 0,
axisLine: {
show: true,
lineStyle: {
width: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 5,
},
opacity: 0.5
},
splitLine: {
length: 2
},
axisTick: {
show: true,
length: 4
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
show: true,
formatter: function(v) {
switch(v + '') {
case '360':
return '北';
case '90':
return '东';
case '180':
return '南';
case '270':
return '西';
default:
return '';
}
},
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#333'
}
},
detail: {
formatter: '{value}',
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0,
fontFamily: 'Courier New',
fontSize: 10,
borderColor: '#ccc',
width: 60,
height: 50,
offsetCenter: [0, 10],
},
itemStyle: {
normal: {
color: 'auto'
}
},
pointer: {
lenght: '15%',
width: 5
},
data: [{
value: data,
name: '风向'
}]
}]
};
myChart.setOption(option);
};
//风速
function char_update_wind_speed(data) {
var myChart = echarts.init(document.getElementById("main3"));
var option = {
tooltip: {
formatter: "{b} : {c}"
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [{
type: 'gauge',
radius: '50%',
startAngle: 180,
endAngle: 0,
axisLine: {
show: true,
lineStyle: {
width: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
},
opacity: 0.5
},
splitLine: {
length: 10
},
axisTick: {
length: 4
},
pointer: {
lenght: '20%',
width: 5
},
detail: {
formatter: '{value}',
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0,
fontFamily: 'Courier New',
fontSize: 5,
borderColor: '#ccc',
width: 60,
height: 50,
offsetCenter: [0, 5],
},
data: [{
value: data,
name: '风速'
}]
}]
};
myChart.setOption(option);
}
function chart_update_rain(data) {
var myChart = echarts.init(document.getElementById("main4"));
var option = {
tooltip: {
formatter: "{a} <br/>{b} : {c}"
},
series: [{
type: 'gauge',
radius: '55%',
splitNumber: 10, // 分割段数，默认为5
startAngle: 180,
endAngle: 0,
axisLine: { // 坐标轴线
show: true,
lineStyle: {
width: 40,
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
},
opacity: 0.5
},
axisTick: { // 坐标轴小标记
show: false,
splitNumber: 10, // 每份split细分多少段
length: 20, // 属性length控制线长
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
formatter: function(e) {
},
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'auto'
}
},
splitLine: { // 分隔线
show: false, // 默认显示，属性show控制显示与否
length: 30, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
},
opcity: 0.2
},
pointer: {
width: 5,
length: '90%',
color: 'rgba(112, 135, 255, 0.8)'
},
title: {
show: true,
offsetCenter: [0, '-40%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder'
}
},
detail: {
formatter: '{value}',
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0,
fontFamily: 'Courier New',
fontSize: 5,
borderColor: '#ccc',
width: 60,
height: 50,
offsetCenter: [0, -40],
},
data: [{
value: data,
name: '雨量'
}]
}]
};
myChart.setOption(option);
}
function all() {
var user = jQuery.readCookie('user');
var auth = jQuery.readCookie('auth');
$.ajax({
type: "get",
url: "/inn/sensor/current.cgi?req=256,257,258,259,260,261&id=201728&sessionid=user:" + user + "%20auth:" + auth,
async: true,
dataType: 'json',
success: function(data) {
for(var i = 0; i < data.length; i++) {
var val = data[i].type;
switch(data[i].type) {
case "256":
char_update_tem();
break;
case "257":
//test(data[0].value);
break;
case "258":
char_update_wind_speed(data[2].value);
break;
case "259":
char_update_wind(data[3].value);
break;
case "260":
chart_update_pre(data[4].value / 100);
break;
case "261":
chart_update_rain(data[5].value);
break;
default:
break;
}
}
//chart_update(data);
}
});
}
// 基于准备好的dom，初始化echarts实例
</script>