kd-aiot-frontend-vis/src/views/bpm/vis-page/components/charts/QualificationRateChart.vue

<template>
  <div ref="chartRef" class="qualification-rate-chart"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'QualificationRateChart',
  props: {
    data: {
      type: Object,
      default: () => ({
        productNames: [],
        rates: []
      })
    }
  },
  data() {
    return {
      chartInstance: null
    };
  },
  watch: {
    data: {
      handler() {
        this.updateChart();
      },
      deep: true
    }
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    this.destroyChart();
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chartRef;
      if (!chartDom) return;
      this.chartInstance = echarts.init(chartDom);
      this.updateChart();
    },
    updateChart() {
      if (!this.chartInstance || !this.data || !this.data.productNames || !this.data.rates) return;
      
      const { productNames, rates } = this.data;
      
      if (productNames.length === 0 || rates.length === 0) return;

      const option = {
        backgroundColor: 'transparent',
        grid: { left: '2%', right: '2%', bottom: '12%', top: '10%', containLabel: true },
        tooltip: {
          trigger: 'axis',
          formatter: '{b}: {c}',
          backgroundColor: '#fff',
          borderColor: '#2068b8',
          borderWidth: 1,
          padding: 10,
          textStyle: { color: '#000', fontSize: 14 },
          axisPointer: {
            type: 'line',
            axis: 'x',
            lineStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: 'rgb(31, 56, 109,1)' },
                { offset: 1, color: 'rgb(1, 83, 255,1)' }
              ]),
              width: 1.5,
              type: 'solid'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: productNames,
          axisTick: { show: true, lineStyle: { color: '#203454' }, alignWithLabel: true },
          axisLabel: { color: '#ccc', fontSize: 10, align: 'center', offset: 10 },
          axisLine: { lineStyle: { color: '#203454' } }
        },
        yAxis: {
          type: 'value',
          // min: 0,
          // max: 100,
          axisLabel: { color: '#ccc', fontSize: 12, formatter: '{value}%' },
          axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } },
          splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
        },
        series: [{
          name: '合格率',
          type: 'line',
          data: rates,
          symbol: 'circle',
          symbolSize: 8,
          smooth: true,
          itemStyle: { color: '#FFF' },
          lineStyle: { color: 'rgba(39, 102, 203)', width: 2 },
          emphasis: {
            itemStyle: { color: '#fff', borderColor: '#14cdc9', borderWidth: 2 }
          }
        }]
      };
      this.chartInstance.setOption(option);
    },
    destroyChart() {
      if (this.chartInstance) {
        this.chartInstance.dispose();
        this.chartInstance = null;
      }
    },
    handleResize() {
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    }
  }
};
</script>

<style scoped>
.qualification-rate-chart {
  width: 100%;
  height: 100%;
}
</style>