<template>
  <div shadow="never" class="siteWorkChart" v-loading="loading">
    <div ref="siteWorkChart" 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: 'SiteWorkChart',
  setup() {
    const store = useStore()
    const siteWorkChart = 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(siteWorkChart.value)

      // 指定图表的配置项和数据
      var data1 = [2]
      var data2 = [6]
      var data3 = [3]
      var data4 = [5]
      var datacity = ['二级代理']

      // 绘制图表
      myChart.setOption({
        color: ['#2F6ACB', '#4AB662', '#8052EC', '#DABC51'],
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          //  orient: 'vertical',
          bottom: '0%',
          // right: '3%',
        },
        grid: {
          //图表的位置
          top: '5%',
          left: '3%',
          right: '15%',
          bottom: '10%',
          containLabel: true,
        },
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              interval: 'auto',
              formatter: '{value} ',
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
              },
            },
            show: true,
            axisTick: {
              show: true,
            },
            axisLine: {
              show: true,
            },
          },
        ],
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              interval: 0,
              show: true,
              splitNumber: 15,
              textStyle: {
                fontSize: 10,
                color: '#000',
              },
            },
            data: datacity,
          },
        ],
        series: [
          {
            name: '巡检',
            type: 'bar',
            stack: 'sum',
            barWidth: '30px',
            barGap: '-100%',
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#555',
              },
            },
            data: data1,
          },
          {
            name: '检修',
            type: 'bar',
            barWidth: '30px',
            barGap: '-100%',
            stack: 'sum1',
            label: {
              show: true,
              position: 'inside',
              textStyle: {
                color: '#555',
              },
            },
            data: data2,
          },
          {
            name: '抢修',
            type: 'bar',
            label: {
              show: true,
              position: 'inside',
              textStyle: {
                color: '#555',
              },
            },
            stack: 'sum1',
            barWidth: '30px',
            barGap: '-100%',
            data: data3,
          },
          {
            name: '运维服务',
            type: 'bar',
            label: {
              show: true,
              position: 'inside',
              textStyle: {
                color: '#555',
              },
            },
            stack: 'sum1',
            barWidth: '30px',
            barGap: '-100%',
            data: data4,
          },
        ],
      })
      window.onresize = function () {
        // 自适应大小
        myChart.resize()
      }
    })

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