纯后端生成ECharts图片并下载成word java echarts生成图表

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

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

以下是生成饼图的代码：

1. function
2. var a = new
3. var b = new
4. 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. 'http://192.168.80.3:8080/PNSS/build/dist/'
15.             }  
16.         });  
17.   
18. // 使用
19. '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
28.                 title : {  
29. '各套餐销售比例',  
30. 'center'
31.                 },  
32.                 tooltip : {  
33. 'item',  
34. "{a} <br/>{b} : {c} ({d}%)"
35.                 },  
36.                 legend : {  
37. 'vertical',  
38. 'left',  
39.                     data : a  
40.                 },  
41.                 toolbox : {  
42. true,  
43.                     feature : {  
44.                         mark : {  
45. true
46.                         },  
47.                         dataView : {  
48. true,  
49. false
50.                         },  
51.                         magicType : {  
52. true,  
53. 'pie', 'funnel'
54.                             option : {  
55.                                 funnel : {  
56. '25%',  
57. '50%',  
58. 'left',  
59.                                     max : 1548  
60.                                 }  
61.                             }  
62.                         },  
63.                         restore : {  
64. true
65.                         },  
66.                         saveAsImage : {  
67. true
68.                         }  
69.                     }  
70.                 },  
71. true,  
72.                 series : [ {  
73. '销售量',  
74. 'pie',  
75. '55%',  
76. '50%', '60%'
77.                     data :b   
78.                 } ]  
79.             };  
80. // 为echarts对象加载数据 
81.             myChart.setOption(option);  
82. //myChart1.setOption(option1);
83.         });  
84.         }

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

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

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

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

 

接下来配置

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

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

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

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

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

引入echarts的js库

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

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

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

1. function
2. var a = new
3. var b = new
4. function(i,n){  
5.                 a[i] = n.name;  
6.                 b[i] =  n.power;  
7.             });  
8.               
9.         require.config({  
10.             paths : {  
11. 'http://192.168.80.3:8080/PNSS/build/dist/'
12.             }  
13.         });  
14.   
15. // 使用
16. 'echarts',   
17. 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
18.                   ],   
19.                     
20. function(echarts) {  
21. // 基于准备好的dom，初始化echarts图表
22. var myChart = echarts.init(document.getElementById('main1'));  
23. var
24.                     title : {  
25. '业务员营业额',  
26. 'center'
27.                     },  
28.                      tooltip: {  
29. true
30.                         },  
31.                         legend: {  
32. '业务员营业额(元)'],  
33. 'left'
34.                         },  
35.                         xAxis : [  
36.                             {  
37. 'category',  
38.                                 data : a  
39.                             }  
40.                         ],  
41.                         yAxis : [  
42.                             {  
43. '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.         }