Echarts -- 分类柱状图、设置各类目图例

Echarts – 柱状图 分类

本次实现的 echarts 更以往有所不同，柱状图的分类情况：

每个柱状代表着不同的类目，同时通过 legend 来设置该类目是否展示。

熟悉 echarts 配置项

首先来熟悉一下 echarts 各个部分的配置项

对echarts配置不太熟悉的情况下 可以参考 echarts 的配置项手册 ，通过各个项的配置调整图表的整体样式

/ 指定图表的配置项和数据
        var option = {
   
        	//--------------    标题 title  ----------------   
            title: {
   					         	
                text: '主标题',                
                textStyle:{
   					//---主标题内容样式	
                	color:'#fff'
                },
                subtext:'副标题',			//---副标题内容样式
                subtextStyle:{
   
                	color:'#bbb'            	
                },
                padding:[0,0,100,100]				//---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位
            },

           	//----------------   图例 legend  -----------------
            legend: {
   
            	type:'plain',				//----图例类型，默认为'plain'，当图例很多时可使用'scroll'
            	top:'1%',					//----图例相对容器位置,top\bottom\left\right           	
            	selected:{
   
            		'销量':true,			//----图例选择,图形加载出来会显示选择的图例，默认为true
            	},
            	textStyle:{
   					//----图例内容样式
            		color:'#fff',				//---所有图例的字体颜色
            		//backgroundColor:'black',	//---所有图例的字体背景色
            	},           	
            	tooltip:{
   					//图例提示框，默认不显示
            		show:true,
            		color:'red',
            	},
                data:[						//----图例内容
                	{
   
                		name:'销量',
                		icon:'circle',			//----图例的外框样式
                		textStyle:{
   
                			color:'#fff',		//----单独设置某一个图例的颜色
                			//backgroundColor:'black',//---单独设置某一个图例的字体背景色
                		}
                	}，
                    {
   
                		name:'哈哈哈',
                         icon: 'image://' + imgSrc2 + '',  //----自定义图例来源于 url
                		textStyle:{
   
                			color:'#fff',		//----单独设置某一个图例的颜色
                			//backgroundColor:'black',//---单独设置某一个图例的字体背景色
                		}
                	}
                ],						
            },

            //--------------   提示框 -----------------
            tooltip: {
   
            	show:true,					//---是否显示提示框,默认为true
            	trigger:'item',				//---数据项图形触发
            	axisPointer:{
   				//---指示样式
            		type:'shadow',		
            		axis:'auto',	

            	},
            	padding:5,
            	textStyle:{
   					//---提示框内容样式
            		color:"#fff",			
            	},
            },

            //-------------  grid区域  ----------------
            grid:{
   
            	show:false,					//---是否显示直角坐标系网格
            	top:80,						//---相对位置，top\bottom\left\right  
            	containLabel:false,			//---grid 区域是否包含坐标轴的刻度标签
            	tooltip:{
   					//---鼠标焦点放在图形上，产生的提示框
            		show:true,	
            		trigger:'item',			//---触发类型
            		textStyle:{
   
            			color:'#666',
            		},
            	}
            },

            //-------------   x轴   -------------------
            xAxis: {
   
            	show:true,					//---是否显示
            	position:'bottom',			//---x轴位置
            	offset:0,					//---x轴相对于默认位置的偏移
            	type:'category',			//---轴类型，默认'category'
            	name:'月份',				//---轴名称
            	nameLocation:'end',			//---轴名称相对位置
            	nameTextStyle:{
   				//---坐标轴名称样式
            		color:"#fff",
            		padding:[5,0,0,-5],	//---坐标轴名称相对位置
            	},
            	nameGap:15,					//---坐标轴名称与轴线之间的距离
            	//nameRotate:270,			//---坐标轴名字旋转
            	
            	axisLine:{
   					//---坐标轴 轴线
            		show:true,					//---是否显示
            		
            		//------------------- 箭头 -------------------------
            		symbol:['none', 'arrow'],	//---是否显示轴线箭头
            		symbolSize:[8, 8] ,			//---箭头大小
            		symbolOffset:[0,7],			//---箭头位置
            		
            		//------------------- 线 -------------------------
            		lineStyle:{
   
            			color:'#fff',
            			width:1,
            			type:'solid',
            		},
            	},
            	axisTick:{
   					//---坐标轴 刻度
            		show:true,					//---是否显示
            		inside:true,				//---是否朝内
            		lengt:3,					//---长度
            		lineStyle:{
   
            			//color:'red',			//---默认取轴线的颜色
            			width:1