100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > echarts自定义图表颜色 柱状图/饼图自定义渐变色

echarts自定义图表颜色 柱状图/饼图自定义渐变色

时间:2019-05-19 21:29:36

相关推荐

echarts自定义图表颜色 柱状图/饼图自定义渐变色

echarts自定义图表颜色,自定义渐变色

柱状图:

单色:

原先图表的颜色

配置代码:

series: {type: "bar",barWidth: "60",data: [6, 12, 8, 9, 10],itemStyle: {normal: {color:'red'},},},

渐变色:

配置代码:

series: {type: "bar",barWidth: "60",data: [6, 12, 8, 9, 10],itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "#62eeef",},{offset: 1,color: "#1776f5",},]),},},},

饼图/环形图:

单色:

配置代码:

series : [{name: '收入(单位:万元)',type: 'pie',radius : '55%',center: ['50%', '60%'],data:[{value:335, name:'1月'},{value:310, name:'2月'},],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'},normal:{color:function(params) {//自定义颜色var colorList = [ '#C1232B','#B5C334'];return colorList[params.dataIndex]}}}}]

渐变色:

配置代码:

itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},normal: {color: function (params) {var colorList = [{c1: "#FA7096", //不及格c2: "#FE8C69",},{c1: "#3E6FF3", //及格c2: "#45B1F6",},];return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上offset: 0,color: colorList[params.dataIndex].c1,},{offset: 1,color: colorList[params.dataIndex].c2,},]);},},},

注意使用数组定义颜色时,数据的种类和颜色要一一对应,只能多不能少

个人博客:/zeno-blog/

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