<template>
  <div id="pieCmp">
    <cmpTitle title="当天通行统计" position="absolute"></cmpTitle>
    <!-- <div style="color: #fff;position: absolute;bottom: 0px;left: 20px;display: flex;justify-content: center;align-items: center;">测温异常统计 <div style="color: red;font-weight: bold;font-size: 20px;"> 0</div></div> -->
    <div id="pie" style="width:100%;height:100%"></div>
  </div>
</template>
<script>
  import {getUserInfo} from "../../../util/util.js"
  import cmpTitle from "../common/cmpTitle.vue"
  import {getTodayTemperature} from "@/api/grid/index.js";
  var colorArr=["#218de0", "#01cbb3", "#85e647", "#5d5cda", "#05c5b0", "#c29927"];
  var colorAlpha=['rgba(60,170,211,0.05)','rgba(1,203,179,0.05)','rgba(133,230,71,0.05)','rgba(93,92,218,0.05)','rgba(5,197,176,0.05)','rgba(194,153,39,0.05)']
  export default{
    components:{
      cmpTitle
    },
    data(){
      return{
        option : {
              grid: {
                  left: -100,
                  top: 50,
                  bottom: 10,
                  right: 10,
                  containLabel: true
              },
              tooltip: {
                  trigger: 'item',
                  formatter: "{b} : {c} ({d}%)"
              },
              legend: {
                show:false
              },

              polar: {},
              angleAxis: {
                  interval: 1,
                  type: 'category',
                  data: [],
                  z: 10,
                  axisLine: {
                      show: false,
                      lineStyle: {
                          color: "#0B4A6B",
                          width: 1,
                          type: "solid"
                      },
                  },
                  axisLabel: {
                      interval: 0,
                      show: true,
                      color: "#0B4A6B",
                      margin: 8,
                      fontSize: 16
                  },
              },
              radiusAxis: {
                  min: 20,
                  max: 120,
                  interval: 20,
                  axisLine: {
                      show: false,
                      lineStyle: {
                          color: "#0B3E5E",
                          width: 1,
                          type: "solid"
                      },
                  },
                  axisLabel: {
                      formatter: '{value} %',
                      show: false,
                      padding: [0, 0, 20, 0],
                      color: "#0B3E5E",
                      fontSize: 16
                  },
                  splitLine: {
                      lineStyle: {
                          color: "#07385e",
                          width: 2,
                          type: "dashed"
                      }
                  }
              },
              calculable: true,
              series: [ {
                  stack: 'a',
                  type: 'pie',
                  radius: '50%',
                  roseType: 'radius',
                  zlevel:10,
                 startAngle: 100,
                  label: {
                      normal: {
                          formatter: [ '{b|{b}}','{d|{d}%}'].join('\n'),
                          rich: {
                              b: {
                                  color: '#3bd2fe',
                                  fontSize: 10,
                                  lineHeight: 20
                              },
                              d: {
                                  color: '#d0fffc',
                                  fontSize: 10,
                                  height: 20
                              },
                          },
                      }
                  },
                  labelLine: {
                      normal: {
                          show: true,
                          length: 10,
                          length2: 45,
                          lineStyle: {
                          color: '#0096b1'

                          }
                      },
                      emphasis: {
                          show: false
                      }
                  },
                  data: [{
                          value: 0,
                          name: '人行道通行',
                           itemStyle: {
                            borderColor: colorArr[0],
                            borderWidth:2,
                            shadowBlur: 20,
                            shadowColor: "#41a8f8",
                            shadowOffsetx: 25,
                            shadowOffsety: 20,
                            color:colorAlpha[0]
                              }
                      },
                      {
                          value: 0,
                          name: '电瓶车道通行',
                          itemStyle: {
                            borderColor: colorArr[1],
                            borderWidth:2,
                            shadowBlur: 20,
                            shadowColor: colorArr[1],
                            shadowOffsetx: 25,
                            shadowOffsety: 20,
                            color:colorAlpha[1]
                              }
                      },
                      {
                          value: 0,
                          name: '内部人员',
                          itemStyle: {
                            borderColor: colorArr[2],
                            borderWidth:2,
                            shadowBlur: 20,
                            shadowColor: colorArr[2],
                            shadowOffsetx: 25,
                            shadowOffsety: 20,
                            color:colorAlpha[2]
                              }
                      },
                      {
                          value: 0,
                          name: '外部人员',
                          itemStyle: {
                            borderColor: colorArr[3],
                            borderWidth:2,
                            shadowBlur: 20,
                            shadowColor: colorArr[3],
                            shadowOffsetx: 25,
                            shadowOffsety: 20,
                            color:colorAlpha[3]
                              }
                      },
                      {
                          value: 0,
                          name: '测温异常',
                          itemStyle: {
                            borderColor: colorArr[4],
                            borderWidth:2,
                            shadowBlur: 20,
                            shadowColor: colorArr[4],
                            shadowOffsetx: 25,
                            shadowOffsety: 20,
                            color:colorAlpha[4]
                              }
                      },

                  ]
              }, ]
        },
      }
    },
    mounted(){
        // if(getUserInfo()){
          this.option.series[0].data.splice(0,2)
          this.requireData()
        // }
      },
      methods: {
        requireData(){
          var _this = this;
          let arr = this.option.series[0].data
          getTodayTemperature().then((res)=>{
            arr[0].value = res.data.data.insideCount
            arr[1].value = res.data.data.outsideCount
            arr[2].value = res.data.data.exceptionCount
            _this.drawLine();
          })
        },
        drawLine(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('pie'))
            // 绘制图表
            myChart.setOption(this.option);
        }
      }
  }
</script>

<style lang="less">
  #pieCmp{
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
  }
</style>
