Skip to content
一、echarts 图表设置渐变色

场景:有时候 UI 给的高保证,图表示渐变的颜色。 参考文档:

1. 具体配置
json5
    {
      series: [{
        color: [
          {
            colorStops: [
              {
                offset: 0,
                color: "#642b3e", // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: "#35162e", // 50% 处的颜色
              },
              {
                offset: 1,
                color: "#4b182a", // 100% 处的颜色
              },
            ],
          },
          {
            colorStops: [
              {
                offset: 0,
                color: "#4d2b35", // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: "#8b4337", // 50% 处的颜色
              },
              {
                offset: 1,
                color: "#cd5d39", // 50% 处的颜色
              }
            ],
          },
          {
            colorStops: [
              {
                offset: 0,
                color: "#9f7432", // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: "#ba8734", // 100% 处的颜色
              },
              {
                offset: 1,
                color: "#cf9434", // 100% 处的颜色
              },
            ],
          },
          {
            colorStops: [
              {
                offset: 0,
                color: "#368aea", // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: "#2867b8", // 50% 处的颜色
              },
              {
                offset: 1,
                color: "#1f407d", // 100% 处的颜色
              },
            ],
          },
        ]
      }]
    }

Released under the MIT License.