vue 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容器一样了
错误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]).widthconst 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
}
vue echarts中改变canvas长和宽 自适应相关推荐
- Vue组件中使用canvas实现蜂巢效果的一些尝试
Vue组件中使用canvas实现蜂巢效果的一些尝试 前段时间,看到D3.js的官方网站的蜂巢效果,感觉不错,不过一直没有时间去实际的实现下,借这次机会,算是填了前面的坑~~,先来看看d3.js的效 ...
- vue项目中改变滚动条样式
vue项目中改变浏览器滚动条的样式,推荐一个超级好用的vue组件: vuescroll.js
- vue项目中,上传图片做像素大小宽高的限制
vue项目中,上传图片做像素大小宽高的限制 <el-uploadclass="avatar-uploader"action="http://upload.qiniu ...
- ctf图片隐写中改变图片高和宽
ctf图片隐写中改变图片高和宽 利用工具 Hex Editor Neo将图片进行十六进制分解, 然后我们可以找出该图片的像素高宽,转化成十六进制然后对应找到该像素点所在位置,进行修改即可.
- echarts中改变饼图的颜色
主要代码 itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'},norma ...
- vue项目中img使用svg图片修改颜色
需求:就是左边是文字,右边是文字,中间是一个箭头图片 前言:抛开vue项目已经封装好了svg的组件这种来讲,封装的可以直接使用color来进行改变颜色,然后这里讲下没有封装的写法 1:首先改svg图片 ...
- canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法 项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
- echarts中x轴文件消失_百度Echarts图表在Vue项目的完整引入以及按需加载
导语 近日在项目中需要进行图表展示,百度的Echarts图表是非常合适的一个选择.项目是vue-cli搭建的,如何在项目中引入Echarts就是一个问题了.亲自动手实践了下,整理总结,希望对小伙伴提供 ...
- 基于VUE+TS中引用ECharts的中国地图和世界地图密度表
(第一次写掘金,嗯也不知道写啥好.想了想,先来一份简单可口的老菜谱.虽然以前在其他平台也上过,换个地方说不准口味刚好呢哈哈哈哈-) 首先先附上官网 http://echarts.baidu.com/o ...
最新文章
- HTML开发中的一个问题
- 好久没更新日志了啊~!!今天发一个AS3的播放器
- 如何从grep -R中排除目录?
- windbg学习-----n(Set Number base)
- shop--12.阿里云部署以及域名绑定
- asp.net基础知识
- delphi OleVariant转换RecordSet
- Web项目测试流程总结
- 微信商户支付平台微信支付怎么开通
- 微信小程序 会议室课堂考勤签到助手 源码
- C# 用户自定义控件添加到工具箱
- python 时间转为秒数
- 网易乐得数据库及运维分享会
- 第十一届蓝桥杯大赛软件类B组省赛题目(2020蓝桥杯)
- Matlab如何修改坐标轴在figure里面的位置
- 海康威视:笔试题(20190908)
- java数据类型(java数据类型有哪些)
- 垃圾收集器G1和ZGC详解
- android kotlin 上传文件 上传图片
- UnixLinux 读书摘抄(简介)