bar3D 的颜色渐变

ZXand618

发布于 2022-04-10 02:03:24

1.1K00

代码可运行

文章被收录于专栏：ZXand618的ECharts之旅ZXand618的ECharts之旅

运行总次数：0

代码可运行

最近有读者问我 bar3D 颜色渐变的问题，昨天尝试了下，发现 ECharts GL 的 bar3D 似乎不支持 colorStops，似乎也不支持贴图（github 上 2018 年有个 issue 问过，pissang 回答暂不支持，昨天尝试了下也没成功……），于是只好用堆叠柱图凑合一下了。

思路大概是这样：

把数据拆分成 N 份，比如原本柱子的值是 100，拆成 N 个值为 100 / N 的柱子，叠罗汉
计算两种颜色的 RGB 数值差，均匀地分配给 N 个柱子

关键代码（颜色计算，N 个 series[i]-bar3D 生成）

function barSeriesInit(color0, color1, barData, step) {
    ret = [];
    
    // 16进制颜色转换成 RGB 颜色，并计算 color0 和 color1 之间的 RGB 差值
    startR = color0.length === 7 ? parseInt(color0.substr(1, 2), 16) : parseInt(color0.substr(1, 1) + color0.substr(1, 1), 16);
    startG = color0.length === 7 ? parseInt(color0.substr(3, 2), 16) : parseInt(color0.substr(2, 1) + color0.substr(2, 1), 16);
    startB = color0.length === 7 ? parseInt(color0.substr(3, 2), 16) : parseInt(color0.substr(2, 1) + color0.substr(2, 1), 16);
    endR = color1.length === 7 ? parseInt(color1.substr(1, 2), 16) : parseInt(color1.substr(1, 1) + color1.substr(1, 1), 16);
    endG = color1.length === 7 ? parseInt(color1.substr(3, 2), 16) : parseInt(color1.substr(2, 1) + color1.substr(2, 1), 16);
    endB = color1.length === 7 ? parseInt(color1.substr(3, 2), 16) : parseInt(color1.substr(2, 1) + color1.substr(2, 1), 16);
    distanceR = endR - startR;
    distanceG = endG - startG;
    distanceB = endB - startB;

    // 把原数据的 value 值变成 1/N 
    stepData = barData.map(function(item) {
        return {
            value: [item[1], item[0], item[2] / step],
        };
    });

    // 生成 N 个 series[i]-bar3D
    for (var i = 0; i <= step; i++) {
        ret.push({
            type: 'bar3D',
            data: stepData,
            stack: 'stack',
            color: '#' + Math.round(startR + i * distanceR / step).toString(16) + Math.round(startG + i * distanceG / step).toString(16) + Math.round(startB + i * distanceG / step).toString(16),

            label: {
                textStyle: {
                    fontSize: 16,
                    borderWidth: 1
                }
            },
            silent: true,
            shading: 'lambert',
        });
    }
    return ret;
}