yudao-dev/src/views/databoard/components/DefectChart.vue

<template>
  <div>
    <NotMsg v-show="notMsg"/>
    <div id="defectChart" style="width:600px;height:238px;" v-show="!notMsg"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default {
  name: 'DefectChart',
  mixins: [resize],
  components:{ NotMsg },
  props: {
		chartTime: ''
	},
  data() {
    return {
      chart: null,
      tempData: [],
      notMsg:false
    }
  },
  computed: {
    israCheckType() {
      return this.$store.state.websocket.israCheckType
    },
    israDayStatistic() {
      return this.$store.state.websocket.israDayStatistic
    },
    israWeekStatistic() {
      return this.$store.state.websocket.israWeekStatistic
    },
    israMonthStatistic() {
      return this.$store.state.websocket.israMonthStatistic
    },
    israYearStatistic() {
      return this.$store.state.websocket.israYearStatistic
    }
  },
  watch: {
    israDayStatistic: {
			handler(newVal, oldVal) {
				if (this.chartTime === '日') {
          this.tempData = this.israDayStatistic
					this.updateChart()
				}
			}
		},
    israWeekStatistic: {
			handler(newVal, oldVal) {
				if (this.chartTime === '周') {
          this.tempData = this.israWeekStatistic
					this.updateChart()
				}
			}
		},
    israMonthStatistic: {
			handler(newVal, oldVal) {
				if (this.chartTime === '月') {
          this.tempData = this.israMonthStatistic
					this.updateChart()
				}
			}
		},
    israYearStatistic: {
			handler(newVal, oldVal) {
				if (this.chartTime === '年') {
          this.tempData = this.israYearStatistic
					this.updateChart()
				}
			}
		},
    chartTime: {// 监听类型变化，更新图
			handler(newVal, oldVal) {
        switch(this.chartTime){
          case '日':
            this.tempData = this.israDayStatistic
            break;
          case '周':
            this.tempData = this.israWeekStatistic
            break;
          case '月':
            this.tempData = this.israMonthStatistic
            break;
          case '年':
            this.tempData = this.israYearStatistic
            break;
          default:
        }
				this.updateChart()
			}
		}
  },
  mounted() {
		this.$el.addEventListener('resize', () => {
			console.log('resziing.....');
		});
		this.updateChart()
	},
  methods: {
    updateChart() {
      if (!this.tempData || this.tempData.length == 0) {
         this.notMsg = true
         return
      } else {
        this.notMsg = false
      }
      if (
        this.chart !== null &&
        this.chart !== '' &&
        this.chart !== undefined
      ) {
        this.chart.dispose()
      }
      this.chart = echarts.init(document.getElementById('defectChart'));
      let xData = []
      let seriesData = []
      for (let i = 0;i < this.israCheckType.length; i++) {
        let obj = {}
        obj.type = 'bar'
        obj.stack = 'all'
        obj.emphasis = {
          focus:"series"
        }
        obj.name = this.israCheckType[i]
        obj.barWidth = 12
        obj.data = []
        if (i === this.israCheckType.length-1) {
          obj.label = {
            show: true,
            position: 'top',
            color: "#fffc",
            formatter: (params)=>this.tempData[params.dataIndex].sum
          }
        }
        for (let j = 0;j < this.tempData.length; j++) {
          let num = 0
          for (let k = 0; k < this.tempData[j].data.length; k++) {
            if (this.israCheckType[i] === this.tempData[j].data[k].checkType) {
              obj.data.push(this.tempData[j].data[k].checkNum)
              num++
            }
          }
          if (num === 0) {
            obj.data.push(0)
          }
        }
        seriesData.push(obj)
      }

      this.tempData && this.tempData.length > 0 && this.tempData.map(item => {
        xData.push(item.name)
      })
      var option = {
        color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"],
        grid: { top: 90, right: 12, bottom: 20, left: 70 },
        legend: {
          top: 0,
          left: 100,
          padding: 5,
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 12,
          height: 12,
          textStyle: {
            color: "#DFF1FE",
            fontSize: 12,
          },
          data:this.israCheckType,
        },
        xAxis: {
          type: "category",
          data: xData,
          axisLabel: {
            color: "#fffc",
            fontSize: 12,
          },
          axisTick: { show: false },
          axisLine: {
            lineStyle: {
              width: 1,
              color: "#213259",
            },
          },
        },
        yAxis: {
          name: "单位/个",
          nameTextStyle: {
            color: "#fff",
            fontSize: 10,
            align: "right",
          },
          type: "value",
          axisLabel: {
            color: "#fff",
            fontSize: 12,
            formatter: "{value}",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#213259",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#213259a0",
            },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          className: "defect-chart-tooltip"
        },
        series: seriesData
      };
      option && this.chart.setOption(option)
    }
  }
}
</script>
<style>
  .defect-chart-tooltip {
    background: #0a2b4f77 !important;
    border: none !important;
    backdrop-filter: blur(12px);
  }
  .defect-chart-tooltip * {
    color: #fff !important;
  }
</style>