echarts图像怎么随浏览器窗口或指定元素变化而变化？

一、问题产生

最近在做后台项目（vue2+element-ui）时，发现一个小bug，后台的echarts图像大小并不能随浏览器窗口变化而变化，这就会导致调整浏览器窗口时，echarts图像被遮挡的效果。效果如下：

1、全屏时，图像如下：

 2、调整浏览器窗口时，bug如下：

二、解决问题

1、解决图像大小随浏览器窗口变化而变化的问题

话不多说，直接上代码

A.template部分:

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

B.script部分

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.效果如下：

这样就达到了随浏览器窗口变化而变化的效果

2.echarts图像随指定元素变化而变化

有的时候echarts图像随浏览器变化而变化是不能满足需求的，于是乎就找了一个vue的插件，

element-resize-detector，就是它

a.安装：npm i element-resize-detector

b.main.js引入：

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

c.使用

template部分：

<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部分：

<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.效果如下：

全屏状态下：

缩放状态下：

可以看出，echarts图像已经开始随.content盒子变化而变化 ，原理就是通过vue插件监测指定元素变化而变化。

有价值的信息就这些，希望对你有帮助，不懂的话看看代码里的注释，已经标出重点，在不明白就直接复制粘贴，直接套用，我也是为了记录一下工作中遇到的疑难杂症，不为其他，欧耶！