前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >bar3D 的颜色渐变

bar3D 的颜色渐变

作者头像
ZXand618
发布2022-04-10 10:03:24
1K0
发布2022-04-10 10:03:24
举报

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

思路大概是这样:

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

关键代码(颜色计算,N 个 series[i]-bar3D 生成)

代码语言:javascript
复制
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;
}

提示框暂时还没做好……

bar3D 的 tooltip.trigger = 'axis' 不生效,也许不支持,如果真的不支持,可能要重写鼠标事件。最近事情多,顾不上细细研究……有空再看看

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-08-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 ZXand618的ECharts之旅 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
图像处理
图像处理基于腾讯云深度学习等人工智能技术,提供综合性的图像优化处理服务,包括图像质量评估、图像清晰度增强、图像智能裁剪等。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档