echarts多维柱状图，自定义每个柱状图的颜色

先放效果图：

刚出现这个需求的时候，自己在echarts官网的柱状图里看案例，并没有这种设置，也百度找方法，还是没有解决方法，有点慌，然后自己冷静下来思考了一下，所以还是要是冷静思考，举一反三，问题就解决了。

先说一下思考过程：一维的柱状图有设置每个柱状图颜色的方法，根据color函数，自定义一个颜色数组，然后返回每一个颜色item

就是通过以上的代码实现一维自定义每个柱状图的颜色，那么多维数组呢，道理大致相同，放代码：

  set_AndonTimeChart (AndonXName,lastMonthArr,currentMonthArr) { // x轴lable数组，上月数组，当月数组
        let labelOption = {
          normal: {
            show: true, // 开启显示
            position: 'top', // 在上方显示
            formatter: function (data) {
              return data.value
            },
            textStyle: {
              fontSize: 16,
            },
          }
        }
        let myChart = this.$echarts.init(document.getElementById('Time'));
        let option = {
          grid:{
            y2:60,
            x:100,
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {show: false},
              data: AndonXName,
              //更改坐标轴颜色
              axisLine: {
                lineStyle: {
                  color: '#294a88',
                  width: 2,
                  opacity: 0.2
                },
                onZero:false
              },
              axisLabel: {
                // x轴的字体样式
                textStyle: {
                  color: '#657CA8',  //更改坐标轴文字颜色
                  fontSize: 18,      //更改坐标轴文字大小
                  fontFamily: 'MicrosoftYaHei'
                },
                // x轴Label换行
                formatter:function(params) {
                  return params.split(" ").join("\n")
                },
              },
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                formatter: function (data) {
                  return  data+'min';

                },
                // y轴的字体样式
                textStyle: {
                  color: '#657CA8',  //更改坐标轴文字颜色
                  fontSize: 16,      //更改坐标轴文字大小
                  fontFamily: 'MicrosoftYaHei'
                }

              },
              //Y坐标轴颜色
              axisLine: {
                lineStyle: {
                  color: '#294a88',
                  width: 2,
                  opacity: 0.2
                }
              },
              //Y轴分割线
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#263859',
                  width: 1,
                  type: 'solid'
                }
              },
            }
          ],
          series: [
            {
              name: 'lastMonth',
              type: 'bar',
              barWidth: 20,//柱图宽度
              label: labelOption,
              data: lastMonthArr, 
// 重点来了---------------------------------------------
              // 上月柱状图颜色
              itemStyle: {
                normal: {
                  color: function (params) {
                    //自定义颜色
                    var colorList = [
                      '#9E661E', '#988C70', '#29C74B', '#20B9C5', '#0068DE'
                    ];
                    return colorList[params.dataIndex]
                  }
                }
              }
            },
            {
              name: 'currentMonth',
              type: 'bar',
              barWidth: 20,//柱图宽度
              label: labelOption,
              data: currentMonthArr, //
// 重点来了---------------------------------------------
              // 当月柱状图颜色
              itemStyle: {
                normal: {
                  color: function (params) {
                    //自定义颜色
                    var colorList = [
                      '#EE9A22', '#EED49C', '#C8F316', '#00EDFF', '#3BACFF'
                    ];
                    return colorList[params.dataIndex]
                  }
                }
              }
            },

          ],
        }
        // 绘制图表
        myChart.setOption(option);
      },

遇到问题还是要冷静思考，不要慌~