echarts图表-折线图线性渐变

1997yyds

已于 2023-12-12 16:01:52 修改

阅读量376

点赞数

分类专栏： echarts 文章标签： echarts 前端 java

于 2023-12-12 16:00:41 首次发布

本文链接：https://blog.csdn.net/weixin_46293740/article/details/134951921

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

lineStyle:设置折线的颜色渐变

areaStyle:设置区域的颜色渐变

  series: [
    {
      lineStyle: {
        // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
        // color: "#CB2F0C",
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(0, 254, 157, 1)", // 0% 处的颜色
            },
            {
              offset: 0.25,
              color: "rgba(2, 221, 241, 1)", // 0% 处的颜色
            },
            {
              offset: 0.5,
              color: "rgba(51, 156, 255, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(145, 127, 255, 1)", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        width: 4,
      },
      areaStyle: {
        normal: {
          color: {
            type: "linear", //设置线性渐变
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(255, 45, 0, 0)", // 100% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(203, 47, 12, 1)", // 0% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
        },
      },
    },
  ]