ShangHaiYuan-AnXin/src/app/plan-audit/wait-examineer/wait-examineer.component.ts

/*
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-12-25 16:13:50
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-12-28 16:14:25
 */
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
declare var echarts: any;

@Component({
  selector: 'app-wait-examineer',
  templateUrl: './wait-examineer.component.html',
  styleUrls: ['./wait-examineer.component.scss']
})
export class WaitExamineerComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
  ngOnDestroy () {
    /* this.indexbar.clear()
    this.indexbar.dispose() */
  }

  selected = new FormControl(0); //选项卡 实例
  level//类型
  js//组织机构
  addtime//时间
  previewshow=false//预览得分是否显示
  tableDate=[
    {level:"Ⅰ级预案",option:"更新",orgication:"浦东支队",unitstate:"已通过",addname:"赵信",addtime:"2020-12-15 10:36:24"},
    {level:"消火栓",option:"新增",orgication:"闵行支队",unitstate:"已拒绝",addname:"张三",addtime:"2020-12-15 10:36:24"},
    {level:"天然取水点",option:"删除",orgication:"上海总队",unitstate:"已拒绝",addname:"王五",addtime:"2020-12-15 10:36:24"}
  ]
  isallDate=true//是否显示完成数据，默认显示
  companyBuiltInGrouping=["基本信息","四周毗邻","消防设施"]
  indexbar //饼状图实例
  indexzhu
  //变更数据和全部数据切换按钮
  buttonChange(){
    this.isallDate=!this.isallDate
    this.previewshow=false
  }

  //分数饼状图
  bar(){
    var ec = echarts as any;
    this.indexbar=ec.init(document.getElementById('indexbar'),'light');
    var option = {
      tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      title: {
        text: '总分',
        left: 'center',
        bottom:70,
        textStyle:{
          color:'#FFFFFF',
          fontSize:16
        }
    },
      series: [
          {
              name: '分数',
              type: 'pie',
              radius: ['50%', '70%'],
              bottom:50,
              avoidLabelOverlap: false,
              label: {
                  show: true,
                  position: 'center',
                  fontSize:16,
                  color:'#FFFFFF'
              },
              
              labelLine: {
                  show: false
              },
              data: [
                  {value: 93, name: '93分', itemStyle:{color:'#2196F3'}},
                  {value:7, itemStyle:{color:'#FFFFFF'}}
              ]
          }
      ]
  };
  this.indexbar.setOption(option);
  }
  //分数柱状图
  zhu(){
    var ec = echarts as any;
    this.indexzhu=ec.init(document.getElementById('zhu'),'light');
    var option={
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        show:false,
        axisLine:{
          show:false
        },
        splitLine:{
          show:false
        },
        axisTick:{
          show:false
        },
    },
    yAxis: {
        type: 'category',
        axisTick:{
          show:false
        },
        axisLine:{
          show:false
        },
        axisLabel:{
          color:"#FFFFFF",
          fontSize:16
        },
        data: ['实战演练记录', '六熟悉记录', '上传CAD', '实景图', '功能分区', '重点单位', '消防设施','四周毗邻','基本信息']
    },
    series: [
        {
          
            type: 'bar',
            stack: '总量',
            showBackground: true,
            backgroundStyle: {
              color: '#FFFFFF'
             },
            label: {
                show: true,
                position: 'inside',
                fontSize:14,
                formatter: '{c}分'
            },
            data: [
              {value:18, itemStyle:{color:'#58D091'}},
              {value:16, itemStyle:{color:'#58D091'}},
              {value:19, itemStyle:{color:'#58D091'}},
              {value:16, itemStyle:{color:'#58D091'}},
              {value:16, itemStyle:{color:'#58D091'}},
              {value:13, itemStyle:{color:'#FFCC00'}},
              {value:6, itemStyle:{color:'#FF4D4D'}},
              {value:19, itemStyle:{color:'#58D091'}},
              {value:16, itemStyle:{color:'#58D091'}},
            ]
        },
        {
           
            type: 'bar',
            stack: '总量',
            label: {
                show: false,
                position: 'insideRight'
            },
            data: [2, 4, 1, 4, 4, 7, 14,1,4],
            itemStyle:{
              color:"#FFFFFF",
            },
        },
        
    ]
    }
    this.indexzhu.setOption(option);
  }
  preview(){
    this.previewshow=!this.previewshow
    if(this.previewshow){
      window.setTimeout(()=>{
        this.bar()
        this.zhu()
      },0)
    }
  }

}