合格率统计重构：物料属性分类查询各自的合格率饼图及对应的柱状图以和详情表格

gongchunyi

12 小时以前 47519ea9fd53705418a6c83ea40ae1cfecb26ae3

 src/components/echarts/echarts.vue

@@ -18,13 +18,13 @@
    chartStyle: {
      type: Object,
      default: () => ({
        height: '80%',
        height: '95%',
        width: '100%'
      })
    },
    dataset: {
      type: Object,
      default: () => {}
      default: () => { }
    },
    xAxis: {
      type: Array,
@@ -81,8 +81,8 @@
  watch: {
    options: {
      deep: true,
        // immediate: true,
        handler(val) {
      // immediate: true,
      handler(val) {
        this.$nextTick(() => {
          this.renderChart()
        })
@@ -198,6 +198,7 @@
    },
    renderChart() {
      const option = {
        ...this.options,
        backgroundColor: this.options.backgroundColor || '#fff',
        xAxis: this.xAxis,
        yAxis: this.yAxis,
@@ -240,7 +241,26 @@
        this.chartInstance.dispose()
        this.chartInstance = null
      }
    },

    //  下载图片功能
    downloadImage(fileName = 'chart') {
      if (!this.chartInstance) return;

      const url = this.chartInstance.getDataURL({
        type: 'png',
        pixelRatio: 2,
        backgroundColor: '#fff'
      });

      const a = document.createElement('a');
      a.href = url;
      a.download = `${fileName}.png`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }

  },
}
</script>