先看下效果图
-
第一次动态传入渐变临界值200
-
第二次动态传入渐变临界值150
-
第三次传入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'
}