1.不良明细报表、品质异常排行报表、维修明细报表开发完成

loulijun2021

2022-09-22 dc1226c67b9b34b602254ed3ca3de0e5b272cffa

 src/views/bbgl/pzyc.vue

@@ -1,8 +1,265 @@
<template />
<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div style="margin: 30px auto;width: 1600px;" :style="{height:mainHeight+'px'}">
        <div id="Echarts" style="width: 100%;height: 100%" />
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { QuaneryDefectReportSearch } from '@/api/bbgl'

export default {
  name: 'Pzyc'
  name: 'Pzyc',
  data() {
    return {
      mainHeight: 400,
      echartsData: []
    }
  },
  created() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  mounted() {
    this.getQuaneryDefectReportSearch()
  },
  methods: {
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
      })
    },
    async getQuaneryDefectReportSearch() {
      const res = await QuaneryDefectReportSearch()
      if (res.code === '200') {
        this.echartsData = res.data
        this.getEcharts()
      }
    },
    getEcharts() {
      const option = {
        title: {
          text: '品质异常排行报表',
          left: '50%',
          top: '5%',
          textAlign: 'center',
          textStyle: {
            // color: '#fff',
            color: '#00ffff',
            fontSize: '20',
            fontWeight: 'bolder'
          }
        },
        backgroundColor: '#323a5e',
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '10%',
          top: '15%',
          containLabel: true
        },
        legend: {
          data: ['1', '2', '3'],
          right: 10,
          top: 12,
          textStyle: {
            color: '#fff'
          },
          itemWidth: 12,
          itemHeight: 10
          // itemGap: 35
        },
        xAxis: {
          name: '种类',
          nameTextStyle: {
            // color: ,
            fontSize: 16,
            lineHeight: 20
          },
          type: 'category',
          data: this.echartsData.map(r => r.name),
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            interval: 0,
            rotate: 20,
            textStyle: {
              fontSize: 16,
              fontFamily: 'Microsoft YaHei'
            }
          }
        },
        yAxis: {
          name: '数量',
          nameTextStyle: {
            // color: ,
            fontSize: 16,
            lineHeight: 20
          },
          type: 'value',
          // max: '1200',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisLabel: {}
        },
        dataZoom: [{
          show: true,
          height: 30,
          xAxisIndex: [
            0
          ],
          bottom: 30,
          start: 10,
          end: 80,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '110%',
          handleStyle: {
            color: '#d3dee5'

          },
          textStyle: {
            color: '#fff'
          },
          borderColor: '#90979c'

        }, {
          type: 'inside',
          show: true,
          height: 15,
          start: 1,
          end: 35
        }],
        series: [{
          name: '数量',
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#fccb05'
              }, {
                offset: 1,
                color: '#f5804d'
              }]),
              barBorderRadius: 12
            }
          },
          data: this.echartsData.map(r => r.cont)
        }
          // {
          //   name: '2',
          //   type: 'bar',
          //   barWidth: '15%',
          //   itemStyle: {
          //     normal: {
          //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //             offset: 0,
          //             color: '#8bd46e'
          //         }, {
          //             offset: 1,
          //             color: '#09bcb7'
          //         }]),
          //         barBorderRadius: 11,
          //     }

          //   },
          //   data: [400, 500, 500, 500, 500, 400,400, 500, 500]
          // },
          // {
          //   name: '3',
          //   type: 'bar',
          //   barWidth: '15%',
          //   itemStyle: {
          //     normal: {
          //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //             offset: 0,
          //             color: '#248ff7'
          //         }, {
          //             offset: 1,
          //             color: '#6851f1'
          //         }]),
          //     barBorderRadius: 11,
          //     }
          //   },
          //   data: [400, 600, 700, 700, 1000, 400, 400, 600, 700]
          // }
        ]
      }

      var app = {
        currentIndex: -1
      }

      const myChart = echarts.init(document.getElementById('Echarts'))

      setInterval(function() {
        var dataLen = option.series[0].data.length

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        })
        app.currentIndex = (app.currentIndex + 1) % dataLen
        // console.log(app.currentIndex);
        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        })
      }, 1000)

      if (option.textStyle == null) {
        option.textStyle = {
          fontFamily: 'Microsoft YaHei',
          color: '#ffffff'
        }
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.clear()
      myChart.setOption(option, true)

      window.addEventListener('resize', function() {
        myChart.resize()
      })

      return myChart
    }
  }
}
</script>