Echarts实现渐变的方法

series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        },
        itemStyle:{
        	//方法一
        	//前四位固定代表了右下左上四个方向  范围从 0 - 1,相当于在图形包围盒中的百分比
        	//那个值为1就是从哪个方向开始渐变
        	//数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
            color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			{
				// 折线图颜色初始渐变
				offset: 0,
				color: '#ffffff'
			},
			{
				// 折线图颜色完成渐变
				offset: 1,
				color: 'yellow'
			}])
			//方法二 新的方法
			color:{
				type:'linear,
				x:0,
				y:1,
				x2:0,
				y2,:0,
				colorStops:[{
					offset: 0,
					color: '#ffffff'
				},
				{
					offset: 1,
					color: 'yellow'
				}
				]
			}
        }
    }]

示例图:

在这里插入图片描述

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值