最后的战役x 2022-12-09 14:15 采纳率: 100%
浏览 127
已结题

AntV G2Plot线性图若有多个填充色,怎么统一设置渐变

需求如下:

img

当前实现:

img

查看了官方文档(属实写的不易懂,比ant design写的还烂),也百度了很久,基本都是单线条的渐变,没有找到多线条渐变的案例。

img


填充色color是可以用[]来进行赋值的,所以每个线条都有自己的填充色。
但是渐变fill只支持单色(若放开注释,则两个线条的填充色都变成一样了),尝试了[]、{}等写法都不支持,请教一下熟悉g2plot的大拿这个玩意怎么实现。

  • 写回答

1条回答 默认 最新

  • 励志前端小黑哥 2022-12-09 16:13
    关注

    可以像下面这样使用,areaStyle可以传递一个函数,通过函数判断不同的折线图,返回不同的渐变色

    const area = new Area('container', {
          data,
          xField: 'date',
          yField: 'value',
          color: ['red', 'blue'],
          seriesField: 'country',
          areaStyle:(d)=>{
            console.log(d)
            if(d.country==="北美") return {'fill':'l(270) 0:#FFFFFF 1:#FF0000'}
            if(d.country==='中南美') return {'fill':'l(270) 0:#FFFFFF 1:#00FF00'}
          }
        });
        area.render();
    

    我这里的结果如下:

    img

    觉得有用,还请点赞收藏!
    励志前端,CSDN唯一账号!关注我,带你了解更多前端知识!

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 12月29日
  • 已采纳回答 12月21日
  • 创建了问题 12月9日

悬赏问题

  • ¥20 keepalive配置业务服务双机单活的方法。业务服务一定是要双机单活的方式
  • ¥50 关于多次提交POST数据后,无法获取到POST数据参数的问题
  • ¥15 win10,这种情况怎么办
  • ¥15 如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式?(相关搜索:格式化)
  • ¥100 在连接内网VPN时,如何同时保持互联网连接
  • ¥15 MATLAB中使用parfor,矩阵Removal的有效索引在parfor循环中受限制
  • ¥20 Win 10 LTSC 1809版本如何无损提升到20H1版本
  • ¥50 win10 LTSC 虚拟键盘不弹出
  • ¥30 微信小程序请求失败,网页能正常带锁访问
  • ¥15 Matlab求解微分方程,如何用fish2d进行预优?