echart 随机每个柱状图的颜色

<template>
  <div ref="chart" :style="{ width, height }" class="container"></div>
</template>

<script>
export default {
  props: {
    width: {
      type: String,
      default: "500px",
    },
    height: {
      type: String,
      default: "300px",
    },
    data: {
      type: Array,
      required: true,
    },
    options: {
      required: true,
    },
  },
  mounted() {
    // let series = this.options.keys.map(r => {
    //   return {
    //     name: r.label,
    //     type: "bar",
    //     data: this.data.map(rr => rr[r.val])
    //   };
    // });

    let option = {
      title: {
        show: true,
        text: "题目",
        left: 0,
        top: "70%",
        textStyle: {
          color: "#fff",
          fontWeight: "normal",
        },
      },
      xAxis: {
        type: "category",
        data: ["2017", "2018", "2019", "2020", "2021"],
        axisLabel: {
          show: !false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,1)",
            shadowColor: "rgba(255,255,255,1)",
            shadowOffsetX: "20",
          },
          //symbol: ['none', 'arrow'],
          symbolOffset: [0, 25],
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: "value",
        show: false,
      },
      series: [
        {
          data: [120, 200, 150, 80, 70],
          type: "bar",
          barWidth: 30,
          barCategoryGap: "100%",
          //随机柱状图颜色
          itemStyle: {
            normal: {
              //这里用函数控制柱子颜色，定义一个list，然后根据所以取得不同的值
              color: function (params) {
                console.log("颜色",params);
                var colorList = [
                  ["#3ae374", "#7efff5"],
                  ["#ff4d4d","#ffb8b8" ],
                  ["#ff9f43", "#fff200"],
                  ["#3c40c6", "#34e7e4"],
                  ["#01a3a4", "#00d2d3"],
                ];
                var randomRse = colorList[Math.floor(Math.random()*colorList.length)]
                return {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color:  randomRse[0], // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: randomRse[1], // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                };
              },
              label: {
                show: true,
                position: "top",
                formatter: "{c}",
                color: "#fff",
              },
            },
          },
        },
      ],
    };
    //事件传递的是点击的数据点
    this.initChart(this.$refs.chart, option, (data) => {
      console.log(data);
    });
  },
};
</script>

<style  lang="scss" scoped >
.container {
  width: 500px;
  height: 300px;
}
</style>