<template>
  <div shadow="never" class=" homeBoxCard workPanelChart" v-loading="loading">
    <div ref="workPanelChart" class="" style="height:100%"/>
  </div>
</template>
<script>
import { computed, defineComponent, onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import * as echarts from 'echarts'

export default defineComponent({
  name: 'WorkPanelChart',
  setup() {
    const store = useStore()
    const workPanelChart = ref(null)

    // 总数
    const total = computed(() => store.state.Home.worksChartData.total)
    // num
    const num = computed(() => store.state.Home.worksChartData.num)

    // 读取数据 func
    const loading = ref(true)
    const getData = async () => {
      // loading.value = true
      // await store.dispatch('Home/queryWorksChartData')
      loading.value = false
    }

    onMounted(() => {
      getData()
      let myChart = echarts.init(workPanelChart.value)
      // 绘制图表
      myChart.setOption({
        // backgroundColor: "pink",
        color: ['#f2e251', '#40ABFE', '#fe8161'],

        legend: {
          // icon: 'rect',
          // bottom: "0",
          right: 40,
          // data: ['A', 'B', 'C'],
        },
        // toolbox: {
        //   show: false,
        // },
        tooltip: {
          // show: true
          trigger: 'axis',
          axisPointer: { type: 'cross' },
        },
        grid: {
          left: '20',
          right: '40',
          top: '40',
          bottom: '20',
          containLabel: true,
        },
        xAxis: {
          axisLabel: {
            color: '#444',
            fontSize: 14,
          },
          /*改变xy轴颜色*/
          axisLine: {
            lineStyle: {
              color: '#444',
              width: 1, //这里是为了突出显示加上的
            },
          },
          boundaryGap: false,
          data: [
            '2021-10-10',
            
          ],
        },
        yAxis: {
          nameTextStyle: {
            color: '#707070',
            fontSize: 14,
          },
          axisLabel: {
            color: '#444',
            fontSize: 14,
          },

          axisLine: {
            symbolOffset: [0, 4],
            lineStyle: { color: '#444' },
          },
          splitArea: {
            show: false,
          },
        },

        series: [
          {
            name: '工单数',
            type: 'line',
            symbolSize: 7,
            smooth: false,
            data: [
              10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10, 2, 12, 0,
              5, 10, 2, 12, 0, 5,
            ],
          },
          // {
          //   name: 'B',
          //   type: 'line',
          //   symbolSize: 7,
          //   smooth: false,
          //   data: [
          //     10, 2, 12, 0, 7, 8, 9, 7, 19, 7, 8, 9, 7, 19, 7, 8, 9, 7, 19, 7,
          //     8, 9, 7, 19, 7, 8, 9, 7, 19,
          //   ],
          // },
          // {
          //   name: 'C',
          //   type: 'line',
          //   symbolSize: 7,
          //   smooth: false,
          //   data: [
          //     5, 3, 6, 5, 14, 5, 3, 6, 5, 14, 5, 3, 6, 5, 14, 5, 3, 6, 5, 14, 5,
          //     3, 6, 5, 14, 5, 3, 6, 5, 14,
          //   ],
          // },
        ],
      })
      window.onresize = function () {
        // 自适应大小
        myChart.resize()
      }
    })

    return {
      workPanelChart,
      loading,
      total,
      num,
    }
  },
})
</script>
<style lang="scss" scoped>


</style>