echarts柱状图定制化某条柱子&滚动条从左、右起始

人狠话不多,直接上代码:

var data1 = ['800', '1200', '1000', '840', '1320', '960', '750','800', '900', '1000', 
			'1200', '1102', '1003', '1014','1015', '856', '917', '818', '919', '920',
			'821', '822', '923', '924','825', '926', '827', '828', '929', '830',
			'1031', '1232', '1133', '1034','935', '1036', '937', '1138', '1099', '1040',
			'941', '1042', '1043', '1044','1045', '1046', '1047', '1248', '1149', '1150',
			'951', '952', '1053', '854','1055', '956', '857', '1058'];
			
var seriesData = [];
for (var i = 0; i < data1.length; i++) {
	var itemStyle = {};
	if (i > data1.length - 2) {
	    itemStyle = {
					normal: {
						//柱形图圆角,初始化效果
						barBorderRadius:[0, 5, 5, 0],
					    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
	                        offset: 0,
	                        color: '#47E0FF'
	                    }, {
	                        offset: 1,
	                        color: '#ABB3FF'
	                    }])
					},
				};
	} else {
	    	itemStyle = {
					normal: {
						//柱形图圆角,初始化效果
						barBorderRadius:[0, 5, 5, 0],
						color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
	                        offset: 0,
	                        color: '#DADEFB'
	                    }, {
	                        offset: 1,
	                        color: '#F0F1FF'
	                    }])
					},
				};
		
	}
	
	seriesData.push({
		value: data1[i],
		itemStyle: itemStyle
	})
}
option = {
		grid:{
				top: '40',
		        left: '10',
		        right: '45',
		        bottom: '50'
	       	},
	       	dataZoom: [
	    	   {
	               type: 'slider',
	               show: true,
	               start: 65,
	               end: 100,
	               yAxisIndex: [0]
	             }
	       ],
			xAxis: [
				{
					position: 'top',
			    	type: 'value',
			    	name: '万方',
			    	nameTextStyle: {
			            padding: [-60, 0, 0, -28]
			        },
	               axisLine:{       //x轴
		            	show:false,
		            	lineStyle:{
		                    color:'#A8A8A8'
		                }
		              },
		              axisTick:{       //x轴刻度线
		        	  	show:false
		              },
		              splitLine: {     //网格线
		        	  	show:true,
		        	    lineStyle:{
		        	        type:'dashed'
		        	    }
		              }
				}
			],
			yAxis: [
				{
				type: 'category',
			    data: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', 
					'11', '12', '13', '14','15', '16', '17', '18', '19', '20',
					'21', '22', '23', '24','25', '26', '27', '28', '29', '30',
					'31', '32', '33', '34','35', '36', '37', '38', '99', '40',
					'41', '42', '43', '44','45', '46', '47', '48', '49', '50',
					'51', '52', '53', '54','55', '56', '57', '58'],

		        axisLine:{       //y轴
		           	show:false,
		           	lineStyle:{
	                   color:'#A8A8A8'
	               }
	             },
	             axisTick:{       //y轴刻度线
	          	  	show:false
	             },
	             splitLine: {     //网格线
	          	  	show:false
	             },
		        axisLabel : {
		            formatter: function(){
		                  return ""
		            }
		        }
				
			}
		],
		series: [
		{
			name: '历史径流',
			type: 'bar',
			barWidth: '60%',
			data: seriesData,
			label:{
    			show: true,
        		formatter:'{b} : {@score}',
        		position:'insideLeft',
        		textStyle : {
                fontSize: 12,
                fontFamily: 'Microsoft YaHei',
                fontWeight: 'bold',
                color: '#555555',
                }
    		},
		}
	]
};

希望能给前端同学们以帮助,如有不足,多谢指正!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值