在自己捣鼓的 Task 应用中需要使用 图形化 Echarts 用来 展示 数据
网上也找了很久。最后 想到了一个 简单粗暴的方式来显示图形数据
演示地址：
https://task.baota.host/tuxing/1.php
使用中的源代码
<div id="tiwen" style="width:98%;height:250;"></div>
<script src="js/vendor-all.min.js"></script>
<script src="js/echarts-en.min.js"></script>
<script type="text/javascript">
$(function () {
tiwen();
function tiwen() {
var myChart = echarts.init(document.getElementById('tiwen'));
option = {
title:{
text:'103.45.69.117 延时实时数据统计演示 '
},
grid:{
x:35,
y:35,
x2:25,
y2:40,
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: [],
axisLabel: {
margin: 10,
color: '#777',
},
axisLine: {
lineStyle: {
color: 'rgba(107,107,107,1)',
}
},
},
yAxis: {
type: 'value',
splitNumber: 2,
scale:true,
maxInterval: 5000,
axisLabel: {
color: '#555',
margin: 6
},
axisLine: {
lineStyle: {
color: 'rgba(107,107,107,0.2)',
}
},
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(131,101,101,0.3)'
}
},
},
series: [{
name: '当前延时',
data: [],
type: 'line',
lineStyle: {
normal: {
width: 2,
color: {
type: 'linear',
colorStops: [{
offset: 0,
color: '#48D8BF' // 0% 处的颜色
}, {
offset: 1,
color: '#48D8BF' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
itemStyle: {
normal: {
color: '#48D8BF',
borderColor: "#5b92c9"
}
},
smooth: true
}]
};
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
function getVirtualStatus() {
$.get("shuju").done(function (data) {
if (data.code == 200) {
var createdate = data.createdate
var tiwen = data.tiwen
}else{
var createdate = ‘’
var tiwen =‘’
}
myChart.setOption({
xAxis: {
data: createdate
},
series: [{
data: tiwen
}]
});
});
}
getVirtualStatus();
setInterval(getVirtualStatus,2000);
}
})
</script>
