Como a imagem do echarts muda com a janela do navegador ou elementos especificados?

1. Surgem problemas

Recentemente, ao trabalhar em um projeto em segundo plano (vue2+element-ui), encontrei um pequeno bug. O tamanho da imagem echarts em segundo plano não pode mudar com a janela do navegador, o que fará com que a imagem echarts seja bloqueada quando o navegador janela é ajustada. . O efeito é o seguinte:

1. Quando em tela cheia, a imagem é a seguinte:

 2. Ao ajustar a janela do navegador, o bug é o seguinte:

Dois, resolva o problema

1. Resolva o problema de que o tamanho da imagem muda com a janela do navegador

Não há muito a dizer, basta ir ao código

A. parte do modelo:

<template>
  <div class="content">
    <div id="main" style="width:80%;height:600px;margin:85px auto"></div>
  </div>
</template>

B. parte do roteiro

import echarts from 'echarts';
export default {
  name:'App',
  data(){
    return {}
  },
  mounted(){
    this.initEcharts();
  },
  methods:{
    initEcharts(){
      const myChart = echarts.init(document.getElementById("main"));
      myChart.setOption({
        xAxis: {
          data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
        },
        legend: {
          orient: 'horizontal',
          left: '10%',
          top: '1%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {          
              type: 'shadow'     
          },
          formatter: ''
        },
        yAxis: {},
        series: [
          {
            name:'男生',
            type: "bar", //形状为柱状图
            data: [11, 16, 30, 37, 67, 54, 25],
            barWidth:"25%",
            itemStyle: {
              normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'blue'
                  }, {
                      offset: 1,
                      color: 'skyblue'
                  }]),
              }
            }
          },
          {
            name:'女生',
            type: "bar", //形状为柱状图
            data: [10, 12, 40, 30, 30, 43, 50],
            barWidth:"25%",
            itemStyle: {
              normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'red'
                  }, {
                      offset: 1,
                      color: 'pink'
                  }]),
              }
            }
          }
        ]
      });
      // ***********随着浏览器大小调节图表***********   <-重点在此
      window.onresize = () => {
        myChart.resize()
      }
    }
  }
}
</script>

C. O efeito é o seguinte:

Desta forma, o efeito de mudança com a mudança da janela do navegador é alcançado.

2. A imagem do echarts muda com o elemento especificado

Às vezes, as alterações de imagem dos gráficos com as alterações do navegador não atendem à demanda, então encontrei um plug-in vue,

elemento-resize-detector , é isso

a. Instalação: npm i element-resize-detector

importação de b.main.js:

// 监听元素大小变化(为echarts服务)
import ElementResizeDetectorMaker from "element-resize-detector";
Vue.prototype.$erd = ElementResizeDetectorMaker();

c. usar

parte do modelo:

<template>
  <div class="content" style="width:80%;height:700px;border:1px solid black;">
    <div id="main" style="width:80%;height:600px;margin:85px auto"></div>
  </div>
</template>

parte do roteiro:

<script>
import echarts from 'echarts';
export default {
  name:'App',
  data(){
    return {}
  },
  mounted(){
    this.initEcharts();
  },
  methods:{
    initEcharts(){

      // ************引入vue监测插件************* <-重点在此
      const elementResizeDetectorMaker = require("element-resize-detector");
      let erd = elementResizeDetectorMaker();

      const myChart = echarts.init(document.getElementById("main"));
      myChart.setOption({
        xAxis: {
          data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
        },
        legend: {
          orient: 'horizontal',
          left: '10%',
          top: '1%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {          
              type: 'shadow'     
          },
          formatter: ''
        },
        yAxis: {},
        series: [
          {
            name:'男生',
            type: "bar", //形状为柱状图
            data: [11, 16, 30, 37, 67, 54, 25],
            barWidth:"25%",
            itemStyle: {
              normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'blue'
                  }, {
                      offset: 1,
                      color: 'skyblue'
                  }]),
              }
            }
          },
          {
            name:'女生',
            type: "bar", //形状为柱状图
            data: [10, 12, 40, 30, 30, 43, 50],
            barWidth:"25%",
            itemStyle: {
              normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'red'
                  }, {
                      offset: 1,
                      color: 'pink'
                  }]),
              }
            }
          }
        ]
      });
      // ***********随着指定元素大小调节图表***********   <-重点在此
      erd.listenTo(document.querySelector(".content"), () => {
        myChart.resize();
      });
    }
  }
}
</script>

d. O efeito é o seguinte:

No estado de tela cheia:

No estado de zoom:

Pode-se ver que a imagem do echarts começou a mudar com a mudança da caixa .content.O princípio é monitorar a mudança do elemento especificado através do plug-in vue.

Essas são todas as informações valiosas, espero que possam ser úteis para você, se não entender, leia os comentários no código, os pontos principais foram marcados, se não entender, basta copiar e colar, aplicar diretamente , também quero registrar as dificuldades encontradas no trabalho Doenças diversas, nada mais, ah sim!