正文
Echarts动态数据显示
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
自己慢慢摸索出来的，留着以后可能会用到
一、先引入jquery，再引入echarts.js
二、配置容器
三、配置路径和数据选项等
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: '/scripts/dist'
}
}); // 使用
require(
[
'echarts',
'echarts/chart/line', // 使用直线图就加载line模块，按需加载
'echarts/chart/bar'
],
function(ec){
var myChart=ec.init(document.getElementById('main'));
var option = {
tooltip:{
trigger:'axis'
},
toolbox: {
show: true,
x:'right',
borderWidth:0,
feature:{
mark:{show:true},
dataView:{show:true,readOnly:false},
magicType:{show:true,type:['line','bar']},
restore:{show:true},
saveAsImage:{show:true}
}
},
calculable:true,
legend: {
data:['在线人数']
}, xAxis : [
{
name:'时间',
type : 'category',
data : []
}
],
yAxis : [
{
name:'人数',
type : 'value',
splitArea:{show:true}
}
],
series : [
{
name:"在线人数",
type:"line",
data:[],
markPoint:{
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值'}
]
},
markLine:{
data:[
{type:'average',name:'平均值'}
]
},
itemStyle:{
normal:{
label:{
show:true,
textStyle:{
color:'black'
}
}
}
}
}
]
};
var time=new Date();
$.getJSON("../../Ajax/GetChartData.aspx?time="+time,function(data){ //使用post，get都可以，但需要注明是json类型
$.each(data,function(num,val){});
var len=data.length;
var xarr=new Array();
var sarr=new Array();
for(var i=1;i<=len;i++){ //将json数据压入相应数组
xarr[i-1]=data[i-1].date;
sarr[i-1]=data[i-1].num;
};
option.xAxis[0].data=xarr;
option.series[0].data=sarr;
myChart.setOption(option)
});
}
);
</script>
