<template>
  <div class="chartWrap"
    :style="{ width: width, height: height,'textAlign':'center',lineHeight: height,color:'#909399'}">
    <div v-if="showChart" ref="mybar"></div>
    <div v-else>暂无数据</div>
  </div>
</template>
<script>
  import * as echarts from 'echarts'
  require('echarts/theme/macarons')
  import resize from './mixins/resize'
  const animationDuration = 6000
  export default {
    mixins: [resize],
    props: {
      //图表数据
      data: {
        type: Object,
        default: () => {},
      },
      //图表宽
      width: {
        type: String,
        default: "100%",
      },
      //图表高
      height: {
        type: String,
        default: "350px",
      },
      //
      axisPointerType:{
        type: String,
        default: "shadow",
      },
      //图表颜色
      colors: {
        type: Array,
        default: () => {
          return [
            "#5470c6",
            "#91cc75",
            "#fac858",
            "#ee6666",
            "#73c0de",
            "#3ba272",
            "#fc8452",
            "#9a60b4",
            "#ea7ccc",
          ];
        },
      },
    },
    data() {
      return {
        myChart: "",
        showChart: true
      };
    },
    watch: {
      data: {
        // 监听图表变化重新渲染图表
        handler() {
          this.initChart(this.$refs.mybar, this.data);
        },
        deep: true,
      },
    },

    computed: {},
    created() {},
    mounted() {
      // 初始化渲染
      this.initChart(this.$refs.mybar, this.data);
    },
    methods: {
      initChart(dom, currentData) {
        if (Object.keys(currentData).length == 0) {
          console.log("123")
          this.showChart = false
          return
        }
        //清空重新渲染
        if (
          this.myChart != null &&
          this.myChart != "" &&
          this.myChart != undefined
        ) {
          this.myChart.dispose(); //销毁
        }
        // this.myChart = this.$echarts.init(dom);
        this.myChart = echarts.init(this.$el, 'macarons')
        let option = this.option(currentData);
        this.myChart.setOption(option);


      },
      option(currentData) {
        let seriesList = currentData.list.map((item) => {
          return {
            name: item.name || "",
            type: item.type || "line", //不传默认为折线图
            data: item.data,
            ...item
          };
        });
        // 返回echarts配置参数
        return {

          grid: {
            left: '20',
            right: '20',
            top: '40',
            bottom: '20',
            containLabel: true
          },

          color: this.colors, //自定义颜色
          legend: {},
          tooltip: { //提示框浮层内容格式器
            // trigger: "axis",
            // formatter: currentData.formatter, //自定义格式
            trigger: currentData.trigger||'axis',
            formatter:currentData.formatter,
            axisPointer: {
              type: this.axisPointerType,
            },
            textStyle: { //提示框内文字样式的设置
              align: 'left'
            }

          },
          itemStyle: {
            borderRadius: [0, 0, 0, 0]
          },
          xAxis: {
            type: "category",
            data: currentData.x, //横坐标数据
            splitArea: false,
            splitLine: false,
            axisLine: {
              show: currentData.xShow,
              lineStyle: {
                color: "#338de3", //x轴线颜色
                width: 1,
                type: "solid",
              },
            },
            axisTick: {
              show: false,
            },
            toolbox: {},
            axisLabel: {
              interval: 0,
              rotate:currentData.rotate||'',
              show: true,
              splitNumber: 15,
              textStyle: {
                color: "rgba(122,122,122,1)",
                fontSize: "14",
              },
            },
          },
          yAxis: {
            type: "value",
            splitArea: false,
            splitLine: false,
            // name: currentData.list[0].unit, //单位
            axisLabel: {
              formatter: "{value}", //显示格式
              show: true,
              textStyle: {
                color: "rgba(122,122,122,1)",
                fontSize: "12",
              },
            },
            axisLine: {
              show: currentData.yShow,
              lineStyle: {
                color: "#338de3", //y轴线颜色
                width: 1,
                type: "solid",
              },
            },
            // interval: 0
          },
          series: seriesList, //每一条配置
        };
      },
    },
  };
</script>

<style>
  .chartWrap {
    background-color: #fff;
  }
</style>
