自己慢慢摸索出来的,留着以后可能会用到
一、先引入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>
原文:http://www.cnblogs.com/Collision/p/4456197.html