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

<div class="chart-pic">
			<div id="divMain_$commonName$" class="chart"></div>
		</div>
<!-- ECharts单文件引入 -->
<script type="text/javascript" src="<c:url value="/scripts/echarts/echarts.js"/>"></script>
<script type="text/javascript">
$.ajax({
//                 url:"${ctx}/pages/EgnChart/getDatasetById.do",
                url:"${ctx}/backoffice/Unitinfo/subJson.do",
                 async:false,
                 type:"post",
                 data:"widgetId="+widgetId+"&jsonset="+jsonset,
                 success: function(data){
                     ajaxData = data;
                     eval("setData_"+commonName+"()");
                 }
            });
 //设置数据
	function setData_$commonName$(){
		var xAxisDataJson_$commonName$ = [];
    	var seriesDataJson_$commonName$ = [];
		$.each(ajaxData,function(index,obj){
			xAxisDataJson_$commonName$.push(obj.name);
			seriesDataJson_$commonName$.push(obj.code);
		});
		// 路径配置
	    require.config({
	        paths: {
	            echarts: '/crsWebApp/scripts/echarts'
	        }
	    });
		require(
		    [
		        'echarts',
	            'echarts/chart/bar'
		    ],
		    function(ec){
		    	// 基于准备好的dom，初始化echarts图表
		        var myChart_$commonName$ = ec.init(document.getElementById('divMain_$commonName$'));
		     	// 为echarts对象加载数据 
		        myChart_$commonName$.setOption({
				    tooltip: {
				        trigger: 'item'
				    },
				    toolbox: {
				        show: true,
				        feature: {
				            saveAsImage: {show: true}
				        }
				    },
//		 		    calculable: true,
				    grid: {
				        borderWidth: 0,
				        x:20,//直角坐标系内绘图网格左上角横坐标
				        x2:20,
				        y: 30,
				        y2: 30
				    },
				    xAxis: [
				        {
				            type: 'category',
				            show: false,
				            data: xAxisDataJson_$commonName$,
				            axisLabel:{
				            	interval:0,//X坐标显示内容非自动
				            	textStyle:{
					            	fontSize:11
					            }
				            }
				        }
				    ],
				    yAxis: [
				        {
				            type: 'value',
				            show: true
				        }
				    ],
				    series: [
				        {
				            name: '$chartTitle$',
				            type: 'bar',
				            itemStyle: {
				                normal: {
				                    color: function(params) {
				                        var colorList = [
				                          '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
				                           '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
				                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
				                        ];
				                        return colorList[params.dataIndex]
				                    },
				                    label: {
				                        show: true,
				                        position: 'top',
				                        formatter: '{b}\n{c}',
				                        textStyle : {
		                                    fontSize : 10,
		                                }
				                    }
				                }
				            },
				            data: seriesDataJson_$commonName$
				        }
				    ]
				}); 
		        //自适应大小
		        window.onresize = myChart_$commonName$.resize;
		    }
		);
	}
</script>