文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue echarts实现改变canvas长和宽自适应

2024-04-02 19:55

关注

echarts改变canvas长宽自适应

存放Echarts的DOM容器,如果给的高和宽是百分比,渲染的时候DOM容器的高和宽是按百分比给的,但是DOM容器下的子元素div和canvas高和宽是根据图标内容渲染。项目应用的时候,底部会有一部分DOM容器和div的高度差,不美观。

希望Echarts的canvas和DOM容器的高宽一致。

下面给出代码

方法一:根据浏览器宽高为echarts容器赋宽高

<template>
  <div id="main"></div>
</template>
<script>
  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();
      }
    }
  }
</script>

这里的DOM容器下的div和canvas高和宽和DOM容器一样了

echarts前端的源码

错误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组件中在mouted钩子里先调用初始化echarts的方法,然后再添加window监听事件resize,让window监控屏幕大小变化,从而用定时器setTimeout每隔100毫秒执行echart.resize()事件。

注意this的指向,在外面从新定义this=this指向,还有初始化resizeTimer为空

在这里插入图片描述

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯