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

export default defineComponent({
  name: 'OpeWorkChart',
  setup() {
    const store = useStore()
    const opeWorkChart = 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(opeWorkChart.value)
      // 绘制图表
      myChart.setOption({
        tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        bottom: '0%',
        data: ['待接单', '处理中','已完成']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
    },
    yAxis: {
        type: 'value',
        
        splitLine: {
            show: true,
            lineStyle: {
              color: '#D2E6F9',
              type: 'dashed'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#D2E6F9'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#000'
          }
    },
    xAxis: {
        type: 'category',
        data: ['2019'],
        axisLine: {
            lineStyle: {
              color: '#D2E6F9'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#000'
          }
    },
    series: [
        {
            name: '待接单',
            type: 'bar',
            barWidth: 24,
            barGap: '40%',
            data: [18, 23, 29],
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [{
                        offset: 0, color: '#8BDCFF' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#4594E8' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        },
        {
            name: '处理中',
            type: 'bar',
            barWidth: 24,
            barGap: '40%',
            data: [23, 28, 36],
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [{
                        offset: 0, color: '#FFB2B2' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#F45353' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        },
        {
            name: '已完成',
            type: 'bar',
            barWidth: 24,
            barGap: '40%',
            data: [26, 32, 20],
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [{
                        offset: 0, color: '#59FFB7' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#37BDFF' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        }
    ]
      })
      window.onresize = function () {
        // 自适应大小
        myChart.resize()
      }
    })

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