南丁格尔玫瑰图 echarts 饼图 添加渐变

南丁格尔玫瑰图 echarts 饼图 添加渐变

南丁格尔玫瑰图
https://echarts.apache.org/examples/zh/editor.html?c=pie-roseType
饼图列表
https://echarts.apache.org/examples/zh/index.html#chart-type-pie

原理: 就是单色是一个颜色值,遍历数据 变成渐变色。

getColor () {
      const colorList = [['#87AFF1', '#1D6BEC'], ['#FBBD89', '#F38C49'], ['#8EE4D0', '#59CEAF'], ['#E2B9E3', '#DD9ADE'], ['#BAE6FF', '#91D5FF'], ['#FBAAB0', '#F76D6D'], ['#FDDD9A', '#F6BD16'], ['#CAD2DB', '#9DACC4']]
      const length = colorList.length
      return this.data.map((item, index) => {
        const itemStyle = {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: colorList[index % length][0] },
            { offset: 1, color: colorList[index % length][1] }
          ])
        }
        return { ...item, itemStyle }
      })
    },
posted @ 2025-02-13 11:30  彭成刚  阅读(116)  评论(0)    收藏  举报