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/