vue+echarts,vue echarts高度自适应
这篇文章主要给大家介绍了关于某视频剪辑软件使用展示图表自适应的几种解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
1.使用window.onresize
让我的图表=echarts。init(文档。getelementbyid(DOM))
window.onresize=function () {
myChat.resize()
}
优点：可以根据窗口大小实现自适应
缺点：
多个图表自适应写法比较麻烦（当一个页面的图表太多时，这样写法不是很灵活);
让我的图表1=echarts。init(文档。getelementbyid(DOM 1))
让我的图表2=echarts。init(文档。getelementbyid(DOM 2))
window.onresize=function () {
myChat1.resize()
myChat2.resize()
}
多个某视频剪辑软件页面有大小改变时方法时，会被覆盖；
当某视频剪辑软件页面路由跳转到下一个页面时，上一个页面的大小改变时方法会继续执行，(这个时候下一个页面已经不需要大小改变时方法执行了，当图表过多时会造成页面卡顿)
2.使用window.addEventListener添加resize方法
让我的图表=echarts。init(文档。getelementbyid(DOM))
let sizeFun=function () {
myChat.resize()
}
窗户。addevent侦听器( resize ，sizeFun)
优点：
可以根据窗口大小实现自适应；
将图表方法封装以后，只需要执行一遍就可以实现多个图表的自适应；
不会被覆盖
缺点：
当某视频剪辑软件页面路由跳转到下一个页面时，上一个页面的大小改变时方法会继续执行
【造成这个问题的原因是因为某视频剪辑软件是单页面应用，echarts中的操作都是基于窗口，当然也可以使用window.removeEventListener在下一个页面删除绑定的方法】
点击查看window.removeEventListener使用注意点
3.实现在div使用onresize方法
开源代码库项目地址，喜欢的小伙伴给个明星，谢谢
实现原理：在差异上实现类似窗户的大小改变时监听，这样既能实现图表的自适应，也不会因为页面跳转之后继续执行三个页面的大小改变时方法
实现方法：
引入esresize.js(文末贴上代码)
在差异上绑定对应大小改变时方法
优点：
可以根据窗口大小实现自适应
页面跳转不会执行上次操作
多个方法不会覆盖
缺点：暂无发现（如有问题，欢迎各位补充)
文章参考：JS监听差异的调整大小事件
esresize.js代码
var EleResize={
_handleResize: function (e) {
var ele=e . target e . Sr元素
定义变量触发器=ele .__resizeTrigger__
如果(触发器){
定义变量处理程序=触发器_ _ z _ resizeListeners
如果(处理程序){
var size=handlers.length
for(var I=0；我尺寸；i ) {
var h=handlers[i]
变量处理程序=h.handler
变量上下文=h .上下文
handler.apply(上下文，[e])
}
}
}
},
_removeHandler: function (ele，Handler，context) {
定义变量处理程序=ele ._ _ z _ resizeListeners
如果(处理程序){
var size=handlers.length
for(var I=0；我尺寸；i ) {
var h=handlers[i]
if(h . handler===handler h . context===context){
handlers.splice(i，1)
返回
}
}
}
},
_ createsizetrigger:function(ele){
var obj=文档。createelement("对象")
obj.setAttribute(style ，
显示：块；位置：绝对；top:0；左：0;身高：100%;宽度：100%;溢出：隐藏；不透明度：0;指针事件：无；z索引：-1;)
obj.onload=EleResize ._handleObjectLoad
obj.type=text/html
ele.appendChild(obj)
obj.data=about:blank
返回对象
},
_handleObjectLoad:函数(evt) {
这个。内容文档。默认视图。_ _ resize trigger _ _=this .__resizeElement__
这个。内容文档。默认视图。addevent侦听器( resize ，EleResize ._handleResize)
}
}
如果(文档。附加事件){//ie9-10
EleResize.on=function (ele，handler，context) {
定义变量处理程序=ele ._ _ z _ resizeListeners
如果(!经手人){
处理程序=[]
ele .__z_resizeListeners=处理程序
ele .__resizeTrigger__=ele
ele.attachEvent(onresize ，EleResize ._handleResize)
}
handlers.push({
handler: handler，
上下文：上下文
})
}
EleResize.off=function (ele，handler，context) {
定义变量处理程序=ele ._ _ z _ resizeListeners
如果(处理程序){
EleResize ._removeHandler(ele，Handler，上下文)
if (handlers.length===0) {
ele.detachEvent(onresize ，EleResize ._handleResize)
删除ele ._ _ z _ resizeListeners
}
}
}
}否则{
EleResize.on=function (ele，handler，context) {
定义变量处理程序=ele ._ _ z _ resizeListeners
如果(!经手人){
处理程序=[]
ele .__z_resizeListeners=处理程序
if (getComputedStyle(ele，null))。position===static) {
ele.style.position=relative
}
var obj=EleResize ._createResizeTrigger(ele)
ele .__resizeTrigger__=obj
obj .__resizeElement__=ele
}
handlers.push({
handler: handler，
上下文：上下文
})
}
EleResize.off=function (ele，handler，context) {
定义变量处理程序=ele ._ _ z _ resizeListeners
如果(处理程序){
EleResize ._removeHandler(ele，Handler，上下文)
if (handlers.length===0) {
定义变量触发器=ele .__resizeTrigger__
如果(触发器){
扳机。内容文档。默认视图。移除事件侦听器( resize ，EleResize ._handleResize)
ele.removeChild(触发器)
删除ele .__resizeTrigger__
}
删除ele ._ _ z _ resizeListeners
}
}
}
}
导出{EleResize}
到此这篇关于某视频剪辑软件使用展示图表自适应的几种解决方案的文章就介绍到这了，更多相关某视频剪辑软件使用展示图表自适应内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。