首页 前端知识 echarts图像怎么随浏览器窗口或指定元素变化而变化?

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

2024-02-11 10:02:57 前端知识 前端哥 892 753 我要收藏

一、问题产生

最近在做后台项目(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插件监测指定元素变化而变化。

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1789.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!