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

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

个人博客：http://www.aeiherumuh10.com/zeno-blog/