<template style="">
    <div class="pie" style="width:100%;height: 700px;">
        <!--<div id="pie1" style="float:left;width:50%;height: 500px;">-->
            <!--&lt;!&ndash; 为 ECharts 准备一个具备大小（宽高）的 DOM &ndash;&gt;-->
            <!--<div id="main1" style="width:700px;height:500px;"></div>-->
        <!--</div>-->
        <div style="width:100%;display:flex;flex-direction:row;justify-content:flex-start;">

            <div id="pie20" style="width:45%;height: 500px;margin-left: 5%;">
                <div id="main2" style="width:550px;height:500px;"></div>
            </div>
            <div id="pie3" style="width:45%;height: 500px;margin-left: 5%;">
                <div id="main3" style="width:550px;height:500px;"></div>
            </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();
      //this.drawPieChart2("1");
  },
  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)'
                      }
                  }
              }
          ]
      });
	 
    },
      getData(data) {
        console.log(data)
          let that = this;
          //var id = this.idcolor;

      },
	drawPieChart(data){
		// 基于准备好的dom，初始化echarts实例
		var myChart2 = echarts.init(document.getElementById('main2'));
		let that=this;
		var getData1 = data.alarm.num;
		var getData2 = data.accident.num;
        // myChart2.setOption({
        //     xAxis: {
        //         data: getData1,
        //     },
        //     series:[{
        //         data: 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: '#000',
                // subtext: '柱状图',
                textStyle: {
                    color: "#000",
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data: ['事故', '预警'],
                textStyle: { //图例文字的样式
                    color: '#000',
                }
            },
            xAxis: [
                {
                    type: 'category',
                    axisLabel: {
                        show:true,
                        interval:0,
                        rotate:40
                    } ,
                    //X轴白线
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#000',
                        },
                    },
                    //data: ['测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患'],
                    data:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
                    axisPointer: {
                        type: 'shadow'
                    }

                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel:{
                        show: true,
                        rich: {
                            flag: {
                                fontSize: 25,
                                padding: 5
                            }
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#000',
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(71, 126, 171, 1)',
                            type: 'dashed'
                        },
                    },
                },
                {
                    type: 'value',
                    interval: 5,
                }
            ],
            series: [
                {
                    name: '事故',
                    type: 'bar',
                    // data: [
                    //     400, 1300, 700, 1000, 1500, 1800, 200, 300, 2000, 1000, 1300
                    // ]
                    data:getData2,
                },
                {
                    name: '预警',
                    type: 'line',
                    // symbol:'circle',
                    symbolSize:6,
                    //data: [1000,1300, 1450, 1600, 1700, 1800, 1850, 1800, 1700, 1600, 1500],
                    data:getData1,
                    itemStyle : {normal : {color:'#00D7FE', //改变折线点的颜色
                            lineStyle:{color:'#00D7FE'} //改变折线颜色
                        },
                    },
                }
            ]
        })

	},
      drawPieChart2(data){
          // 基于准备好的dom，初始化echarts实例
          var myChart2 = echarts.init(document.getElementById('main3'));
          let that=this;
          // myChart2.setOption({
          //     xAxis: {
          //         data: ["1","2","3","4","5"],
          //     },
          //     series:[{
          //         //data: [datas.cameraList.length(),datas.cameraList.length(),datas.cameraList.length(),datas.cameraList.length(),datas.cameraList.length()],
          //         data:[2,5,9,1,6]
          //     }]
          // })
          // 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({
              // 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: '#000',
                  // subtext: '柱状图',
                  textStyle: {
                      color: "#000",
                  }
              },
              tooltip: {},
              legend: {
                  data:['危险源'],
                  textStyle: { //图例文字的样式
                      color: '#000',
                  }
              },
              xAxis: {
                  axisLabel: {
                      interval:0,
                      rotate:40
                  } ,
                   data: ["监控点位","危险源","职业危害场所","隐患","设备数量"],
                  //data: [],
              },
              yAxis: {},
              series: [{
                  name: '危险源',
                  type: 'bar',
                   //data: [5, 20, 36, 10, 10, 20],
                  data: data,
              }],
              textStyle: {
                  color: "#000",
                  fontSize: 18
              },
          });
      }
  }
}
//background-image: url(../../assets/bg.png);
</script>

<style>
	.pie #pie1{
		/* border:1px #000000 solid; */
		padding: 30px;
	}
	.pie #pie20{
		/* border:1px #000000 solid; */
		margin-left: 20px;
   	 	margin-top: 50px;
	}
    .pie #pie3{
        /* border:1px #000000 solid; */
        margin-left: 20px;
        margin-top: 50px;
    }
	.el-main .el-tabs .el-tabs__content{
		background-repeat: no-repeat;
		background-size: 100% 100%;
		/* height: 100%; */
		padding: 0px !important;
	}
</style>