<template>

  <div id="szecharts"></div>

</template>
<script>
  import * as echarts from 'echarts';
  import { list  } from "@/api/MonitoringCenter/index";
  export default {
    data(){
      this.myChart = null;
      return{}
    },
    methods:{
      drawECharts(dataList) {
        this.myChart.setOption({
          title: {
            text: '离线类型统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            right: 'right',
            top: 'middle'
          },
          series: [
            {
              name: '离线类型统计',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['30%', '50%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: true,
                position: 'left'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 15,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: true
              },
              data: dataList.map((item) => {
                return { name: item.offline_reason, value: item.count }
              })
            },
          ]
        });
      },
      getList() {
        this.loading = true;
        list(this.queryParams).then(response => {
          this.drawECharts(response.data);
          this.total = response.total;
          this.loading = false;
        });
      },
    },
    mounted() {
      this.myChart = echarts.init(document.getElementById('szecharts'));
      this.getList();
    }
  }
</script>
<style>
  #szecharts {
    width: 100%;
    height: 100%;
  }
</style>

