Echarts柱状图配置项

let option = {
        	//标题
            title: {
                text: ''，
                textStyle: {
                    color: "#fff",
                    fontSize: 12
                  },
                  left: "center",//标题位置
            },
            //设置图表与容器的间距，可以设置px或者百分比
            grid:{
                top: '20',
                left: '20',
                right: '0',
                bottom: '20',
                containLabel: true
            },
            // 坐标轴指示器
           tooltip: {
                trigger: 'axis',//触发类型
                axisPointer: {
                    type: 'shadow',//鼠标移动上去的样式，有line和shadow两种
                },
                backgroundColor:"rgba(62,77,120,0.4)",
                padding: [10,20],
                extraCssText:'width:166px;height:58px;box-shadow:0px 2px 8px 0px rgba(0,0,0,0.15);', //额外的CSS样式            
                borderRadius:3,
                textStyle : {
                    color: 'rgba(0,0,0,0.45)',//文字颜色
                    fontSize: 12
                },
                position: function (p) {//位置
                    return [p[0], p[1]-60];
                },
                formatter:function(params){//自定义鼠标提示信息
                    var value="<span style='color:rgba(255,255,255,0.8);'>店铺数值：</span>"+params[0].data+ "<br/>";
                    value+="<span style='color:rgba(255,255,255,0.8);'>全市比值阈值：</span>"+'0.5';
                    return value;
                }
            }，
            //图例
            legend: {
                data:[{
                		name:'销量',
                		icon:"rect" //默认图例带有圆角，这样设置将不再有圆角
                	}]，
	            x: 'right', //图例居右显示
	            textStyle:{//图例文字的样式
	                color:'#686E81',
	            }，
	            icon:'image://./images/icon1.png'，//改变图例的图标为自定义图片，格式为'image://+icon文件地址'，其中image::后的//不能省略
            },
            //滚动轴
            dataZoom:  [{
                 show : true,  //是否显示
                 type: 'slider',//slider表示有滑动块的，inside表示内置的
                 realtime: true,
                 start: 0,//伸缩条开始位置
                 end: 50,//伸缩条结束位置
                 bottom:"auto",//组件离容器下侧的距离,'20%'
                 backgroundColor:"#fff",  //组件的背景颜色
                 fillerColor:"#F0F2F5",  //选中范围的填充颜色。
             }] ,
            //横轴
            xAxis: {
           	     type: 'category',
                 data: []，
                 name : ''",//坐标轴名称
                 nameLocation :'end',//坐标轴名称位置
                 nameTextStyle:{//坐标轴名称样式
                        color:'#595C61'
                },
                triggerEvent:true,//开启x轴上文字的事件，之后就可以给图表绑定事件，x轴上的文字将会触发事件
                position:  'top',//x轴显示在上方
                inverse: true,//x轴的柱状图从右往左显示
                //文字样式
                axisLabel: {
                    show: true,
                    interval:0 //不间隔显示x轴上的文字，否则文字放不下时，将会自动间隔显示
                    rotate:"45"，//x坐标轴上的文字倾斜显示
                    textStyle: {
                        color: '#fff'
                    },
                    formatter:function(value){
                        if(value.length > 6){
                            return `${value.slice(0,4)}...`;
                        }
                        return value;
                    }
                },
                axisLine: {//轴线颜色
                     lineStyle: {
                        color: 'rgba(255,255,255,0.2)',
                     }
                },
                splitLine: {//分割线样式
                    show: true,
                    lineStyle:{
                        color:'#686E81',
                        type:'dashed'//分割线设置为虚线
                    }
                },
            },
            //纵轴
            yAxis: {
                type:'value',
            	scale: true,//y轴坐标值,根据数据的最大最小之进行计算
            	position: 'right',//y轴显示在右侧，
            	name: '亿元',//y轴的标题
                nameTextStyle:{//y轴标题的样式
                      color:'#fff'
                }
            },
            series: [{  
                name: '', //柱状图获得焦点时显示的名称
                type: 'bar', //类型
                barWidth: 20,//柱体宽度
                stack:'',//设置相同的stack将会形成堆叠效果
                barGap: '-100%',//柱间距离，-100%可以使两个柱子重叠
                data: []， //数据      
                //柱体上显示的文字 
                label: {
                     show: true,
                     position: 'top',
                     color: '#595C61',
                 },    
                 //柱状图样式
                itemStyle:{
                    normal:{
                        color:new this.echarts.graphic.LinearGradient(
	                        0, 1, 0, 0,
	                        [
	                          {offset: 0, color: 'rgba(33, 204, 223, 0)'},
	                          {offset: 1, color: 'rgba(33, 204, 223, 0.9)'}
	                        ]
                     	 )//柱状图的颜色，渐变色
                    }
                },
                //标识线
                markLine : {
                    symbol:"none",//去掉警戒线最后面的箭头
                    label:{
                        formatter:'全市比值阈值',
                        textStyle:{
                            color:'#fff'
                        },
                        position:"middle"//将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                    },
                    data : [{
                        silent:false,//鼠标悬停事件  true没有，false有
                        lineStyle:{ //警戒线的样式 ：虚实  颜色
                            type:"solid",
                            color:"#49CFB4",
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 40
                        },
                        xAxis: 0.5  // 警戒线的标注值，可以有多个xAxis多条警示线。或者{type : 'average', name: '平均值'}，type值有max； min ；average，分为最大，最小，平均值
                    }]
                }
            }]
 };