100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > echarts 柱状图颜色及渐变色设置

echarts 柱状图颜色及渐变色设置

时间:2020-04-27 23:45:37

相关推荐

echarts 柱状图颜色及渐变色设置

前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有,很详细,分享给大家。大家及时保存,说不定啥时候就没了。

如果给柱状图设置颜色,我们执行在 option 中 传入 color 字段的一个数组。代码如下

option = {color: ['#2EB7BD', '#3CE1D9', '#FBBACB', '#4695D1'],...}

那么如何给柱状图添加渐变色呢?

0,0,1,0分别代表了右、下、左、上四个位置的颜色坐标,然后再在下方的数组中:

{offset: 0, color: ‘#3977E6’},代表颜色坐标为0的颜色

{offset: 0.5, color: ‘#3A8EE6’},代表颜色坐标为0.5的颜色

{offset: 0.8, color: ‘#FAB6B6’},代表颜色坐标为0.8的颜色

{offset: 1, color: ‘#37BBF8’}代表颜色坐标为1处的颜色

option = {... series: [{name: '数量',type: 'bar',data: [],itemStyle: {normal: {barBorderRadius: [10, 10, 0, 0],color: new echarts.graphic.LinearGradient(0, 0, 1, 0,[{offset: 0, color: '#3977E6'},{offset: 1, color: '#37BBF8'}])}}}]};

折线区域颜色渐变:

option = {areaStyle:{normal:{//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0,color: 'rgba(80,141,255,0.39)'}, {offset: .34,color: 'rgba(56,155,255,0.25)'},{offset: 1,color: 'rgba(38,197,254,0.00)'}])}},}

参考echarts柱状图渐变色

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