<template>
  <div class="vue-echarts-instance part-box">
    <v-chart
      :options="barOption"
      v-if="barOption"
      @click="chartClick"
      autoresize
    ></v-chart>
  </div>
</template>

<script>
// package-url: https://github.com/ecomfe/vue-echarts
export default {
  name: "vue-echarts-instance",
  data() {
    return {
      barOption: "",
      dataList: []
    };
  },
  mounted() {
    this.dataList = "#"
      .repeat(8)
      .split("")
      .map((item, index) => {
        return {
          userId: `id${index}`,
          userName: `name${index}`,
          count: Math.floor(Math.random() * 100)
        };
      });
    this.barOption = this.getOptions(this.dataList);
  },
  methods: {
    getOptions(datas) {
      if (!datas || !datas.length) return;
      const xAxisData = datas.map(item => item.userName);
      const seriesData = datas.map(item => item.count);
      const areaColors =
        xAxisData.length % 2
          ? ["rgba(237,242,250,1)", "rgba(245,247,251,1)"]
          : ["rgba(245,247,251,1)", "rgba(237,242,250,1)"];

      return {
        grid: {
          left: "5%",
          right: "5%",
          top: "5%",
          borderColor: "rgba(230,234,242,1)"
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          inverse: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(230,234,242,1)"
            }
          },
          axisTick: {
            show: false
          },
          splitArea: {
            show: true,
            interval: function(index) {
              return !!index;
            },
            areaStyle: {
              color: areaColors
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(230,234,242,1)"
            }
          },
          axisLabel: {
            interval: 0,
            margin: 12,
            color: "#4F535C",
            fontWeight: 500,
            fontSize: 14
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            type: "bar",
            barWidth: 30,
            data: seriesData,
            itemStyle: {
              color: "#5C9EEE"
            },
            label: {
              show: true,
              position: "top",
              color: "#777D8A",
              fontSize: 13,
              fontWeight: 600
            }
          }
        ]
      };
    },
    chartClick(option) {
      if (option.componentType !== "series") return;
      const item = this.dataList.find(item => item.userName === option.name);
      this.$message(item.userName);
    }
  }
};
</script>
