<template style="">
    
    <div class="pie" style="width:480px;margin-left: 10px;margin-top: 20px;">
        <div class="pie-div">
            <div style="width:420px;height: 30px;text-align: center;">
                <span style="font-size: 25px;color: #fff;">企业注册</span>
            </div>
            <div style="width: 180px;float: left;margin-left: 20px;">
                <vue-ellipse-progress                    
                :progress="50"
                :angle="-90"
                color="blue"
                emptyColor="#8ec5fc"                     
                :size="150"
                :thickness="10"
                emptyThickness="5%"
                lineMode="in 10"
                :legend="true"
                :legendValue="10"
                legendClass="legend-custom-style"
                dash="60 0.9"
                animation="reverse 700 400"
                :noData="false"
                :loading="false"                      
                fontColor="white"
                :half="false"
                :gap="10"
                dot="10 blue"
                fontSize="2rem">
                    <span slot="legend-value">/20</span>
                    <p slot="legend-caption">GOOD JOB</p>
                </vue-ellipse-progress>
            </div>
            <div style="width: 180px;float: right;margin-left: 20px;">
                <vue-ellipse-progress                    
                :progress="50"
                :angle="-90"
                color="blue"
                emptyColor="#8ec5fc"                     
                :size="150"
                :thickness="10"
                emptyThickness="5%"
                lineMode="in 10"
                :legend="true"
                :legendValue="10"
                legendClass="legend-custom-style"
                dash="60 0.9"
                animation="reverse 700 400"
                :noData="false"
                :loading="false"                      
                fontColor="white"
                :half="false"
                :gap="10"
                dot="10 blue"
                fontSize="2rem">
                    <span slot="legend-value">/20</span>
                    <p slot="legend-caption">GOOD JOB</p>
                </vue-ellipse-progress>
            </div>
        </div>
        <div id="pie2" style="width:450px;height: 300px;">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main2" style="width:450px;height:270px;"></div>
        </div>
        <div class="div-table" style="width:480px;height: 350px;">
          <el-table
          :data="tableData"
          height="250"
          border
          :header-cell-style="{background:'#02285a',color:'#fff',}">
          <el-table-column
            prop="date"
            label="企业名称"
            width="120">
          </el-table-column>
          <el-table-column
            prop="name"
            label="预警信息"
            width="120">
          </el-table-column>
          <el-table-column
            prop="province"
            label="设备名称">
          </el-table-column>
          <el-table-column
            prop="city"
            label="预警时间">
          </el-table-column>
        </el-table>
        </div>
    </div>
    
    
</template>

<script>// 引入基本模板
import { Component, Vue, Provide } from "vue-property-decorator";
import * as echarts from 'echarts/core';
import {BarChart, PieChart} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent
} from 'echarts/components';
import {
  CanvasRenderer
} from 'echarts/renderers';
echarts.use(
  [
    TitleComponent,
    TooltipComponent,
    GridComponent,
    BarChart,
    PieChart,
    LegendComponent,
    DatasetComponent,
    CanvasRenderer
  ]
);
// let echarts = require('echarts/lib/echarts')
// 引入饼状图组件
// require('echarts/lib/chart/pie')
// 引入提示框和title组件
// require('echarts/lib/component/legend')
// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/title')
import METHOD from "@/utils/methods";

import VueEllipseProgress from 'vue-ellipse-progress';
// Vue.prototype.$echarts = echarts;
Vue.use(VueEllipseProgress);

export default {
    data() {
      return {
        tableData: [{
          date: '测试瓷砖厂',
          name: '压力过大',
          province: '传感器001',
          city: '2020-07-23 10:20:37'
        }, {
          date: '赞皇测试有限公司',
          name: '压力过大',
          province: '传感器001',
          city: '2020-07-23 10:20:37'
        }, {
          date: '奔腾大河有限公司',
          name: '压力过大',
          province: '传感器001',
          city: '2020-07-23 10:20:37'
        }, {
          date: '泽宏科技股份有限公司',
          name: '压力过大',
          province: '传感器001',
          city: '2020-07-23 10:20:37'
        }, {
          date: '测试瓷砖厂',
          name: '压力过大',
          province: '传感器001',
          city: '2020-07-23 10:20:37'
        }, {
          date: '测试瓷砖厂',
          name: '压力过大',
          province: '传感器001',
          city: '2020-07-23 10:20:37'
        }]
      }
    },
  created(){
  },
  mounted(){
	this.drawPieChart();
  },
  methods:{
    deleteRow(index, rows) {
        rows.splice(index, 1);
      },
    //初始化数据
	drawPieChart(){
		// 基于准备好的dom，初始化echarts实例
		var myChart2 = echarts.init(document.getElementById('main2'));
		let that=this;
		var getData1 = [];
		var getData2 = [];
		METHOD.axiosGet(
		  this,
		  `/enterpriseGoods/getNumberByEnterprise`,
		  function(res) {
		    if (res.code === 0) {
				//先进行赋值
				for(let i=0; i<res.data.result.length; i++) {
					var obj = new Object();
					var arr = new Object();
					// obj = res.data.result[i].number;
					// arr = res.data.result[i].type;
					obj = res.data.result[i].number;
					arr = res.data.result[i].name;
					getData1[i] = obj;
					getData2[i] = arr;
				}
				myChart2.setOption({
					xAxis: {
						data: getData2,
					},
					series:[{
						data: getData1,
					}]
				})
		    }
		});
		// 绘制图表
		myChart2.setOption({
		    title: {
		        text: '企业危险源数量统计',//主标题
				color: '#fff',
		        // subtext: '柱状图',
				textStyle: {
                color: "#fff",
              }
		    },
		    tooltip: {},
		    legend: {
		        data:['危险源'],
				textStyle: { //图例文字的样式
                            color: '#fff',
                        }
		    },
		    xAxis: {
				axisLabel: {  
				   interval:0,  
				   rotate:40  
				} ,
				data: [],
		   },
		    yAxis: {},
		    series: [{
		        name: '危险源',
				type: 'bar',
		        // data: [5, 20, 36, 10, 10, 20],
				data: [],
		    }],
		    textStyle: {
                color: "#fff",
                fontSize: 18
            },
		});
	}
  }
}
</script>
<style>
	.el-main .el-tabs .el-tabs__content{
		/* height: 100%; */
		padding: 0px !important;
	}
    .pie-div{
        width: 425px;
        height: 180px;
        border-style: solid;
        border-width: 5px 27px 27px;
        border-image: url(chart-wrapper.png) 5 27 27 fill / 1 / 0 repeat;
    }
    .div-table .el-table tr >td {
      background-color: #02285a;
      color: #fff;
      border: 1px solid #8ec5fc;
    }
    .div-table .el-table tr >th {
      border: 1px solid #8ec5fc;
    }
    .div-table .el-table tr:hover >td {
      background-color: #2c5794 !important;
      /* color: #fff; */
    }
</style>