Echarts实战案例代码(42):饼图不同区域的渐变实现的解决方案

在这里插入图片描述
颜色数组

var colorList_data_2 = [{
        c1: ' #9966ff', //实践
        c2: '#ff66ff'
    },
    {
        c1: '#ff3366', //操作
        c2: '#ff6699'
    },
    {
        c1: '#ff6666', //操作
        c2: '#ffcc66'
    }
]

option设置

        itemStyle: {
            normal: {
                color: function(params) {
                    var colorList = colorList_data_2
                    return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                        offset: 0,
                        color: colorList[params.dataIndex].c1
                    }, {
                        offset: 1,
                        color: colorList[params.dataIndex].c2
                    }])
                    /*  return colorList[params.dataIndex]*/
                }

            },
            emphasis: {
                borderWidth: 0,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }

Done!

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页