[ECharts] ECharts

加入ECharts文件:

引入模块加载器

<script src="../ECharts/js/esl.js"></script>

为模块加载器配置echarts的路径:

            require.config({
		        paths:{ 
		            echarts:'./../ECharts/js/echarts',
		            'echarts/chart/bar' : './../ECharts/js/echarts',
		            'echarts/chart/line': './../ECharts/js/echarts'
		        }
		    });

创建chart,将统计表格数据加入Chart:

              function createEChart(){
		require(
		        ['echarts','echarts/chart/bar','echarts/chart/line'],
		        function(ec) {
		            var myChart = ec.init(document.getElementById('main'));
		            var option = {
		            	color:["#3D9D02","#BBE822","#B1F0F1","#1CA6B0","#377BD7",
		            	       "#1004F7","#7326DB","#DE36F1","#1CF231","#9E5734"],
					    tooltip : {trigger: 'axis',axisPointer : {type : 'shadow'}},
					    legend: {data:[],y:"top",backgroundColor:"#ccc",borderWidth:2},
					    toolbox: {show : true,orient: 'vertical',x: 'right',y: 'center',backgroundColor:"#ddd",
					        feature : {mark : true,dataZoom : true, dataView : {readOnly: false},magicType:['line', 'bar'], restore : true,saveAsImage : true}},
					    calculable : true,
					    xAxis : [ { type : 'category',data : []}],
					    yAxis : [{type : 'value',splitArea : {show : true}}],
					    series : []};
		            
					option.xAxis[0].data = new Array();
					$("#listTable tr").slice(2,-1).find("td:eq(0)").each(function(){
						option.xAxis[0].data.push($(this).text());
					});
		            
		            option.series = new Array();
		            option.legend.data = new Array();
		            $("#listTable tr:eq(1) th:lt(5)").each(function(){
		            	option.legend.data.push($(this).text());
		            	option.series.push({name:$(this).text(),type:'bar',stack:$("#listTable tr:eq(0) th:eq(1)").text(),data:[]});
			    });
		            $("#listTable tr:eq(1) th").slice(6,-1).each(function(){
		            	option.legend.data.push($(this).text());
		            	option.series.push({name:$(this).text(),type:'bar',stack:$("#listTable tr:eq(0) th:eq(2)").text(),data:[]});
					});
		            
					$("#listTable tr").slice(2,-1).each(function(i){
						$(this).find("td").slice(1,6).each(function(j){
							option.series[j].data.push(parseFloat($(this).find("span").text()));
						});
						$(this).find("td").slice(7,-1).each(function(j){
							option.series[j+5].data.push(parseFloat($(this).find("span").text()));
						});
					});
					
		            myChart.setOption(option);
		        }
		    );
		}

效果预览