echarts的渐变色配置 LinearGradient， 饼图默认渐变颜色设置不同的角度

// 0, 0, 0, 1 代表右/下/左/上
// offset 范围0-1 表示什么时候开始使用对应颜色
color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [
                    {offset: 0, color: 'red'}, // 开始位置
                    // {offset: 0.5, color: 'green'},
                    {offset: 1, color: 'skyblue'} // 结束位置
                ] )

示例 :
1,0,0,0 从右开始 (红色开始色)

1,1,0,0 右上(红色开始色)
 

1,0,1,0 右左不存在, 所以不显示
空

 1,0,0,1 右下(红色开始色)

1,1,1,0 右上左(红色开始色) 效果等同 0,1,0,0

1,0,1,1 右左下(红色开始色) 效果等同 0,0,0,1
 

1,1,0,1 右上下(红色开始色) 效果等同 1,0,0,0
 

 案例：

 

option = {
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: 'rose 1' ,itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(1,0,0,0, [{
                                    offset: 0,
                                    color: '#5845ec'
                                }, {
                                    offset: 1,
                                    color: '#0cb5fd'
                                }]),
                            }
                        }},
        { value: 38, name: 'rose 2',itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [{
                                    offset: 0,
                                    color: '#5845ec'
                                }, {
                                    offset: 1,
                                    color: '#0cb5fd'
                                }]),
                            }
                        } },
        { value: 32, name: 'rose 3',itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [{
                                    offset: 0,
                                    color: '#5845ec'
                                }, {
                                    offset: 1,
                                    color: '#0cb5fd'
                                }]),
                            }
                        } },
        { value: 30, name: 'rose 4',itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [{
                                    offset: 0,
                                    color: '#5845ec'
                                }, {
                                    offset: 1,
                                    color: '#0cb5fd'
                                }]),
                            }
                        } },
        { value: 28, name: 'rose 5' ,itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(1,0,0,0, [{
                                    offset: 0,
                                    color: '#5845ec'
                                }, {
                                    offset: 1,
                                    color: '#0cb5fd'
                                }]),
                            }
                        }},
        { value: 26, name: 'rose 6',itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(1,0,0,0, [{
                                    offset: 0,
                                    color: '#5845ec'
                                }, {
                                    offset: 1,
                                    color: '#0cb5fd'
                                }]),
                            }
                        } },
        { value: 22, name: 'rose 7' ,itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0,1, 0, [{
                                    offset: 0,
                                    color: '#5845ec'
                                }, {
                                    offset: 1,
                                    color: '#0cb5fd'
                                }]),
                            }
                        }},
        { value: 18, name: 'rose 8',itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0,0,0,1, [{
                                    offset: 0,
                                    color: '#5845ec'
                                }, {
                                    offset: 1,
                                    color: '#0cb5fd'
                                }]),
                            }
                        } }
      ]
    }
  ]
};

 

刚刚开始写文章，有什么问题或疑问可以给我留言或者私信，我们可以互相学习与进步，把自己开发中遇到的小问题进行总结，让有同样困惑的人，可以快速解决。 -------彩虹兔子

在开发过程中记录下自己遇到的问题，希望在自己解决的结果可以帮助更多人，互相帮助，提升自己。