使用e-chart 生成图形报表

页面显示

<div id="main" style="width: 800px;height:400px;"></div>

JS生成图表

<script type="text/javascript">
$(function(){
	$.getJSON("PillarServlet?flag=purchaseChart",{},function(data){
		var arr1 = [];
		var arr2 = [];
	/* 	var jsonstr= JSON.stringify(data);
		var str=JSON.parse(jsonstr) */
		console.log(data)
		for(i=0;i<data.length;i++){
            arr1.push(parseInt(data[i].res_price));
          }
        for(i=0;i<data.length;i++){
              arr2.push(data[i].purchase_date);
          }
        /* console.log(arr1)
        console.log(arr2) */
		var myChart = echarts.init(document.getElementById(‘main‘));
        option = {
        	    title: {
        	        text: ‘一年内每月进货经费‘,
        	        subtext: ‘进货统计‘
        	    },
        	    tooltip: {
        	        trigger: ‘axis‘
        	    },
        	    legend: {
        	        data:[‘经费‘]
        	    },
        	    toolbox: {
        	        show: true,
        	        feature: {
        	            dataZoom: {
        	                yAxisIndex: ‘none‘
        	            },
        	            dataView: {readOnly: false},
        	            magicType: {type: [‘line‘, ‘bar‘]},
        	            restore: {},
        	            saveAsImage: {}
        	        }
        	    },
        	    xAxis:  {
        	        type: ‘category‘,
        	        boundaryGap: false,
        	        data:arr2
        	    },
        	    yAxis: {
        	        type: ‘value‘,
        	        axisLabel: {
        	            formatter: ‘{value} 元‘
        	        }
        	    },
        	    series: [
        	        {
        	            name:‘当月经费‘,
        	            type:‘line‘,
        	            data:arr1,
        	            markPoint: {
        	                data: [
        	                    {type: ‘max‘, name: ‘最大值‘},
        	                    {type: ‘min‘, name: ‘最小值‘}
        	                ]
        	            },
        	            markLine: {
        	                data: [
        	                    {type: ‘average‘, name: ‘平均值‘}
        	                ]
        	            }
        	        }
        	    ],
        	    backgroundColor:‘#F7F8F9‘
        	};
		myChart.setOption(option);	
	})
})
</script>

注意：json格式数据

使用e-chart 生成图形报表

原文：http://12418986.blog.51cto.com/12408986/1889284