柱状图-一组多个-颜色渐变

option = {
			title: {
				text: '柱状图知识点总结',
				subtext: '纯属虚构'
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {        // 坐标轴指示器,鼠标移动上去会显示当前数据
					type: 'shadow'    // 默认为直线,可选为:'line' | 'shadow'
				}
			},
			toolbox: {
		        show: true,
		        feature: {
		            dataView: {readOnly: false},
		            restore: {},
		            saveAsImage: {}
		        }
		    },
		    legend: {
		    	width:'230px',
		    	type: 'scroll',    //滚动
		    	itemWidth:60,
				itemHeight:68,
		        data:['11', '22','33', '44','55'],
		        textStyle:{
		           fontSize:12,
		           color:'#000'
		        }
		    },
			grid: {
				left: '3%',            //柱状图在整体页面上的布局,距离上下左右的距离
				right: '6%',
				bottom: '3%',
				top: '20%',
				containLabel: true

			},
			xAxis: [{
				type: 'category',
				axisLabel: {
	             	interval:0,       //横轴信息全部显示
					rotate:30,        //30度角倾斜显示
					show: true,
					textStyle: {      //X轴上字体大小颜色设置
						color: '#1CA261', 
						fontSize:10,
					}
				},
				axisLine:{            //X轴颜色设置
					show: true,
					lineStyle: {
					color: 'red'
					}
				},
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				name: '我的名字x', //设置x轴坐标轴名称
				nameTextStyle: {
					color: "red",
					padding: [0, 0, 0, -10],
					fontSize: 10
				}
			}],
			yAxis: [{
				type: 'value',
				axisLine:{
					show: true,
					lineStyle: {
					color: '#1CA261'
					}
				},
				name: '我的名字y', //设置y轴坐标轴名称
				nameTextStyle: {
					color: "red",
					padding: [0, 0, 0, -10],
					fontSize: 10
				}
			}],
			series: [{
					type: 'bar',
					name:'11',
					barWidth : 20,                     //柱子宽度
					data: [190,130,75,180,16,75,180],
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#5094df'        //柱子的渐变颜色
							}, {
								offset: 1,
								color: 'red'
							}]),
						}
					}
				},
				{
					type: 'bar',
					name:'22',
					barWidth : 20,
					data: [180,150,55,150,50,55,170],
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#fbcd2e'
							}, {
								offset: 1,
								color: 'red'
							}]),
						}
					}
				},
				{
					type: 'bar',
					name:'33',
					barWidth : 20,
					data: [180,150,55,150,50,55,170],
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#fbcd2e'
							}, {
								offset: 1,
								color: '#000'
							}]),
						}
					}
				},
				{
					type: 'bar',
					name:'44',
					barWidth : 20,
					data: [180,150,55,150,50,55,170],
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#fbcd2e'
							}, {
								offset: 1,
								color: '#ccc'
							}]),
						}
					}
				},
				{
					type: 'bar',
					name:'55',
					barWidth : 20,
					data: [180,150,55,150,50,55,170],
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#fbcd2e'
							}, {
								offset: 1,
								color: '#4CCE61'
							}]),
						}
					}
				}
			]
		};
		

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值