基于echarts实现图表展示

[Author]: kwu

基于echarts实现图表展示

1、引用相关的js框架

[javascript] view plaincopy

1. <pre name="code" class="javascript"><script type="text/javascript" src="js/esl/esl.js"></script>  
2. <script type="text/javascript" src="js/echarts.js"></script>  
3. <script type="text/javascript" src="js/jquery.js"></script>  

2、创建一个div用来展示图表，需给定高度

[html] view plaincopy

1. <div id="main" style="height:800px"></div>  

3、配置路径及js的引用

[javascript] view plaincopy

1. // 路径配置  
2. require.config({  
3.     paths: {  
4.     echarts: 'js'  
5.     }  
6. });  
7.   
8. // 使用  
9. require(  
10. [  
11.     'echarts',  
12.     'echarts/chart/bar',  
13.     'echarts/chart/line'  
14. ],  

4、主要的js代码，这里实现的是一个堆积图

[javascript] view plaincopy

1. var option = {  
2. //设置标题  
3.     title:{  
4.     text:'',  
5.     subtext:''  
6.     },  
7.       tooltip : {  
8.       trigger: 'axis',  
9.       axisPointer : {            // 坐标轴指示器，坐标轴触发有效  
10.           type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'  
11.       }  
12.       },  
13.       legend: {  
14.       data:[]  
15.       },  
16.       toolbox: {  
17.       show : true,  
18.       feature : {  
19.           mark : {show: true},  
20.           dataView : {show: true, readOnly: false},  
21.           magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},  
22.           restore : {show: true},  
23.           saveAsImage : {show: true}  
24.       }  
25.       },  
26. calculable : true,  
27. yAxis : [  
28.      {  
29.          type : 'value'  
30.      }  
31.      ],  
32.      xAxis : [  
33.           {  
34.           type : 'category',  
35.           data : []  
36.           }  
37.       ],  
38. series : [  
39.       {  
40.           name:'',  
41.           type:'bar',  
42.           stack: '总量',  
43.           itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},  
44.           data:[]  
45.       },  
46.       {  
47.           name:'',  
48.           type:'bar',  
49.           stack: '总量',  
50.           itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},  
51.           data:[]  
52.       },  
53.       {  
54.           name:'',  
55.           type:'bar',  
56.           stack: '总量',  
57.           itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},  
58.           data:[]  
59.       },  
60.       {  
61.           name:'',  
62.           type:'bar',  
63.           stack: '总量',  
64.           itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},  
65.           data:[]  
66.       },  
67.       {  
68.           name:'',  
69.           type:'bar',  
70.           stack: '总量',  
71.           itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},  
72.           data:[]  
73.       },  
74.       {  
75.           name:'',  
76.           type:'bar',  
77.           stack: '总量',  
78.           itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},  
79.           data:[]  
80.       }  
81.           
82. ]  
83. };  

5、采用ajax动态加载数据

[javascript] view plaincopy

1. $.ajax({  
2. type:'get',//jquey是不支持post方式跨域的  
3. async:false,  
4. url:"http://10.130.2.245:9088/dailyAll?limit=25", //跨域请求的URL  
5. dataType:'jsonp',  
6. jsonp: "callback",//服务端用于接收callback调用的function名的参数    
7. success : function(result){    
8.     if (result) {  
9.        option.title.text = "("+result.titles+")堆积图";  
10.        option.title.subtext = result.titles;  
11.        option.legend.data = result.titles;  
12.          
13.        option.xAxis[0].data = result.days;  
14.          
15.        option.series[0].name = result.titles[0];  
16.        option.series[0].data = result.pvcnts;  
17.          
18.        option.series[1].name = result.titles[1];  
19.        option.series[1].data = result.hundsuncnts;  
20.          
21.        option.series[2].name = result.titles[2];  
22.        option.series[2].data = result.apputrackcnts;  
23.          
24.        option.series[3].name = result.titles[3];  
25.        option.series[3].data = result.utrackcnts;  
26.          
27.        option.series[4].name = result.titles[4];  
28.        option.series[4].data = result.mobilelogcnts;  
29.          
30.        option.series[5].name = result.titles[5];  
31.        option.series[5].data = result.dratiocnts;  
32.   
33.        myChart.setOption(option);  
34.     }  
35. },    
36. error:function(){    
37.     alert('fail');    
38. }   
39. });  

ajax通过restful的服务来交互数据，相关restful的开发，请参考本博客：

http://blog.csdn.net/bdchome/article/details/45937751

实现的效果图：