300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > echarts的渐变色配置 LinearGradient 饼图默认渐变颜色设置不同的角度

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

时间:2020-11-28 00:38:57

相关推荐

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'}]),}} }]}]};

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。