echarts容器宽度-echarts自适应屏幕长度手动改变尺寸

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

引入echarts自适应屏幕长度，手动改变尺寸echarts改变画布长宽自适应

对于存储Echarts的DOM容器，如果给定的高宽是比例echarts容器宽度，渲染时按照比例给出DOM容器的高宽，但是DOM下的子元素div和canvas的高宽容器根据图标内容进行渲染。 项目使用时，DOM容器与底部的div会有高度差，不太美观。

希望Echarts画布和DOM容器的高度和宽度相同。

代码如下

方法一：根据浏览器宽高给echarts容器分配宽高

  



  import echarts from 'echarts'
  
  export default {
    name: "Chart",
    mounted() {
      var myChartContainer = document.getElementById('main')
	// 获取自适应的高度和宽度
      var resizeMyChartContainer = function() {
        myChartContainer.style.height = window.innerHeight * 0.65 + 'px';
        myChartContainer.style.width = window.innerWidth * 0.75 + 'px';
      };
	// 设置容器高和宽
      resizeMyChartContainer();
      var myChart = echarts.init(myChartContainer);
      let option = {};
      
      myChart.setOption(option);
	// 自适应高和宽
      window.onresize = function () {
        resizeMyChartContainer();
        myChart.resize();
      }
    }
  }

这里DOM容器下的div和canvas的高度和宽度与DOM容器相同。

错误1

document.getElementById('main').firstChild.firstChild.style.height = window.innerHeight * 0.55 + 'px'

如果强行获取canvas元素并改变其高度（上面的div和DOM高度不变），echarts会凸起，图片也会凸起，比例不对。

错误2

var myChart = echarts.init(myChartContainer, {width:'800px',height:'400px'});

当初始化时传入高度和宽度时，DOM元素下的div和canvas的高度和宽度仍然被渲染。 传入的数据限制了数据显示区域的高度和宽度。

方法二：使用echarts容器的父容器的宽和高作为其形参

首先介绍一下js如何获取元素的宽高：

var dom = document.getElementsByClassName('sec')[0];
var w1 = dom.style.width; // 只能获取到内联样式的属性值
var w2 = dom.currentStyle.width; // 虽然支持全部三种设置样式的方式，但是只支持IE
var w3 = window.getComputedStyle(dom).width; // 支持IE、Chrome、Firefox的全部三种样式
var w4 = dom.getBoundingClientRect().width; // 同样能获取及时的尺寸，支持IE、Chrome、Firefox,只是获取到的是数值不带单位

const resizeMyChartContainer = function() {
	// 无需再进行数值计算的，可直接拿带单位的属性
	const containerWidth = window.getComputedStyle(document.getElementsByClassName('app-main')[0]).width
	const containerHeight = window.getComputedStyle(document.getElementsByClassName('app-main')[0]).height
	// 需进行数值计算的，拿不带单位的属性
	const containerHeightWithoutUnit = document.getElementsByClassName('app-main')[0].getBoundingClientRect().height
	// 百分比计算 并加单位
	myChartContainer.style.height = containerHeightWithoutUnit * 0.65 + 'px'
	myChartContainer.style.width = containerWidth
}

echarts自适应屏幕长度手动改变尺寸

在vue组件中，首先调用moted钩子中初始化echarts的方法，然后添加窗口监听storm resize让窗口监听屏幕尺寸变化，然后使用定时器setTimeout每隔100执行一次echart.resize()事件毫秒。

注意this的要点，在外面重新定义this=this指针echarts容器宽度，并初始化resizeTimer为空。

以上是个人经验，希望能给您一个参考，也希望您支持站长源码网。