echarts 实例 （二：调用时，渲染）

1. <div class="chart-pic">  
2.             <div id="divMain_$commonName$" class="chart"></div>  
3.         </div>  
4. <!-- ECharts单文件引入 -->  
5. <script type="text/javascript" src="<c:url value="/scripts/echarts/echarts.js"/>"></script>  
6. <script type="text/javascript">  
7. $.ajax({  
8. //                 url:"${ctx}/pages/EgnChart/getDatasetById.do",  
9.                 url:"${ctx}/backoffice/Unitinfo/subJson.do",  
10.                  async:false,  
11.                  type:"post",  
12.                  data:"widgetId="+widgetId+"&jsonset="+jsonset,  
13.                  success: function(data){  
14.                      ajaxData = data;  
15.                      eval("setData_"+commonName+"()");  
16.                  }  
17.             });  
18.  //设置数据  
19.     function setData_$commonName$(){  
20.         var xAxisDataJson_$commonName$ = [];  
21.         var seriesDataJson_$commonName$ = [];  
22.         $.each(ajaxData,function(index,obj){  
23.             xAxisDataJson_$commonName$.push(obj.name);  
24.             seriesDataJson_$commonName$.push(obj.code);  
25.         });  
26.         // 路径配置  
27.         require.config({  
28.             paths: {  
29.                 echarts: '/crsWebApp/scripts/echarts'  
30.             }  
31.         });  
32.         require(  
33.             [  
34.                 'echarts',  
35.                 'echarts/chart/bar'  
36.             ],  
37.             function(ec){  
38.                 // 基于准备好的dom，初始化echarts图表  
39.                 var myChart_$commonName$ = ec.init(document.getElementById('divMain_$commonName$'));  
40.                 // 为echarts对象加载数据   
41.                 myChart_$commonName$.setOption({  
42.                     tooltip: {  
43.                         trigger: 'item'  
44.                     },  
45.                     toolbox: {  
46.                         show: true,  
47.                         feature: {  
48.                             saveAsImage: {show: true}  
49.                         }  
50.                     },  
51. //                  calculable: true,  
52.                     grid: {  
53.                         borderWidth: 0,  
54.                         x:20,//直角坐标系内绘图网格左上角横坐标  
55.                         x2:20,  
56.                         y: 30,  
57.                         y2: 30  
58.                     },  
59.                     xAxis: [  
60.                         {  
61.                             type: 'category',  
62.                             show: false,  
63.                             data: xAxisDataJson_$commonName$,  
64.                             axisLabel:{  
65.                                 interval:0,//X坐标显示内容非自动  
66.                                 textStyle:{  
67.                                     fontSize:11  
68.                                 }  
69.                             }  
70.                         }  
71.                     ],  
72.                     yAxis: [  
73.                         {  
74.                             type: 'value',  
75.                             show: true  
76.                         }  
77.                     ],  
78.                     series: [  
79.                         {  
80.                             name: '$chartTitle$',  
81.                             type: 'bar',  
82.                             itemStyle: {  
83.                                 normal: {  
84.                                     color: function(params) {  
85.                                         var colorList = [  
86.                                           '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',  
87.                                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',  
88.                                            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'  
89.                                         ];  
90.                                         return colorList[params.dataIndex]  
91.                                     },  
92.                                     label: {  
93.                                         show: true,  
94.                                         position: 'top',  
95.                                         formatter: '{b}\n{c}',  
96.                                         textStyle : {  
97.                                             fontSize : 10,  
98.                                         }  
99.                                     }  
100.                                 }  
101.                             },  
102.                             data: seriesDataJson_$commonName$  
103.                         }  
104.                     ]  
105.                 });   
106.                 //自适应大小  
107.                 window.onresize = myChart_$commonName$.resize;  
108.             }  
109.         );  
110.     }  
111. </script>