<template style="">
    <div class="pie" style="width:100%;height: 700px;">
        <div id="pie1" style="float:left;width:50%;height: 500px;">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main1" style="width:700px;height:500px;"></div>
        </div>
        <div id="pie2" style="float:right;width:40%;height: 500px;">
            <div id="main2" style="width:550px;height:500px;"></div>
        </div>
    </div>
</template>

<script>// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入饼状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
import METHOD from "@/utils/methods";

export default {
  
  created(){
  },
  mounted(){
    this.initData();
	this.drawPieChart();
  },
  methods:{
    //初始化数据
    initData() {
		// 基于准备好的dom，初始化echarts实例
		var myChart1 = echarts.init(document.getElementById('main1'));
		let that=this;
		var getData1 = [];
		var getData2 = [];
		METHOD.axiosGet(
		  this,
		  `/enterpriseInfo/getNumberByRegulation`,
		  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.name = res.data.result[i].name;
					// obj.value = res.data.result[i].number;
					obj.name = res.data.result[i].type;
					obj.value = res.data.result[i].number;
					arr = res.data.result[i].type;
					getData1[i] = obj;
					getData2[i] = arr;
				}
				myChart1.setOption({
					legend: {
						data: getData2,
					},
					series:[{
						data: getData1,
					}]
				})
		    }
		});
		
	// 绘制图表
      myChart1.setOption({
          title : {
              text: '企业按监管分类统计',//主标题
            //   subtext: '饼状图',//副标题
              x:'center',//x轴方向对齐方式
			  textStyle: {
                color: "#fff",
              }
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              orient: 'vertical',
              right: 'right',
              // data: ['探测器','二氧化碳报警器','水压探测器','有毒气体报警器','搜索引擎']
			  data: [],
			  textStyle: { //图例文字的样式
                            color: '#fff',
                        }
          },
          series : [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius : '55%',
                  center: ['50%', '60%'],
				  data: [],
				  label:{
					normal:{
						textStyle:{
							color: '#fff',
						}
					}
				  },
                  itemStyle: {
                      emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      });
	 
    },
	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({
				  // color:['rgb(8,252,7)','rgb(255,168,0)','rgb(0,121,254)','rgb(0,255,251)','rgb(3,120,251)','rgb(0,200,251)'],
		    title: {
		        text: '企业危险源数量统计',//主标题
				color: '#fff',
		        // subtext: '柱状图',
				textStyle: {
                color: "#fff",
              }
		    },
		    tooltip: {},
		    legend: {
		        data:['危险源'],
				textStyle: { //图例文字的样式
                            color: '#fff',
                        }
		    },
		    xAxis: {
				axisLabel: {  
				   interval:0,  
				   rotate:40  
				} ,
		        // data: ["报警器","二氧化碳报警器","摄像头","水压探测器","摄像头","有毒气体探测器"],
				data: [],
		   },
		    yAxis: {},
		    series: [{
		        name: '危险源',
				type: 'bar',
		        // data: [5, 20, 36, 10, 10, 20],
				data: [],
		    }],
		    textStyle: {
                color: "#fff",
                fontSize: 18
            },
		});
	}
  }
}
</script>
<style>
	.pie #pie1{
		/* border:1px #000000 solid; */
		padding: 30px;
	}
	.pie #pie2{
		/* border:1px #000000 solid; */
		margin-left: 20px;
   	 	margin-top: 50px;
	}
	.el-main .el-tabs .el-tabs__content{
		background-image: url(../../assets/bg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		/* height: 100%; */
		padding: 0px !important;
	}
</style>