<template>
  <div>
    <p class="c-white line-tip">
      <slot name="title"></slot>
    </p>
    <div class="lineChart" :ref="refName"></div>
  </div>
</template>

<script>
let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/line");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
const style ={
  color:'#616161',
  fontSize:14
}
import customed from "../../assets/js/customed.json";
echarts.registerTheme("customed", customed);
const refName = Math.random()
  .toString(36)
  .substr(2);
export default {
  name: "lineChart",
  data() {
    return {
      refName: refName
    };
  },
  props: {
    datas: Array,
    axisData: Array,
    legendData: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  methods: {
    loadData() {
      this.mychart = echarts.init(this.$refs[refName], "customed");
      this.mychart.setOption({
        textStyle:style,
        grid: {
          top: 30,
          left: 20,
          right: 20,
          bottom: 30,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        xAxis: {
          type: "category",
          data: this.axisData,
          boundaryGap: false,
          axisTick: {
            show: true
          },
          axisLine: {
            show: true
          },
          axisLabel: style,
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid"
            }
          }
        },
        yAxis: {
          type: "value",
          show: true,
          axisLabel: style,
          axisLine: {
            show: true
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dotted"
            }
          }
        },
        legend: {
          data: this.legendData,
          bottom: 0,
          itemWidth: 14,
          itemHeight: 14,
          symbolKeepAspect: true,
          textStyle:style
        },
        series: this.datas
      });
    }
  },
  updated() {
    this.loadData();
  },
  mounted() {
    this.loadData();
  },
  watch: {
    datas: {
      handler(val, oldVal) {
        this.loadData();
      },
      deep: true
    }
  }
};
</script>

<style lang="scss" scoped>
.lineChart {
  width: 100%;
  height: 100%;
}

.line-tip {
  width: 3rem;
  margin: 0 auto 0.15rem;
  text-align: left;
}
</style>

