How does the echarts image change with the browser window or specified elements?

1. Problems arise

Recently, when working on a background project (vue2+element-ui), I found a small bug. The size of the echarts image in the background cannot change with the browser window, which will cause the echarts image to be blocked when the browser window is adjusted. . The effect is as follows:

1. When in full screen, the image is as follows:

 2. When adjusting the browser window, the bug is as follows:

Two, solve the problem

1. Solve the problem that the image size changes with the browser window

Not much to say, just go to the code

A.template part:

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

B. script part

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. The effect is as follows:

In this way, the effect of changing with the change of the browser window is achieved.

2. The echarts image changes with the specified element

Sometimes echarts image changes with browser changes can not meet the demand, so I found a vue plug-in,

element-resize-detector , that's it

a. Installation: npm i element-resize-detector

b.main.js import:

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

c. use

template part:

<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>

script part:

<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. The effect is as follows:

In full screen state:

In zoom state:

It can be seen that the echarts image has begun to change with the change of the .content box. The principle is to monitor the change of the specified element through the vue plug-in.

That’s all the valuable information, I hope it can be helpful to you, if you don’t understand, read the comments in the code, the key points have been marked, if you don’t understand, just copy and paste, apply directly, I also want to record the difficulties encountered in the work Miscellaneous disease, nothing else, oh yeah!