echarts折线图设置渐变半透明面积颜色

飞熊 • 2023年7月14日下午4:44 • 前端开发 • 阅读 500

有时候，不是因为你没有能力，也不是因为你缺少勇气，只是因为你付出的努力还太少，所以，成功便不会走向你。而你所需要做的，就是坚定你的梦想，你的目标，你的未来，然后以不达目的誓不罢休的那股劲，去付出你的努力，成功就会慢慢向你靠近。

导读：本篇文章讲解 echarts折线图设置渐变半透明面积颜色，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

效果：

渐变半透明颜色设置：

在series里面设置areaStyle属性：

        areaStyle: {
              normal: {
                  color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                           {
                               offset: 0.1,
                               color: '#c55D34' // 0% 处的颜色
                           },
                           {
                               offset: 0.5,
                               color: 'rgba(255,185,91, 0.3)' // 0% 处的颜色
                           },
                           {
                               offset: 0.7,
                               color: 'rgba(255,185,91, 0.1)' // 0% 处的颜色
                           },
                           {
                               offset: 0.9,
                               color: 'rgba(0,0,0, 0.1)' // 100% 处的颜色
                           }
                      ],
                      globalCoord: false // 缺省为 false
               }
         }

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/149685.html