echarts 柱状图颜色设置

<template>
  <div>
    <div :id="chartId" style="height:500px; width:100%"></div>
  </div>
</template>

<script>
import echarts from "echarts";


export default {
  name: "e2",
  data() {
    return{
      option : {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
            itemStyle: {
              normal: {
                //这里是重点
                color: function(params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
                  //给大于颜色数量的柱体添加循环颜色的判断
                  let lindex = params.dataIndex;
                  if (params.dataIndex >= colorList.length) {
                   lindex = params.dataIndex - colorList.length;
                  }
                  return colorList[lindex]
                }
              }
            }

          }
        ]
      }
    }
  }
  ,created() {
    //随机ID
    this.chartId = "chartId" + Math.random();

  },
  mounted() {

    if (this.echart == null) {
      this.echart = echarts.init(
        document.getElementById(this.chartId)
      );
    }
    this.echart.clear();
    this.echart.setOption(this.option);


  }
}
</script>

<style scoped>

</style>