使用Echarts生成图表

Echarts首页：http://echarts.baidu.com/index.html

Echarts是一款非常好用的图表生成工具，这里以常用的饼图和柱状图为例讲一下Echarts的简单使用

以下是生成饼图的代码：

[javascript] view plain copy

1. function aa(json){  
2.             var a = new Array();  
3.             var b = new Array();  
4.             $.each(json,function(i,n){  
5.                 a[i] = n.name;  
6.                 b[i] = {  
7.                         value : n.power,  
8.                         name : n.name  
9.                     }  
10.             });  
11.               
12.         require.config({  
13.             paths : {  
14.                 echarts : 'http://192.168.80.3:8080/PNSS/build/dist/'  
15.             }  
16.         });  
17.   
18.         // 使用  
19.         require([ 'echarts',   
20.                   'echarts/chart/pie' // 使用饼图就加载pie模块，按需加载  
21.                   ],   
22.                     
23.         function(echarts) {  
24.             // 基于准备好的dom，初始化echarts图表  
25.             var myChart = echarts.init(document.getElementById('main'));  
26.             var myChart1 = echarts.init(document.getElementById('main1'));  
27.             var option = {  
28.                 title : {  
29.                     text : '各套餐销售比例',  
30.                     x : 'center'  
31.                 },  
32.                 tooltip : {  
33.                     trigger : 'item',  
34.                     formatter : "{a} <br/>{b} : {c} ({d}%)"  
35.                 },  
36.                 legend : {  
37.                     orient : 'vertical',  
38.                     x : 'left',  
39.                     data : a  
40.                 },  
41.                 toolbox : {  
42.                     show : true,  
43.                     feature : {  
44.                         mark : {  
45.                             show : true  
46.                         },  
47.                         dataView : {  
48.                             show : true,  
49.                             readOnly : false  
50.                         },  
51.                         magicType : {  
52.                             show : true,  
53.                             type : [ 'pie', 'funnel' ],  
54.                             option : {  
55.                                 funnel : {  
56.                                     x : '25%',  
57.                                     width : '50%',  
58.                                     funnelAlign : 'left',  
59.                                     max : 1548  
60.                                 }  
61.                             }  
62.                         },  
63.                         restore : {  
64.                             show : true  
65.                         },  
66.                         saveAsImage : {  
67.                             show : true  
68.                         }  
69.                     }  
70.                 },  
71.                 calculable : true,  
72.                 series : [ {  
73.                     name : '销售量',  
74.                     type : 'pie',  
75.                     radius : '55%',  
76.                     center : [ '50%', '60%' ],  
77.                     data :b   
78.                 } ]  
79.             };  
80.             // 为echarts对象加载数据   
81.             myChart.setOption(option);  
82.             //myChart1.setOption(option1);  
83.         });  
84.         }  

在实际项目中我们需要的数据从后台数据库获取的

[javascript] view plain copy

1. function aa(json) //json是从后台获取的json数据  

然后定义两个数组来储存从json中解析的数据

[javascript] view plain copy

1.                      var a = new Array();  
2. var b = new Array();  
3. $.each(json,function(i,n){  
4.     a[i] = n.name;  
5.     b[i] = {  
6.             value : n.power,  
7.             name : n.name  
8.         };  
9. });  

接下来配置

[javascript] view plain copy

1. require.config({  
2.             paths : {  
3.                 echarts : 'http://192.168.80.3:8080/PNSS/build/dist/'  //这个是你服务器下echarts的路径，如果你写的是静态html文件，  
4.                                                            //                那你可以使用'http://echarts.baidu.com/build/dist'官方的服务器路径  
5.             }  
6.         });  
7.   
8.         // 使用  
9.         require([ 'echarts',   
10.                   'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载  
11.                   ],   
12.                     

将a，b两个数组放到配置文件中

[javascript] view plain copy

1. series : [ {  
2.                     name : '销售量',  
3.                     type : 'pie',  
4.                     radius : '55%',  
5.                     center : [ '50%', '60%' ],  
6.                     data :b   
7.                 } ]  
8.   
9. legend : {  
10.                     orient : 'vertical',  
11.                     x : 'left',  
12.                     data : a  
13.                 },  

然后再定义一个id为‘main’的div

[html] view plain copy

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

引入echarts的js库

[html] view plain copy

1. <script src="http://192.168.80.3:8080/PNSS/build/dist/echarts.js"></script>  

做完这些就可以生成饼图了。

下面贴上柱状图的代码，配置方法与上面一样

[javascript] view plain copy

1. function bb(json1){  
2.             var a = new Array();  
3.             var b = new Array();  
4.             $.each(json1,function(i,n){  
5.                 a[i] = n.name;  
6.                 b[i] =  n.power;  
7.             });  
8.               
9.         require.config({  
10.             paths : {  
11.                 echarts : 'http://192.168.80.3:8080/PNSS/build/dist/'  
12.             }  
13.         });  
14.   
15.         // 使用  
16.         require([ 'echarts',   
17.                   'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载  
18.                   ],   
19.                     
20.         function(echarts) {  
21.             // 基于准备好的dom，初始化echarts图表  
22.             var myChart = echarts.init(document.getElementById('main1'));  
23.             var option = {  
24.                     title : {  
25.                         text : '业务员营业额',  
26.                         x : 'center'  
27.                     },  
28.                      tooltip: {  
29.                             show: true  
30.                         },  
31.                         legend: {  
32.                             data:['业务员营业额(元)'],  
33.                             x:'left'  
34.                         },  
35.                         xAxis : [  
36.                             {  
37.                                 type : 'category',  
38.                                 data : a  
39.                             }  
40.                         ],  
41.                         yAxis : [  
42.                             {  
43.                                 type : 'value'  
44.                             }  
45.                         ],  
46.                         series : [  
47.                             {  
48.                                 "name":"业务员营业额(元)",  
49.                                 "type":"bar",  
50.                                 "data":b  
51.                             }  
52.                         ]  
53.             };  
54.             // 为echarts对象加载数据   
55.             myChart.setOption(option);  
56.         });  
57.         }