<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 = [20];
var data2 = [60];
var data3 = [30];
var data4 = [ 50];
var datacity = [ '二级代理'];


      // 绘制图表
      myChart.setOption({
         color: [ '#4f81bd','#8064a2', '#9bbb59', '#c0504d'],
    tooltip: {
        trigger: 'axis',
    },
    legend: {
        //  orient: 'vertical',
        bottom:'0%',
        right: '3%',
        data: ['独立分销', '房友圈', '三级一手住宅', '其他'],
    },
    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>