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

<template>
  <div>
    <NotMsg v-show="notMsg"/>
    <div id="defectClassChart" class="defect-class-chart" style="width:600px;height:390px;" 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: 'DefectClassChart',
  mixins: [resize],
  components:{ NotMsg },
  props: {
		chartType: ''
	},
  data() {
    return {
      chart: null,
      notMsg:false
    }
  },
  computed: {
    israDayStatistic() {
      return this.$store.state.websocket.israDayStatistic
    }
  },
  watch:{
    israDayStatistic: {
			handler(newVal, oldVal) {
        if (newVal === oldVal) {
          return false
        }
        this.updateChart()
			}
		},
    chartType: {// 监听类型变化，更新图
			handler(newVal, oldVal) {
				this.updateChart()
			}
		}
  },
  mounted() {
		this.$el.addEventListener('resize', () => {
			console.log('resziing.....');
		});
		this.updateChart()
	},
  methods: {
    updateChart() {
      if (!this.israDayStatistic || this.israDayStatistic.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('defectClassChart'));
      let tempData = []
      let xData = []
      let yData = []
      this.israDayStatistic && this.israDayStatistic.length > 0 && this.israDayStatistic.map(item => {
        if (this.chartType === item.name) {
          tempData = item.data
          return
        }
      })
      tempData.length > 0 && tempData.map(item => {
        xData.push(item.checkType)
        yData.push(item.checkNum)
      })
      var option = {
        color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'],
        grid: { top: 40, right: 12, bottom: 65, left: 70 },
        xAxis: {
          type: "category",
          data: xData,
          axisLabel: {
            color: "#fffc",
            fontSize: 12,
            rotate: 25
          },
          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: [
          {
          data: yData,
          type: 'bar',
          barWidth: 12,
          label: {
            show: true,
            position: 'top',
            distance: 10,
            color: "#fffc"
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#5CB7FF' },
              { offset: 1, color: '#364BFE' }
            ])
          },
        }
      ]
      };
      option && this.chart.setOption(option)
    }
  }
}
</script>
<style scoped lang="scss">
.defect-class-chart {
	width: 100%;
	height: 100%;
}
</style>
<style>
  .defect-chart-tooltip {
    background: #0a2b4f77 !important;
    border: none !important;
    backdrop-filter: blur(12px);
  }
  .defect-chart-tooltip * {
    color: #fff !important;
  }
</style>