Sinopec-Anxin/src/app/pages/home-page/home-page.component.ts

import { Component, OnInit } from '@angular/core';
import * as echarts from 'echarts';
@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.scss']
})
export class HomePageComponent implements OnInit {

  constructor() { }

  equipmentechart//设备饼图
  equipmentechartdata = [
    { name: '接入油站', value: '100' },
    { name: '摄像头', value: '100' },
    { name: '加油站模型', value: '100' }
  ]
  equipmentechartOption = {
    color: ['#91CCFF', '#46DFFF', '#36A2FF'],
    tooltip: {
      trigger: 'item'//触发类型
    },
    legend: {
      bottom: '8%',
      left: 'center',
      orient: 'vertical',
      itemGap: 20,
      itemWidth: 6,
      itemHeight: 6,
      formatter: (name) => {
        let data = this.equipmentechartdata
        let value
        for (var i = 0, l = data.length; i < l; i++) {
          if (data[i].name == name) {
            value = data[i].value;
          }
        }
        return '{a|' + name + '}' + '{b|' + value + '}';
      },
      textStyle: {
        color: '#fff',
        rich: {
          a: {
            width: 70
          },
          b: {
            // align: 'right',
          }
        }
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['55%', '70%'],
        bottom: '30%',
        avoidLabelOverlap: false,//防止标签重叠策略
        label: {//每一个标签外网延伸的引导说明
          show: false,
          position: 'outside'
        },
        labelLine: {//引导线
          show: true,
          showAbove: true
        },
        emphasis: {//中间高亮区域
          label: {
            show: false,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        data: this.equipmentechartdata,
        tooltip: {//鼠标移入提示
          position: 'left',
          padding: [14, 19],
          backgroundColor: 'rgba(28, 129, 218, 0.4)',
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        }
      }
    ]
  };

  warningechartpie//预警饼图
  warningechartpieOption = {
    color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'],
    tooltip: {
      trigger: 'item'//触发类型
    },
    series: [
      {
        type: 'pie',
        radius: ['65%', '80%'],
        bottom: '30%',
        avoidLabelOverlap: false,//防止标签重叠策略
        label: {//每一个标签外网延伸的引导说明
          show: false,
          position: 'outside'
        },
        labelLine: {//引导线
          show: true,
          showAbove: true
        },
        emphasis: {//中间高亮区域
          label: {
            show: false,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        data: [
          { name: '员工服务', value: '100' },
          { name: '监控设备检测', value: '100' },
          { name: '安全隐患', value: '100' },
          { name: '员工服务2', value: '100' },
          { name: '监控设备检测2', value: '100' },
          { name: '安全隐患2', value: '100' }
        ],
        tooltip: {//鼠标移入提示
          position: 'right',
          padding: [14, 19],
          backgroundColor: 'rgba(28, 129, 218, 0.4)',
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        }
      }
    ]
  };


  oilchartpie//卸油饼图
  oilchartpieData = [
    { name: '事前准备', value: '100' },
    { name: '事中操作', value: '100' },
    { name: '全程监测', value: '100' }
  ]
  oilchartpieOption = {
    color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'],
    tooltip: {
      trigger: 'item'//触发类型
    },
    legend: {
      bottom: '8%',
      left: 'center',
      orient: 'vertical',
      itemGap: 10,
      itemWidth: 6,
      itemHeight: 6,
      formatter: (name) => {
        let data = this.oilchartpieData
        let value
        for (var i = 0, l = data.length; i < l; i++) {
          if (data[i].name == name) {
            value = data[i].value;
          }
        }
        return '{a|' + name + '}' + '{b|' + value + '}';
      },
      textStyle: {
        color: '#fff',
        rich: {
          a: {
            width: 60
          },
          b: {
            // align: 'right',
          }
        }
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['65%', '80%'],
        bottom: '30%',
        avoidLabelOverlap: false,//防止标签重叠策略
        label: {//每一个标签外网延伸的引导说明
          show: false,
          position: 'outside'
        },
        labelLine: {//引导线
          show: true,
          showAbove: true
        },
        emphasis: {//中间高亮区域
          label: {
            show: false,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        data: this.oilchartpieData,
        tooltip: {//鼠标移入提示
          position: 'right',
          padding: [14, 19],
          backgroundColor: 'rgba(28, 129, 218, 0.4)',
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        }
      }
    ]
  };

  warningechartbar//预警折线图
  warningechartbarOption = {
    xAxis: {
      type: 'category',
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
      axisLine: {
        show: false,
        lineStyle: {
          color: '#91CCFF'
        }
      },
      axisTick: {//刻度线
        show: false
      },
      inverse: true

    },
    yAxis: {
      type: 'value',
      nameTextStyle: {
        color: '#C4E2FC'
      },
      splitLine: {//分割线
        lineStyle: {
          color: ['#0f4374'],
          width: 2
        }
      },
      axisTick: {//刻度线
        show: false
      },
      axisLine: {//轴线
        show: false,
        lineStyle: {
          color: '#C4E2FC'
        }
      }
    },
    series: [
      {
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 16, 15, 14, 13, 12, 11, 10, 8, 7, 6, 3, 2, 1],
        type: 'line',
        smooth: true,
        showSymbol: false,
        label: {
          show: true,
          position: 'top'
        },
        lineStyle: {
          color: '#46DFFF',
          width: 1
        },
        areaStyle: {
          opacity: 0.8,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0, color: '#46DFFF' // 0% 处的颜色
              },
              {
                offset: 0.3, color: '#46DFFF' // 0% 处的颜色
              },
              {
                offset: 1, color: 'rgba(0, 13, 33, 0)' // 100% 处的颜色
              }],
            global: false // 缺省为 false
          }
        },
      }
    ],
    grid: {
      left: '36px',
      right: '30px',
      bottom: '38px',
      top: '50px'
    }
  };

  oilchartbar//卸油折线图
  oilchartbarOption = {
    xAxis: {
      type: 'category',
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
      axisLine: {
        show: false,
        lineStyle: {
          color: '#91CCFF'
        }
      },
      axisTick: {//刻度线
        show: false
      },
      inverse: true

    },
    yAxis: {
      type: 'value',
      nameTextStyle: {
        color: '#C4E2FC'
      },
      splitLine: {//分割线
        lineStyle: {
          color: ['#0f4374'],
          width: 2
        }
      },
      axisTick: {//刻度线
        show: false
      },
      axisLine: {//轴线
        show: false,
        lineStyle: {
          color: '#C4E2FC'
        }
      }
    },
    series: [
      {
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 16, 15, 14, 13, 12, 11, 10, 8, 7, 6, 3, 2, 1],
        type: 'line',
        smooth: true,
        showSymbol: false,
        label: {
          show: true,
          position: 'top'
        },
        lineStyle: {
          color: '#36A2FF',
          width: 1
        },
        areaStyle: {
          opacity: 0.8,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0, color: '#36A2FF' // 0% 处的颜色
              },
              {
                offset: 0.3, color: '#36A2FF' // 0% 处的颜色
              },
              {
                offset: 1, color: 'rgba(0, 13, 33, 0)' // 100% 处的颜色
              }],
            global: false // 缺省为 false
          }
        },
      }
    ],
    grid: {
      left: '36px',
      right: '30px',
      bottom: '38px',
      top: '50px'
    }
  };
  ngOnInit(): void {
    // 饼图
    this.equipmentechart = echarts.init(document.getElementById('equipmentechart'));
    this.equipmentechart.setOption(this.equipmentechartOption);
    // 预警饼图
    this.warningechartpie = echarts.init(document.getElementById('eventechartpie'));
    this.warningechartpie.setOption(this.warningechartpieOption);
    // 预警线图
    this.warningechartbar = echarts.init(document.getElementById('eventechartline'));
    this.warningechartbar.setOption(this.warningechartbarOption);
    // 卸油饼图
    this.oilchartpie = echarts.init(document.getElementById('oilechartpie'));
    this.oilchartpie.setOption(this.oilchartpieOption);
    // 卸油线图
    this.oilchartbar = echarts.init(document.getElementById('oilechartline'));
    this.oilchartbar.setOption(this.oilchartbarOption);


    window.onresize = () => {
      setTimeout(() => {
        this.warningechartpie.resize();
        this.warningechartbar.resize();
        this.oilchartpie.resize();
        this.oilchartbar.resize();
      }, 200);

    };

    this.rollStart()
  }

  timer
  rollStart() {
    var ROLL_SPEED = 100
    var noticeList1 = document.getElementById('notice-list');
    var noticeList2 = document.getElementById('notice-list-2');
    var listWrapper = document.getElementById('list-wrapper');
    noticeList2.innerHTML = noticeList1.innerHTML;
    this.timer = setInterval(rollStart, ROLL_SPEED);

    function rollStart() {
      if (Math.abs(_subStr(listWrapper.style.top)) >= noticeList1.clientHeight) {
        listWrapper.style.top = '0px'
      } else {
        var top = listWrapper.style.top
        listWrapper.style.top = _subStr(top) - 1 + 'px'
      }
    }
    // 截取px前数值
    function _subStr(str) {
      var index = str.indexOf('px');
      if (index > -1) {
        return parseFloat(str.substr(0, index + 1))
      }
    }
  }
  mouseEnter() {
    // console.log('进入了')
    window.clearInterval(this.timer);
  }
  mouseleave() {
    // console.log('离开了')
    this.rollStart()
  }


  areaList: any = [
    { name: '加油区', num: 92 },
    { name: '油罐区', num: 81 },
    { name: '出入口', num: 66 },
    { name: '便利店', num: 34 },
    { name: '办公区', num: 20 },
    { name: '其他区域', num: 17 }
  ]
  eventList: any = [
    { name: '员工服务', num: 92 },
    { name: '监控设备监测', num: 81 },
    { name: '安全隐患', num: 77 },
    { name: '车流调查', num: 34 },
    { name: '员工服务', num: 92 },
    { name: '监控设备监测', num: 81 },
    { name: '安全隐患', num: 77 },
    { name: '车流调查', num: 34 },
    { name: '安全隐患', num: 77 },
    { name: '车流调查', num: 34 }
  ]
  stationList: any = [
    { name: '北京市第十九加油站', num: 92 },
    { name: '北京市第十九加油站', num: 81 },
    { name: '北京市第十九加油站', num: 77 },
    { name: '北京市第十九加油站', num: 34 },
    { name: '北京市第十九加油站', num: 92 },
    { name: '北京市第十九加油站', num: 81 },
    { name: '北京市第十九加油站', num: 77 },
    { name: '北京市第十九加油站', num: 34 },
    { name: '北京市第十九加油站', num: 77 },
    { name: '北京市第十九加油站', num: 34 }
  ]
  width(width) {
    let style: any = {}
    style.width = width + '%';
    return style
  }
}