排行echarts 柱状配置项内容和展示

      var cityName = ['三元里街', '松洲街', '黄石街', '同和街', '新市街', '新市街', '新市街']
var cityValue = [90, 80, 70, 60, 50, 40, 40]

option = {

		tooltip:{
			//formatter: '{c} 次',
		},
		grid:{
			top:50,
			width:"64%",
			height:"86%",
			left:"20%"
		},
		xAxis: {
		    show: false,
			type: 'value',
			name: '(单位:次)',
			
		},
		yAxis: [
			{
				data: cityName,
				inverse:true,//反向
				axisLine:{
					show:false
				},
				axisTick:{
					show:false
				},
				axisLabel:{
					color: '#fff',
					fontSize: 12,
					align: "center",
					margin:80,
					formatter: function (value, index){
					
						var sureInd = cityName.map(item => item).indexOf(value) + 1
						console.log(sureInd)
						if(sureInd==1){
							return '{a|'+ sureInd +'}' + '{e|' + value + '}'
						}else if(sureInd==2){
							return '{b|'+sureInd +'}' + '{e|' + value + '}'
						}else if(sureInd==3){
							return '{c|'+sureInd +'}' + '{e|' + value + '}'
						}else{
							return '{d|'+sureInd +'}' + '{e|' + value + '}'
						}
					},
					rich: {
						a: {
							backgroundColor:"#F7B500",
							width:18,
							height:18,
							lineHeight:20,
							borderRadius:9,
						},
						e: {
						    color: '#666666',
						    width: 100,
						    textAlign: 'center'
						},
						b: {
							backgroundColor:"#B7B7B7",
							width:18,
							height:18,
							lineHeight:20,
							borderRadius:9,
						},
						c:{
							backgroundColor:"#F27C00",
							width:18,
							height:18,
							lineHeight:20,
							borderRadius:9,
						},
						d:{
							backgroundColor:"#0068DB",
							width:18,
							height:18,
							lineHeight:20,
							borderRadius:9,
						},
					}
				}
			},
			{	
			    
				inverse:true,//反向
				position:'right',//坐标轴位置，移至右边
				axisLine:{
					show:false
				},
				axisTick:{
					show:false
				},
				show:false,
				data: cityName,
				axisLabel:{
					color:"#333",
					formatter: function (value, index){
						if(value.length>7){
							return value.slice(0,6)+"..."
						}else{
							return value
						}
					}
				}
			}
		],
		
		series: [
// 			{ // For shadow
// 				type: 'bar',
// 				itemStyle: {
// 					normal: {
// 						color: 'rgba(0,0,0,0.05)',
// 						barBorderRadius:[30, 30, 30, 30],
// 					}
// 				},
// 				barWidth:20,
// 				barGap:'-100%',
// 				barCategoryGap:'40%',
// 				data: [100,100,100,100,100,100,100,100,100,100],
// 				animation: false,
// 				yAxisIndex:1,//使用右侧y轴
// 				tooltip:{
// 					show:false
// 				}
// 			},
			{
				name: "数据量",
				type: 'bar',
				barWidth:20,
				data: cityValue, //次数列表
				yAxisIndex:0,//使用右侧y轴
				color:{
					type: 'linear',
					x: 0,
					y: 0,
					x2: 1,
					y2: 0,
					colorStops: [{
						offset: 1, color: '#0fe5e3' // 0% 处的颜色
					}, {
						offset: 0, color: '#2ca1d6' // 100% 处的颜色
					}],
					global: false // 缺省为 false
				},
				itemStyle : {
					normal : {
						barBorderRadius:[30, 30, 30, 30],
					},
				}, 
				label:{
					show:false,
				}
			},
		],
		
		dataZoom: [

        {

         

        

            yAxisIndex: [0],

            right: '0%',
            
            
            
            show: true,
            realtime: true,
            y: 360,
            height: 80,
            start: 0,
            end: 80

        }

    ],
		
	};