<template>
  <div>
<!--
      <a-row :gutter='24'>
        <a-col :sm='24' :xl='12' :xs='24'>
          <a-card :bordered='false' class='a_card_box'>
            <template #title>
              <span class='title'>任务完成情况</span>
            </template>
            <template #extra>
              <div class='timeQuery'>
                <a @click=''>月</a>
                <a @click=''>季</a>
                <a @click=''>年</a>
              </div>
              <a-dropdown placement='bottomRight'>
                <span>...</span>
                <a-menu slot='overlay'>
                  <a-menu-item v-has="'home:export'">
                    <a @click="exportChatData('taskStatus', '任务完成情况')">导出</a>
                  </a-menu-item>
                  <a-menu-item v-has="'home:magnify'">
                    <a @click='handleScale(1)' @v-has="'home:export'">放大</a>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>
            <div class='a_card_content'>
              <charts
                id='charts1'
                ref='charts1'
                :dataX='charts1.dataX'
                :dataY='charts1.dataY'
              />
            </div>
          </a-card>
        </a-col>
        <a-col :sm='24' :xl='12' :xs='24'>

        </a-col>
      </a-row>-->
    <div :id='id' style='width:100%; height: 100%'></div>
  </div>

</template>

<script>
export default {
  name: 'charts',
  props: {
    id: {
      type: String
    },
    dataX: {
      type: Array
    },
    dataY: {
      type: Array
    },
    smooth: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '标题'
    }
  },
  watch: {
    dataY: {
      handler(newValue, oldValue) {
        this.initLine()
      },
      deep: true
    }
  },
  data() {
    return {
      loading: false,
      chartInfo:null
    }
  },
  mounted() {
    this.loading = true
    if (this.dataX) {
      this.initLine()
    }
    window.addEventListener('resize', () => {
      this.chartInfo.resize()
    }, true);
  },
  methods: {
    initLine() {
      let series = []
      let dataY = this.dataY
      dataY.forEach(item => {
        series.push({
          name: item.title,
          type: item.type,
          data: item.data,
        })
      })

      // 基于准备好的dom，初始化echarts实例
      this.chartInfo = this.echarts.init(document.getElementById(this.id)) // , null, { renderer: 'svg' }

      this.chartInfo.setOption({
        legend: {
          show: true,
          data: ['已完成', '未完成'],
          orient: 'vertical',
          right: 30
        },
        grid: {
          top: 60,
          bottom: 60,
          left: 70,
          right: 130
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(85,85,85,0.2)'
            }
          },
          axisLabel: {// 坐标轴刻度标签的相关设置。
            textStyle: {
              color: 'rgba(85,85,85,0.5)',
              fontSize: 14
            }
          },
          data: this.dataX,

        },
        yAxis: {
          type: 'value',
          axisLabel: {// 坐标轴刻度标签的相关设置。
            textStyle: {
              color: 'rgba(85,85,85,0.5)',
              fontSize: 14
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(85,85,85,0.2)'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(85,85,85,0.2)'
            }
          }
        },
        series: series
      }, true)
      if (dataY) {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>

</style>
