2018主流网站建设语言,在国内做敏感网站,在线测评网站怎么做,新闻头条国内大事项目场景#xff1a; 在制作数据视图时经常会遇到多个数据视图的情况#xff0c;在多个数据视图的情况下做自适应是比较麻烦的#xff0c;这里就详细的分析一下该如何去制作#xff0c;分享一下我的解决办法及思路。 定义 DOM 容器 这里需要注意一个地方#xff0c;在定…项目场景 在制作数据视图时经常会遇到多个数据视图的情况在多个数据视图的情况下做自适应是比较麻烦的这里就详细的分析一下该如何去制作分享一下我的解决办法及思路。 定义 DOM 容器 这里需要注意一个地方在定义高宽的 DOM 容器时不能把宽度定为固定大小或者父级也不能为固定大小如果是固定的宽度哪怕重绘了宽度也是一样的所以是无法实现自适应的一般情况下都是固定高度然后宽度自适应。 例 div reflinechart stylewidth:100%;height:400px;/div想要实现数据视图的自适应就得先保证它的DOM容器是自适应的。 单个数据视图进行自适应 单个数据视图的解决方案就比较多了也比较简单就不过多的说明了 1. 使用window.onresize let myChart echarts.init(document.getElementById(dom)) window.onresize function () {myChat.resize() }这个是通过ECharts自带的方法 myChart是你自己初始化一个 echarts在myChart中有一个方法resize调用这个方法可以实现重绘实现自适应 这里拓展一下myChat.resize()是可以自定义大小的 myChart.resize({width: 800,height: 400 });具体使用方法就看需求了。 这里还需要注意一个地方就是这个方法也是可以实现多个数据视图自适应但是比较笨一点 let myChart1 echarts.init(document.getElementById(dom1)) let myChart2 echarts.init(document.getElementById(dom2)) window.onresize function () {myChat1.resize()myChat2.resize() }2.使用window.addEventListener添加resize方法 let myChart echarts.init(document.getElementById(dom)) let sizeFun function () {myChat.resize() } window.addEventListener(resize, sizeFun ) 这个方法我也使用过最大的问题就是当离开这个页面的时候这个函数依旧会去执行当其他页面不存在这个DOM时则会报错并且触发的非常频繁还需要写防抖节流器所以不推荐使用这里就不过多说明了。 多个数据视图进行自适应 这里分享一下我的思路 1.通过父子传值 我是先用一个父组件然后将这些视图分成一个个的子组件在父组件监听浏览器的事件当窗口大小改变之后把一个定义好的值我这里用的是resizetrue传给子组件子组件接收到时候在执行重绘。 具体代码就不展示了因为就是一个父子传值的问题也比较简单主要是分享一下解决方案 2.通过封装 这个是我目前使用的方法但是这个方法存在一定的局限性就是先要确定需求保证使用的数据视图是差不多的比如都使用到折线图柱状图这种相似的数据视图 我这里全部使用的就是折线面积图当点击某个端点时则切换显示该字段的明细。 还有可以切换柱状图 数据视图 这里说一下为什么这样做 使用过ECache都知道这个组件的代码量比较大尤其是在多个数据视图的情况下代码冗余量非常多。因为我封装好了需要修改时只需要修改封装的组件降低维护成本后续在需要制作时直接调用即可 具体如何封装我会在后续发布 通过封装我们就可以非常简单的解决这个自适应的问题了。 option option1;option myChart.setOption(option);//根据窗口的大小变动图表 --- 重点let listener function(){myChart.resize()}EleResize.on(chartDom,listener)EleResize 这个JS是我在网上找到的一个ECharts图表自适应的JS // ECharts图表自适应JS var EleResize {_handleResize: function (e) {var ele e.target || e.srcElementvar trigger ele.__resizeTrigger__if (trigger) {var handlers trigger.__z_resizeListenersif (handlers) {var size handlers.lengthfor (var i 0; i size; i) {var h handlers[i]var handler h.handlervar context h.contexthandler.apply(context, [e])}}}},_removeHandler: function (ele, handler, context) {var handlers ele.__z_resizeListenersif (handlers) {var size handlers.lengthfor (var i 0; i size; i) {var h handlers[i]if (h.handler handler h.context context) {handlers.splice(i, 1)return}}}},_createResizeTrigger: function (ele) {var obj document.createElement(object)obj.setAttribute(style,display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;)obj.onload EleResize._handleObjectLoadobj.type text/htmlele.appendChild(obj)obj.data about:blankreturn obj},_handleObjectLoad: function () {this.contentDocument.defaultView.__resizeTrigger__ this.__resizeElement__this.contentDocument.defaultView.addEventListener(resize, EleResize._handleResize)} } if (document.attachEvent) { // ie9-10EleResize.on function (ele, handler, context) {var handlers ele.__z_resizeListenersif (!handlers) {handlers []ele.__z_resizeListeners handlersele.__resizeTrigger__ eleele.attachEvent(onresize, EleResize._handleResize)}handlers.push({handler: handler,context: context})}EleResize.off function (ele, handler, context) {var handlers ele.__z_resizeListenersif (handlers) {EleResize._removeHandler(ele, handler, context)if (handlers.length 0) {ele.detachEvent(onresize, EleResize._handleResize)delete ele.__z_resizeListeners}}} } else {EleResize.on function (ele, handler, context) {var handlers ele.__z_resizeListenersif (!handlers) {handlers []ele.__z_resizeListeners handlersif (getComputedStyle(ele, null).position static) {ele.style.position relative}var obj EleResize._createResizeTrigger(ele)ele.__resizeTrigger__ objobj.__resizeElement__ ele}handlers.push({handler: handler,context: context})}EleResize.off function (ele, handler, context) {var handlers ele.__z_resizeListenersif (handlers) {EleResize._removeHandler(ele, handler, context)if (handlers.length 0) {var trigger ele.__resizeTrigger__if (trigger) {trigger.contentDocument.defaultView.removeEventListener(resize, EleResize._handleResize)ele.removeChild(trigger)delete ele.__resizeTrigger__}delete ele.__z_resizeListeners}}} } export {EleResize} 将这个JS导入到页面中就可以直接使用了。