<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>