echarts柱状图动态渐变色

先看下效果图

1. 第一次动态传入渐变临界值200
   

2. 第二次动态传入渐变临界值150
   

3. 第三次传入100
   

源码

• 主要是在itemStyle属性中给color赋值时,使用回调函数,通过获取每个柱子的属性值,来动态改变渐变色范围
• 以下部分代码进行了修改,可能直接粘贴不能使用,核心是setOption(arg)方法
• 细节请参照注释

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

var dataAxis = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442];
var yMax = 500;

//动态传的临界参数
//var argVar = 200;
//var argVar = 150;
var argVar = 100

var dataShadow = [];
/**
 * arg 是 动态传入的标准渐变色临界值
 */
setOption(arg){
	
	for (var i = 0; i < data.length; i++) {
	    dataShadow.push(yMax);
	}

	option = {
	    title: {
	        text: '柱状图动态渐变色'
	    },
	    xAxis: {
	        data: dataAxis,
	        axisLabel: {
	            inside: false,
	            textStyle: {
	                color: '#000'
	            }
	        },
	        axisTick: {
	            show: false
	        },
	        axisLine: {
	            show: false
	        },
	        z: 10
	    },
	    yAxis: {
	        axisLine: {
	            show: false
	        },
	        axisTick: {
	            show: false
	        },
	        axisLabel: {
	            textStyle: {
	                color: '#999'
	            }
	        }
	    },
	    dataZoom: [
	        {
	            type: 'inside'
	        }
	    ],
	    series: [
	        {
	            type: 'bar',
	            showBackground: true,
	            itemStyle: {
	                color: (item)=>{
	                	//本次的数据横坐标多于数据项
		                //这里的判断 防止多次执行空data 色彩渐变造成正常柱子的bug 
	                    if(item.data == 0){
	                        return
	                    }
	                    //这里进行数据类型转换,在实际项目中出现item.data为string的现象
	                    let num = parseFloat(item.data)
	                    let rad = num-150;
	                    let gradientArr = []
	                    if(rad>0){
	                        gradientArr = [
	                            {offset: rad/num, color:'#aee'},
	                            {offset: 0, color: '#000'}
	                            
	                        ]
	                    }else{
	                        gradientArr = [{offset: 0, color: '#aee'}]
	                    }
	                    return new echarts.graphic.LinearGradient(
	                        0, 0, 0, 1,gradientArr)
	                }
	            },
	            data: data
	        }
	    ]
	};
}
setOption(argVar);
option && myChart.setOption(option);

---

2021.2.22
发现new echarts.graphic.LinearGradient()构造渐变色color,可能会导致有的柱子颜色无效的bug

建议使用这样的一个color对象:

// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: {
    type: 'radial',
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}
// 纹理填充
color: {
    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
    repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
}