百度Echarts使用

百度Echarts使用
1.查看Echarts文档
https://www.echartsjs.com/zh/index.html

2.引入自己需要的示例图形

option = {
    title: {
        text: '堆叠区域图'
    },
    tooltip : {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            areaStyle: {},
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            areaStyle: {},
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            areaStyle: {},
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            areaStyle: {normal: {}},
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

3.jsp页面调整图形位置大小

<div class="left div_any02" style="width:100%;">
            <div class="div_any_child" style="width:99%;position:relative;height:65%">
                <div class="div_any_title"><img src="${pageContext.request.contextPath}/images/title_3.png">集团员工人数增加趋势(%)</div>
                <p id="sortChart1" style="width:97.5%;height:95%;display: inline-block;padding-left: 0.25%;padding-top:4.2%"></p>
            </div>
        </div>

4.js中请求数据

function init(){
	  $.ajax({
	      url : 'echarts/personOfTowYears',
	      async : false,
	      cache : false,
	      success: function(responseText) {
	          //请求成功时处理
	    	  var agebar = echarts.init(document.getElementById('agebar'));
	    	  var responseText = eval('(' + responseText + ')'); 
	            var lastall = responseText.lastall;
	            var nowall = responseText.nowall;
	            var times = responseText.times;
	            agebar.setOption({
	        		tooltip : {
	                    trigger: 'axis',
	                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
	                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	                    }
	                },
	                color:['#4472C5','#ED7C30'],
	                legend: {
                  	  textStyle : {
                  		  color : '#2e2e2e',
                  		  fontSize : 15,
                  		  fontWeight : 'bolder'
                        },
	                    data:["去年","今年"]
	                },
	                calculable : true,
	                grid: {
	                    left: '3%',
	                    right: '6%',
	                    bottom: '3%',
	                    containLabel: true
	                },
	                xAxis : [
	                    {	
	                    	name:'月份',
	                    	nameTextStyle:{
		                      	  color : '#2e2e2e',
		                  		  fontSize : 15,
		                  		  fontWeight : 'bolder'
		                        },
	                        type : 'category',
	                        data : times,
	                        axisLabel: {
	            				  show: true,
	            				  interval: 'auto',
	            				  inside: false,
	            				  margin: 20,
	            				  formatter: null,
	            				  showMinLabel: null,
	            				  showMaxLabel: null,
	            				  textStyle : {
	            					  color : '#2e2e2e',
	            					  fontSize : 18,
	            					  fontWeight : 'bolder'
	            				  }
	            			  }
	                    }
	                ],
	                yAxis : [
	                    {
	                    	name:'人数',
	                    	nameTextStyle:{
	                      	  color : '#2e2e2e',
	                  		  fontSize : 15,
	                  		  fontWeight : 'bolder'
	                        },
	                        type : 'value',
	                        axisLabel: {
	                        	show: true,
	                        	interval: 'auto',
	                        	inside: false,
	                        	  textStyle : {
	                        		  color : '#2e2e2e',
	                        		  fontSize : 15,
	                        		  fontWeight : 'bolder'
	                        	  }
	                        	}
	                    }
	                ],
	                series : [
	                    {
	                        name:'去年',
	                        type:'line',
	                        label: {
      						  normal: {
      							  color : '#2e2e2e',
      							  fontSize : 16,
      							  fontWeight : 'bolder',
      							  show: true,
      							  position: 'top'
      						  }
      					  },
	                      data:lastall
	                    },{
	                        name:'今年',
	                        type:'line',
	                        label: {
      						  normal: {
      							  color : '#2e2e2e',
      							  fontSize : 16,
      							  fontWeight : 'bolder',
      							  show: true,
      							  position: 'top'
      						  }
      					  },
	                      data:nowall
	                    }
	                ]
	            	});
	      }
	  });
}

5.效果图