¡El empaquetado de subcomponentes de Echarts y múltiples subcomponentes de Echarts cambian con la ventana!

1. Efecto objetivo

        El código fuente está debajo, copie e instale npm echarts para ejecutar

        ¡Encapsule los echarts en subcomponentes y pase la opción correspondiente para mostrar el informe de datos!

        

        ¡Cambia el tamaño del informe de datos a medida que cambia el tamaño de la ventana!

                                                                        pantalla completa

 ​

                                                            Cuando la ventana se reduce 

  

2. Encapsular los subcomponentes de echarts

echarts utiliza la trilogía:

(1) Instancia de contenedor:         echart.init(document.getElementById(this.id));

(2) Ancho y alto del contenedor                

(3) opción de configuración          echart.setOption()

 

Entonces estos tres pueden ser los valores pasados ​​del componente padre al componente hijo,

 props: {
        id: {
            type: String,
            default: ''
        },
        options: {
            type: Object,
            default: {}
        },
        height: {
            type: Number,
            default: 300
        }
    },

        Crear una instancia en montado

mounted() {
 // 创建echarts实例并设置配置
 this.echarts = echart.init(document.getElementById(this.id));
 this.echarts.setOption(this.options);
}

        Destruye la instancia en beforeDestroy

    beforeDestroy() {
        // 销毁echarts实例
        this.echarts = null
    },

3. Múltiples subcomponentes de echarts cambian con cambios de ventana

(1) Evento desencadenado por cambio de tamaño de ventana 

window.addEventListener('resize', () => {
     // 调用子组件resetEcharts()
})

(2) echarts lleva resize() para realizar un cambio de tamaño de ventana adaptativo

  Subensamblaje

import * as echart from 'echarts';
export default {
    methods: {
        // 重置echarts
        resetEcharts() {
            echart.init(document.getElementById(this.id)).resize();
        }
    }
}

4. Código fuente

   /components/Echarts.vue

<template>
    <div :id="id" :style="{ 'height': height + 'px' }"></div>
</template>

<script>
import * as echart from 'echarts';
export default {
    props: {
        id: {
            type: String,
            default: ''
        },
        options: {
            type: Object,
            default: {}
        },
        height: {
            type: Number,
            default: 300
        }
    },
    data() {
        return {
            echarts: null
        }
    },
    mounted() {
        // 创建echarts实例并设置配置
        this.echarts = echart.init(document.getElementById(this.id));
        this.echarts.setOption(this.options);
    },
    beforeDestroy() {
        // 销毁echarts实例
        this.echarts = null
    },
    methods: {
        // 重置echarts
        resetEcharts() {
            echart.init(document.getElementById(this.id)).resize();
        }
    }
}
</script>

<style scoped></style>

aplicación.vue

<template>
  <div id="app">
    <!-- 柱状图 -->
    <div>
      <Echarts id="bar" :options="barOptiton" ref="barEchart"></Echarts>
    </div>
    <!-- 折线图 -->
    <div>
      <Echarts id="line" :options="lineOption" ref="lineEchart"></Echarts>
    </div>
  </div>
</template>

<script>
import Echarts from '@/components/Echarts'
export default {
  name: 'App',
  components: {
    Echarts
  },
  data() {
    return {
      lineOption: {
        title: {
          text: 'ECharts 折线图'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      },
      barOptiton: {
        title: {
          text: 'ECharts 柱状图'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
    }
  },
  mounted() {
    // 随窗口大小变化
    window.addEventListener('resize', () => {
      this.$refs.barEchart.resetEcharts()
      this.$refs.lineEchart.resetEcharts()
    })
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>