前端echarts基本图标样式展示

需要引入echarts的js包

html页面代码
 

 <div id="barhours" style="align:center; height:500px; width:95%;"></div>

javascript代码

var myChart1= echarts.init(document.getElementById('barhours'), 'macarons');
var option1 = {
		color:['Red','orange','#FDE11C','green','#1387F4','purple'],//这里设置柱状图颜色
		    title: {
		    left:'5%',
	        text:  ['图标'],//这里是图表标题名字  
	        backgroundColor:'#fff',
	        textStyle:{ 
	        	fontSize:12,
	        }
	    },
	    tooltip: {
	        trigger: 'axis',
	        backgroundColor:'#636363',
	        formatter: function (params) {//在这个方法里的效果：鼠标放入柱状图时需显示的数据
                //这里我是用的循环来做的操作
	        	var res="<div><p>"+params[0].name+"</p></div>";
	        	var num = 0;
	        	for(var i=0;i<params.length;i++){
        		num = num+params[i].data;
	        	}
	        	for(var i=0;i<params.length;i++){
        		res+='<p>'+params[i].seriesName+""+params[i].data+""+'</p>';
	        	}
	        	res+='<p>'+"总:"+num+'</p>';
        	return res;
	        	}  
	    },
	    legend: {
	    	textStyle: { //图例文字的样式
            fontSize: 9
        },
	        data:['0-100','100-500','500-1000','1000-2000','2000-10000','10000+']//这里与上面设置的color属性要对应
	    },
	    /*  grid: {
	        left: '10%',
	        right: '10%',
	        bottom: '13%',
	        top:'20%',
	        containLabel: true
	    },   */
	    
	    xAxis: {
	    	  name: 'X轴',
	         type: 'category',
		     boundaryGap: true,
		     axisLabel: {  
		    	   interval:0,  
		    	  // rotate:21 
		    	},
		     data: []
	    },
	    yAxis: {
	        type: 'value',
	        name: 'Y轴',
	        offset: 1,
	        splitNumber: 5,
	        axisLabel: {}
	    },
	     toolbox: {
	    	            show : true,
	    	            feature : {
	    	                mark : {show: true},
	    	                dataView : {show: true, readOnly: false},
	    	                magicType : {show: true, type: ['line', 'bar']},
	    	                restore : {show: true},
	    	                saveAsImage : {show: true}
	    	            }
	    	 },  
	    series: [{//在这里设置图标的数据显示
	 			name:'name1',
	            type:'bar',
	            stack: 'AB',
	            itemStyle : { normal: {label: {show: false}}},
	            barWidth:20,
	           data:[]
	       	  },{
	 			name:'name2',
	            type:'bar',
	            stack: 'AB',
	            barGap: '-100%',
	            barCategoryGap:'10',
	            barWidth:20,
	            itemStyle : { normal: {label: {show: false}}}, 
	            data:[]
	       	  },{
		 			name:'name3',
		            type:'bar',
		            stack: 'AB',
		            barGap: '-100%',
		            barCategoryGap:'10',
		            barWidth:20,
		            itemStyle : { normal: {label: {show: false}}}, 
		            data:[]
		       	  },{
			 			name:'name4',
			            type:'bar',
			            stack: 'AB',
			            barGap: '-100%',
			            barCategoryGap:'10',
			            barWidth:20,
			            itemStyle : { normal: {label: {show: false}}}, 
			            data:[]
			       	  },{
				 			name:'name5',
				            type:'bar',
				            stack: 'AB',
				            barGap: '-100%',
				            barCategoryGap:'10',
				            barWidth:20,
				            itemStyle : { normal: {label: {show: false}}}, 
				            data:[]
				       	  },{
					 			name:'name6',
					            type:'bar',
					            stack: 'AB',
					            barGap: '-100%',
					            barCategoryGap:'10',
					            barWidth:20,
					            itemStyle : { normal: {label: {show: false}}}, 
					            data:[]
					       	  }]
		};
$(function(){//页面启动加载
		onsize();
		myChart1.setOption(option1);
	    submit();
});
window.onresize = function(){
		onsize();
	}
function onsize(){
	 var h= $(window).height()-20;
  	 var w= $("#maxdiv").width(); 
  	myChart1.resize();
}
 function submit(){
	jQuery.ajax({
        "async":true,  //异步加载
        "data":{}, //参数json格式
        //"type":"POST",//提交方式
        "url":"",
        "dataType":"json",
         "success":function(res){
       	  //重置option中的data数据，为了避免冲突
   		   option1.series[0].data=[];
		   option1.series[1].data=[];
		   option1.series[2].data=[];
		   option1.series[3].data=[];
		   option1.series[4].data=[];
		   option1.series[5].data=[];
        	  //遍历数据
        	  if(res.result != null){
			   $.each(res.result, function(index, element) {
				   option1.xAxis.name="";
				   option1.xAxis.data[i]="";
				   option1.series[0].data[i]=element['后台返回参数名'];
				   option1.series[1].data[i]=element['后台返回参数名'];
				   option1.series[2].data[i]=element['后台返回参数名'];
				   option1.series[3].data[i]=element['后台返回参数名'];
				   option1.series[4].data[i]=element['后台返回参数名'];
				   option1.series[5].data[i]=element['后台返回参数名'];
			}) 
			}
			}
      	  myChart1.setOption(option1);
       }
      });
}