实例1
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>仓库温度表</title>
<script type="text/javascript" src="/admin/src/js/jquery.js"></script>
<script type="text/javascript" src="/admin/src/js/jq_ui.min.js"></script>
<!--导入echartsjs-->
<script src="../js/echarts.common.min.js" type="text/javascript"></script>
</head>
<body>
<div id="main" style="width: 1300px; height: 600px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '仓库温湿度动态表'
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
}
},
legend: {
data: ['温度', '湿度']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '温度',
type: 'bar',
data: []
},
{
name: '温度',
type: 'bar',
data: []
}],
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var times = []; //时间数组（实际用来盛放X轴坐标值）
var Tems = []; //温度数组（实际用来盛放Y坐标值）
var Tums = []; //湿度数组（实际用来盛放Y坐标值）
var LOGGER_SN = "LOGS_HS320BI013";
setInterval(function () {
$.ajax({
type: "post",
async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url: '/Common/commonServices.ashx?Module=ShowDeptTemChart', //请求页面的URL，此页面即为上面所述提供JSON数据的页面，传递参数ShowChart，后台解析并调用相应的函数
data: { "LOGGER_SN": LOGGER_SN },
dataType: "json", //返回数据形式为json
async: false, //是否为异步加载，true为异步，false为同步
success: function (result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result.d.success == 1) {
times = [];
Tems = [];
Tums = [];
for (var i = 0; i < result.d.list.length; i++) {
times.push(result.d.list[i].Time); //挨个取出时间并填入类别数组
Tems.push(result.d.list[i].Temperature); //挨个取出温度并填入销量数组
Tums.push(result.d.list[i].Tumidity); //挨个取出湿度并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: times
},
series: [{
// 根据名字对应到相应的系列
type: 'line',
name: '温度',
data: Tems
},
{
// 根据名字对应到相应的系列
type: 'line',
name: '湿度',
data: Tums
}
]
});
}
},
error: function (errorMsg) {
//请求失败时执行该函数
//alert("图表请求数据失败!");
myChart.hideLoading();
}
})
}, 5000);
</script>
</body>
</html>
image.png
同样的，我们换一个图表显示
<body>
<div id="main" style="width: 1300px; height: 600px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
option = {
tooltip: {
formatter: "{a} <br/>{c} {b}"
},
toolbox: {
show: true,
feature: {
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: '温度',
type: 'gauge',
z: 3,
min: 0,
max: 50,
splitNumber: 5,
radius: '50%',
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 10
}
},
axisTick: { // 坐标轴小标记
length: 15, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length: 20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
axisLabel: {
backgroundColor: 'auto',
borderRadius: 2,
color: '#eee',
padding: 3,
textShadowBlur: 2,
textShadowOffsetX: 1,
textShadowOffsetY: 1,
textShadowColor: '#222'
},
title: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic'
},
detail: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
formatter: function (value) {
value = (value + '').split('.');
value.length < 2 && (value.push('00'));
return ('00' + value[0]).slice(-2)
+ '.' + (value[1] + '00').slice(0, 2);
},
fontWeight: 'bolder',
borderRadius: 3,
backgroundColor: '#444',
borderColor: '#aaa',
shadowBlur: 5,
shadowColor: '#333',
shadowOffsetX: 0,
shadowOffsetY: 3,
borderWidth: 2,
textBorderColor: '#000',
textBorderWidth: 2,
textShadowBlur: 2,
textShadowColor: '#fff',
textShadowOffsetX: 0,
textShadowOffsetY: 0,
fontFamily: 'Arial',
width: 100,
color: '#eee',
rich: {}
},
data: [{ value: 40, name: '℃' }]
},
{
name: '湿度',
type: 'gauge',
center: ['30%', '55%'], // 默认全局居中
radius: '45%',
min: 0,
max: 100,
endAngle: 45,
splitNumber: 5,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 8
}
},
axisTick: { // 坐标轴小标记
length: 12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length: 20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer: {
width: 5
},
title: {
offsetCenter: [0, '-30%'], // x, y，单位px
},
detail: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder'
},
data: [{ value: 1.5, name: 'RH' }]
}
]
};
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
//var times = []; //时间数组（实际用来盛放X轴坐标值）
//var Tems = []; //温度数组（实际用来盛放Y坐标值）
//var Tums = []; //湿度数组（实际用来盛放Y坐标值）
var LOGGER_SN = "LOGS_HS320BI013";
setInterval(function () {
$.ajax({
type: "post",
async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url: '/Common/commonServices.ashx?Module=ShowDeptTemChart', //请求页面的URL，此页面即为上面所述提供JSON数据的页面，传递参数ShowChart，后台解析并调用相应的函数
data: { "LOGGER_SN": LOGGER_SN },
dataType: "json", //返回数据形式为json
async: false, //是否为异步加载，true为异步，false为同步
success: function (result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result.d.success == 1) {
//times = [];
//Tems = [];
//Tums = [];
//for (var i = 0; i < result.d.list.length; i++) {
// times.push(result.d.list[i].Time); //挨个取出时间并填入类别数组
// Tems.push(result.d.list[i].Temperature); //挨个取出温度并填入销量数组
// Tums.push(result.d.list[i].Tumidity); //挨个取出湿度并填入销量数组
//}
myChart.hideLoading(); //隐藏加载动画
option.series[0].data[0].value = result.d.list[0].Temperature;
option.series[1].data[0].value = result.d.list[0].Tumidity;
myChart.setOption(option, true);
}
},
error: function (errorMsg) {
//请求失败时执行该函数
//alert("图表请求数据失败!");
myChart.hideLoading();
}
})
}, 5000);
</script>
</body>
image.png
