<template>
  <div id="echarts"></div>
</template>
<script>
  import * as echarts from 'echarts';

  import { listDatas  } 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: 10,
            top: 'middle',
            align: 'left'
          },
          series: [
            {
              name: '区县离线设备统计',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['40%', '50%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: true,
                position: 'outer'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 15,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: true
              },
              data: dataList.map((item) => {
                return { name: item.qx, value: item.device_offline_count }
              })
            }
          ]
        });

      },

      getList() {
        this.loading = true;
        listDatas(this.queryParams).then(response => {
          this.drawECharts(response.data);
          this.total = response.total;
          this.loading = false;
        });
      },
    },
    mounted() {
      this.myChart = echarts.init(document.getElementById('echarts'));
      this.getList();

    }
  }

</script>
<style>
  #echarts {
    min-width:260px;
    height: 100%;
  }
</style>
