Echarts pc端、移动端自适应方案 |
您所在的位置：网站首页 › Echarts图表绘制方法及需要注意的点 › Echarts pc端、移动端自适应方案 |
Echarts pc端、移动端自适应方案
|
1.ECHARTS动态设置宽高RESIZE()
今天在项目中遇到了Echarts宽高自适应问题，几经波折终于把问题解决了，下面直接上代码： // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById("main")); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); // window.onresize = function () { // myChart.resize(); // } window.addEventListener("resize", function () { height= $(window).height();//浏览器的高度 myChart.getDom().style.height = this.height+ "px"; myChart.resize(); });其中如果不写一下代码会出现高度为“0”的问题，这问题困扰我很久。 height= $(window).height();//浏览器的高度 myChart.getDom().style.height = this.height+ "px";当然也可以使用下面这种方法： window.onresize = function () { height= $(window).height();//浏览器的高度 myChart.getDom().style.height = this.height+ "px"; myChart.resize(); }当页面有多个echarts时使用addEventListener，页面中有一个echarts使用onresize。最后贴一下我的完整代码： 平整度PQI html, body { height: 94%; } body { width: 96%; margin-left: 2%; } .searchDiv { width: 100%; background: #fff; border-radius: 6px; margin-top: 10px; padding-top: 5px; padding-bottom: 13px; position: relative; box-shadow: 1px 1px 3px rgba(0, 0, 0, .2); } .chart_box{ width: 100%; height: 100%; margin: 0 auto; } // 指定图表的配置项和数据 var timeData = [ ['K0+000',92.01752395994401],['K0+100',94.41680058059887],['K0+200',94.51690258003522], ['K0+300',95.47765761019392],['K0+400',94.19067453695466],['K0+500',94.99757507671596], ['K0+600',95.35693076925763],['K0+700',93.92247663659853],['K0+800',93.71836575826592], ['K0+900',94.68277405922969], ['K1+000',92.56232552529856],['K1+100',93.72955245371271], ['K1+200',93.89243379737894],['K1+300',92.82839328035467],['K1+400',95.59801616751834], ['K1+500',94.51031719836116],['K1+600',94.3427163168764],['K1+700',95.57975693678478], ['K1+800',93.8493935850764],['K1+900',91.49034788231211], ['K2+000',93.83197677761953], ['K2+100',95.40819317211324],['K2+200',93.93025566074351],['K2+300',96.20912120728636], ['K2+400',91.26285809911494],['K2+500',94.48395299572667],['K2+600',94.17341073679233], ['K2+700',94.41414513382168],['K2+800',95.13962908136314],['K2+900',95.07437676398958], ['K3+000',88.22024909816928], ['K3+100',95.61276204679679],['K3+200',95.6856754966696],['K3+300',94.98373853770063], ['K3+400',94.56375026586436],['K3+500',90.22270205154712],['K3+600',94.39499037390935], ['K3+700',93.50129089894338],['K3+800',94.29612631237548],['K3+900',94.18655920063797], ['K4+000',94.81530813906906], ['K4+100',94.63179864256453],['K4+200',93.23563652516384],['K4+300',92.85775964545032], ['K4+400',95.33110738152101],['K4+500',95.15622593967682],['K4+600',93.11657865165435], ['K4+700',94.09980845847885],['K4+800',93.82440619288724],['K4+900',94.84988486262172], ['K5+000',92.32319480994794], ['K5+100',93.17158227207254],['K5+200',95.07229146493135],['K5+300',72.28460422334017], ['K5+400',96.70206967893753],['K5+500',87.15246171922549],['K5+600',63.087356003549985], ['K5+700',94.60821120400567],['K5+800',94.38448218384406] ]; var option = { title: { text: 'RQI' }, tooltip: { trigger: 'axis', // formatter:function(timeData) { // return timeData[1].toFixed(2); // //或者是下面这种，效果是一样的 // //return datas.value.toFixed(2); // } }, xAxis: { type: 'category', boundaryGap: false, axisLine: {onZero: true}, data: timeData.map(function (item) { return item[0]; }) }, yAxis: { splitLine: { show: false }, min:50 }, toolbox: { left: 'center', feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, axisPointer: { link: {xAxisIndex: 'all'} }, dataZoom: [{ startValue: 'K0', }, { type: 'inside' }], visualMap: { top: 10, right: 10, //可以使用 lt（小于，little than），gt（大于，greater than）， //lte（小于等于 lettle than or equals），gte（大于等于，greater than or equals） //来表达边界： pieces: [{ lt: 60, color: '#096' }, { gte: 60, lt: 70, color: '#ffde33' }, { gte: 70, lt: 80, color: '#ff9933' }, { gte: 80, lt: 90, color: '#cc0033' }, { gte: 90, // lte: 300, color: '#660099' }, // { // gt: 300, // color: '#7e0023' // } ], outOfRange: { color: '#999' } }, series: { name: 'RQI', type: 'line', data: timeData.map(function (item) { return item[1]; }), markLine: { silent: true, data: [{ yAxis: 60 }, { yAxis: 70 }, { yAxis: 80 }, { yAxis: 90 }] } } }; // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById("main")); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.onresize = function () { height= $(window).height();//浏览器的高度 myChart.getDom().style.height = this.height+ "px"; myChart.resize(); } // window.addEventListener("resize", function () { // height= $(window).height();//浏览器的高度 // myChart.getDom().style.height = this.height+ "px"; // myChart.resize(); // });
定义和用法 onresize 事件会在窗口或框架被调整大小时发生。 语法 onresize="SomeJavaScriptCode" 参数描述SomeJavaScriptCode必需。规定该事件发生时执行的 JavaScript。支持该事件的 HTML 标签 , , , , , , , , , , , , , , , , , , to , , , , , , , , , , , , , , , , , , , , , , , ,支持该事件的 JavaScript 对象 window 2.解决Echarts自适应： mounted() { window.onresize = () => { // 根据窗口大小调整曲线大小 this.myChart1.resize(); this.myChart2.resize(); this.myChart3.resize(); this.myChart4.resize(); }; },可能出现的问题：三个echarts图表,明明宽度设置的都是100%，却只有第一个生效以及如何实现自适应 解决办法 1.初始化时需要加上，确保操作的是最新的DOM this.$nextTick(_ => { });2.echarts图表自适应实现，需要在渲染图表后加上 // 监听窗口变化 - 只刷新最后一个图表 window.onresize = function(){ myEcharts1 = resize(); } //or window.onresize = ()=> { this.pieEcharts.resize(); }// 监听窗口变化 - 多个图表同时刷新 window.addEventListener("resize", function() { myChart.resize(); }); addEventListeneraddEventListener()方法将事件处理程序附加到元素，而不覆盖现有的事件处理程序。 您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序，即两个“单击”事件。 您可以将事件侦听器添加到任何DOM对象，而不仅仅是HTML元素。即window对象。 addEventListener()方法可以更容易地控制事件对冒泡的反应。 使用addEventListener()方法时，JavaScript与HTML标记分离，以提高可读性， 并允许您添加事件侦听器，即使您不控制HTML标记也是如此。 您可以使用removeEventListener()方法轻松删除事件侦听器。 语法：element.addEventListener(event, function, useCapture); 第一个参数 是事件的类型（如“ click”或“ mousedown”）。 第二个参数 是我们想要在事件发生时调用的函数。 第三个参数 是一个布尔值，指定是使用事件冒泡还是事件捕获。此参数是可选的。 请注意，您不要为事件使用“on”前缀; 用“ click”而不是“ onclick”。 document.getElementById("myBtn").addEventListener("click", displayDate); 将许多事件处理程序添加到同一元素addEventListener()方法允许您向同一元素添加许多事件，而不会覆盖现有事件 element.addEventListener("click", myFunction); element.addEventListener("click", mySecondFunction); element.addEventListener("mouseover", myFunction); element.addEventListener("mouseout", myThirdFunction); 将事件处理程序添加到window对象addEventListener()方法允许您在任何HTML DOM对象上添加事件侦听器，例如HTML元素，HTML文档，window对象或支持事件的其他对象， 如xmlHttpRequest对象。 添加在用户调整窗口大小时触发的事件侦听器： window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = sometext; }); |
【本文地址】
今日新闻 |
推荐新闻 |