<template>
    <div>
        <h5 class="chart-title c-primary"><slot name="title"></slot></h5>
        <div class="barChart" :id="id" :ref="refName"></div>
        <div class="chart-tip">
            <div class="c-primary text-left">
                <slot name="subtitle"></slot>
            </div>
            <div class="c-white text-left">
                <slot name="content"></slot>
            </div>
        </div>
    </div>
</template>
<script>
let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
import customed from '../../assets/js/customed.json';
const style ={
  color:'#616161',
  fontSize:14
}
echarts.registerTheme('customed',customed)
const refName = Math.random()
  .toString(36)
  .substr(2);
export default {
  name: "barChart",
  data() {
    return {
      refName: refName
    };
  },
  props: {
    id: String,
    AxisType: {
      // 哪个轴为值轴
      type: String,
      default: "xAxis"
    },
    axisData: Array,
    color: {
      default: function() {
        return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: "#02c8d1" },
          { offset: 0.5, color: "#0ccba5" },
          { offset: 1, color: "#16ce76" }
        ]);
      }
    },
    mergeOption: {
      type: Object,
      default: function() {
        return {};
      }
    },
    datas: {
      type: Array,
      default: function() {
        return [];
      }
    },
    labelShow: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    loadData() {
      this[this.id] = echarts.init(this.$refs[refName],'customed');
      this[this.id].setOption({
        grid: {
          top: 30,
          left: 20,
          right: 40,
          bottom: 30,
          containLabel: true
        },
        xAxis: {
          nameGap: 8,
          nameTextStyle:style,
          data: this.AxisType == "yAxis" ? this.axisData : "",
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {}
          },
          axisLabel: style,
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid"
            }
          },
          z: 10
        },
        tooltip: {
          show: true,
           trigger: "item"
        },
        yAxis: {
          nameGap: 8,
          nameTextStyle: style,
          data: this.AxisType == "yAxis" ? "" : this.axisData,
          axisTick: {
            show: false
          },
          axisLabel: style,
          axisLine: {
            show: true,
            lineStyle: {}
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dotted"
            }
          }
        },
        series: this.datas
      });
    }
  },
  beforeDestroy() {
    if (this[this.id]) {
      this[this.id].clear();
    }
  },
  updated() {
    this.loadData();
  },
  mounted() {
    this.loadData();
  },
  watch: {
    datas: {
      handler(val, oldVal) {
        this.loadData();
      },
      deep: true
    }
  }
};
</script>
<style lang="scss" scoped>
.barChart {
  width: 100%;
  height: 100%;
}
</style>
