echarts的柱状图的柱条颜色设置

话不多说，上效果图

代码如下：

<template>
  <div class="bar" ref="bar" style="width:100%;height:100%"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props:['data'],
  mounted(){
    this.$nextTick(()=>{
      this.drawBar()
    })
  },
  methods: {
    drawBar() {
      let MyEchart = this.$echarts.init(this.$refs.bar);
      MyEchart.setOption({
        xAxis: {
          type: "category",
          data: this.data[0],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.data[1],
            type: "bar",
            label:{                           //每个柱条上方有对应的数字
              show:true,
              position: 'top',
              color:'#000',
            },
            itemStyle:{                       //编辑柱条颜色，也可以是单一字符串如:'pink'
                color:function(params) {
                      //给出颜色组
                      var colorList =['#1363F1', '#44E448', '#EC6941', '#C7E0FE', '#EEBB1E', '#654B4B', '#3E9DE7', '#247220', '#D8225A', '#D9ED4F', '#E48E64', '#F697D4', '#8957A1', '#C38E32']
                      return colorList[params.dataIndex]
                  },
              }
          },
        ],
      });
    },
  },
};
</script>

<style>
</style>