420/vue_mdc_420.git

<template>
  <div class="chart-container" :id="chartContainerId"></div>
</template>
 
<script>
  import * as echarts from 'echarts'
 
  export default {
    name: 'DayUtilizationRateTrend',
    components: {},
    props: {
      toDecimal2NoZero: {
        type: Function
      }
    },
    data() {
      return {
        chartContainer: null,
        chartContainerId: 'left-col-chart4'
      }
    },
    mounted() {
      this.getChartDataByApi()
      window.addEventListener('resize', this.handleWindowResize)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    methods: {
      getChartDataByApi() {
        this.chartContainer = this.$echarts.init(document.getElementById(this.chartContainerId))
        this.initChart()
      },
 
      initChart() {
        const data = [
          {
            'number': 'A_1',
            'name': '1-D特种工艺',
            'count': 0.4452,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_2',
            'name': '2-D整体机匣',
            'count': 0.7642,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_3',
            'name': '3-D燃烧室机匣',
            'count': 0.4523,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_4',
            'name': '4-D焊接机匣工段',
            'count': 0.6987,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_5',
            'name': '5-D CRIC单元',
            'count': 0.8924,
            'planCount': null,
            'rateCount': null
          },
        ]
        const xAxisData = []
        const seriesData = []
        const option = {
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: params => `${params.name}：${params.value}%`
          },
          legend: {
            show: false,
            data: [],
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {    //图例文字的样式
              //fontSize:14,
              color: '#fff'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '-3%',
            top: '5%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: [],
              axisLine: {
                lineStyle: {
                  color: '#fff'
                }
              },
              axisLabel: {
                color: '#fff',
                rotate: 45,
                fontSize: '55%'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              data: [],
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#fff'
                }
              },
              axisLabel: {
                formatter: '{value} %',
                color: '#fff',
                fontSize: '70%'
              },
              splitLine: {
                lineStyle: {
                  color: '#626262'
                }
              }
            }
          ],
          dataZoom: [
            {
              type: 'inside',
              show: true,
              xAxisIndex: [0],
              start: 0,
              end: 100
            }
          ],
          series: [
            {
              name: '利用率',
              type: 'bar',
              barWidth: '50%',//柱图宽度
              data: [],
              label: {
                show: true,
                position: 'inside',
                padding: [1, 2],
                fontSize: '60%',
                color: '#fff',
                formatter: '{c}%',
                backgroundColor: '#4fb327',
                shadowColor: '#153e04',
                shadowBlur: 5,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                borderRadius: 5
              },
              //barCategoryGap:'180%',
              itemStyle: {
                normal: {
                  barBorderRadius: '',
                  color: function(params) {
                    const colorList = [
                      //1-D特种工艺单元
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#9cc4f6' },
                          { offset: 1, color: '#538dd6' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#ffffa2' },
                          { offset: 1, color: '#ffff01' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#97fcc5' },
                          { offset: 1, color: '#0bae8d' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#ffbc85' },
                          { offset: 1, color: '#e26c0a' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#fb78ba' },
                          { offset: 1, color: '#8f0149' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          //环件单元
                          { offset: 0, color: '#d297ff' },
                          { offset: 1, color: '#7030a0' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#ffe491' },
                          { offset: 1, color: '#8f6c00' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#ffb6b9' },
                          { offset: 1, color: '#fd4c53' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#92cbba' },
                          { offset: 1, color: '#18a387' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#ff5b62' },
                          { offset: 1, color: '#a02100' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#b5d5e3' },
                          { offset: 1, color: '#1b8bd0' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          //中小机匣单元
                          { offset: 0, color: '#ebd3ff' },
                          { offset: 1, color: '#e889ff' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#D69123' },
                          { offset: 1, color: '#a16900' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          //低压导向
                          { offset: 0, color: '#d588c8' },
                          { offset: 1, color: '#9545AE' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          //低压叶片 1 4
                          { offset: 0, color: '#97abd6' },
                          { offset: 1, color: '#6268b2' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#d7dab2' },
                          { offset: 1, color: '#b8aa15' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#e9c9b0' },
                          { offset: 1, color: '#D9646A' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#a4e3d6' },
                          { offset: 1, color: '#01A55E' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
 
                          { offset: 0, color: '#2052b1' },
                          { offset: 1, color: '#002b73' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          //盘件单元
                          { offset: 0, color: '#3e71e2' },
                          { offset: 1, color: '#0042c8' }
                        ]
                      ), new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          //结构件单元
                          { offset: 0, color: '#99d6cf' },
                          { offset: 1, color: '#21bf90' }
                        ]
                      )
                      , new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          //  7-D
                          { offset: 0, color: '#99d6cf' },
                          { offset: 1, color: '#0ad0bb' }
                        ]
                      )
                      , new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#FF9297' },
                          { offset: 1, color: '#FF9297' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#fb78ba' },
                          { offset: 1, color: '#ff77dc' }
                        ]
                      ),
                      //一厂
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#9cc4f6' },
                          { offset: 1, color: '#538dd6' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#ffffa2' },
                          { offset: 1, color: '#ffff01' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#0bae8d' },
                          { offset: 1, color: '#0bae8d' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#ffbc85' },
                          { offset: 1, color: '#e26c0a' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#97abd6' },
                          { offset: 1, color: '#842cb2' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#99d6cf' },
                          { offset: 1, color: '#0ad0bb' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#FF9297' },
                          { offset: 1, color: '#FF9297' }
                        ]
                      ),
                      new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          { offset: 0, color: '#fb78ba' },
                          { offset: 1, color: '#ff77dc' }
                        ]
                      )
                    ]
                    if (params.name == '1-D特种工艺' || params.name == '压气机一' || params.name == '1-D特种工艺单元') {
                      return colorList[24]
                    }
                    if (params.name == '2-D整体机匣' || params.name == '2-D整体机匣单元') {
                      return colorList[25]
                    }
                    if (params.name == '3-D燃烧室机匣' || params.name == '燃烧室机匣' || params.name == '3-D压气机机匣单元' || params.name == '3-D压气机机匣') {
                      return colorList[26]
                    }
                    if (params.name == '4-D焊接机匣工段' || params.name == '三工段' || params.name == '支架小环件单元' || params.name == '4-D焊接机匣单元') {
                      return colorList[27]
                    }
                    if (params.name == '5-D CRIC单元' || params.name == '10-D部件装配单元') {
                      return colorList[4]
                    }
                    if (params.name == '6-D风扇单元' || params.name == '6-D风扇机匣单元') {
                      return colorList[28]
                    }
                    if (params.name == '7-D涡轮机匣' || params.name == '7-D涡轮机匣单元') {
                      return colorList[29]
                    }
                    if (params.name == '8-D科研工段' || params.name == '科研工段' || params.name == '8-D科研单元') {
                      return colorList[30]
                    }
                    if (params.name == '10-D部件装配' || params.name == '10-D部件装配单元') {
                      return colorList[31]
                    }
                    if (params.name == 'JD-2军品机加' || params.name == '军品机加工段' || params.name == '四工段') {
                      return colorList[8]
                    }
                    if (params.name == '10-D生产室' || params.name == 'IGV叶片') {
                      return colorList[9]
                    }
 
                    if (params.name == '五工段') {
                      return colorList[10]
                    }
                    if (params.name == '六工段' || params.name == '中小机匣单元') {
                      return colorList[11]
                    }
                    if (params.name == '涡轮叶片') {
                      return colorList[12]
                    }
                    if (params.name == '低压导向') {
                      return colorList[13]
                    }
                    if (params.name == '低压叶片') {
                      return colorList[14]
                    }
                    if (params.name == '导向叶片') {
                      return colorList[15]
                    }
                    if (params.name == '压气机二') {
                      return colorList[16]
                    }
                    if (params.name == '整流一') {
                      return colorList[17]
                    }
                    if (params.name == '整流二') {
                      return colorList[19]
                    }
                    if (params.name == '一工段' || params.name == '盘件单元') {
                      return colorList[19]
                    }
                    if (params.name == '二工段' || params.name == '结构件单元') {
                      return colorList[20]
                    }
                    if (params.name == '七工段' || params.name == '环件单元') {
                      return colorList[5]
                    }
                    // build a color map as your need.
 
                    //return colorList[params.dataIndex]
                  }
                },
                emphasis: {
                  barBorderRadius: 13,
                  shadowBlur: 18,
                  shadowColor: 'rgba(218,170, 58, 0.8)'
                }
              }
            }
          ]
        }
        data.forEach(item => {
          xAxisData.push(item.name == null ? '' : item.name)
          seriesData.push({
            value: this.toDecimal2NoZero(((item.count == null ? '' : item.count) * 100) > 100 ? 100 : (((item.count == null ? '' : item.count) * 100))),
            hostType: (item.number == null ? '' : item.number)
          })
        })
        option.xAxis[0].data = xAxisData
        option.series[0].data = seriesData
        this.chartContainer.setOption(option, true)
      },
 
      /**
       * 窗口尺寸变化时触发
       * 调整图表尺寸以适应分辨率
       */
      handleWindowResize() {
        if (this.chartContainer) this.chartContainer.resize()
      }
    }
  }
</script>