Echarts图表自适应宽高大小

最近项目用到了Echarts,他要求在容器上以行内样式固定宽高。这就无法按照浏览器大小进行自适应调整。经过一番纠结发现了解决方法.

官网描述的截图如下：

这个设计，多少有那么一点不够灵活。

我这个项目使用的是百分比布局。所以就拿这中情况举例，不过原理都是一样的

先说下整体的思路，就是在Echarts的容器外面套一个盒子来自适应屏幕大小，然后用js获取盒子宽高在赋值给Echarts容器。

(注意：很重要，Echarts接受一个具体的数值做为宽高，你直接百分比是不行的，所以要用js获取盒子宽高的具体数值在赋值给Echarts.)

废话少说看代码

html

<div class="chart_box">  //注意此处两层div，外层是正常适配的盒子，内层是echarts容器<div class="" id='chinesechart'></div>
</div>

chartBox为图表盒子节点,用CSS给这个div设置自适应的百分比宽高,

myChartsize为图表节点,用js让他的宽高和chartBox相等.

css

在这里要注意，好多网友反映，高度不自适应，我这里举的例子是高度300px;,要想自适应的话可以将高度也设置为百分比。你可以将外部包裹echarts的这个盒子当作正常的dom元素去做适配，然后将它的宽高赋值给echarts节点就行了。

.chart_box{width: 95%;height: 300px;  //注意，我这里举例子高度用的300px,如果想要高度也自适应这里可以用百分比margin: 0 auto;
}

js(想直接用的copy这里面的code即可)

//参数container为图表盒子节点.charts为图表节点  function chartssize (container,charts) {function getStyle(el, name) {　　if (window.getComputedStyle) {　　　return window.getComputedStyle(el, null);　　} else {　　　return el.currentStyle;　　}　}var wi = getStyle(container, 'width').width;var hi = getStyle(container, 'height').height;charts.style.width = wicharts.style.height = hi}

然后监控每次浏览器窗口变化的时候调用chartssize（）就可以了。


//这里说明一下，只是一个触发条件，举例的是窗口大小变动触发，根据实际应用场景不同可以灵活变动
window.onresize=function(){  chartssize（chartBox,myChartsize）
}

这里有需要注意的问题,通过myChartsize .style.width = chartBox .style.width 这种方式去设置是无效的.

因为直接获取chartBox .style.width是取不到的，因为chartBox你设置的是百分比宽高。

所以要用getComputedStyle（）方法取。

所以我封装了获取宽高的方法如下

  function getStyle(el, name) {　　if (window.getComputedStyle) {　　　return window.getComputedStyle(el, null);　　} else {　　　return el.currentStyle;　　}　}

Echarts图表自适应宽高大小相关推荐

[echarts] 图表自适应宽高大小
<div class="echart-wrap" :ref="wrapId" :id="wrapId" ><div :re ...
HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色
设置html文字大小根据页面大小自适应,在使用rem之前是使用的px和百分比,后来发现页面缩放或在小屏幕的电脑显示不尽人意,后改用rem,写法如:font-size: .21rem;或font-siz ...
echarts 坐标自适应,实现 ECharts 图表自适应
数据可视化的需求越来越多,图表自动生成技术也日渐成熟 ECharts ECharts 的功能十分强大,可以生成多种形式的图表,配置项十分灵活,可以根据实际需求自由定制官方文档: https://ww ...
html设置box设置长度自适应,CSS实现宽度自适应宽高16:9的矩形的示例
前面我们讲了怎么做一个自适应宽高1:1的正方形现在我们来讲讲做自适应16:9的矩形要怎么做第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding ...
Excel单元格插入图片，并自适应宽高——保姆级教程
Excel单元格插入图片,并自适应宽高--保姆级教程 author:陈镇坤27 日期:2022年3月22日创作不易,转载请注明来源摘要:计算图片高宽像素,将Excel单元格高宽单位转化为以像素为单 ...
html表格实现图片排列布局,纯css实现朋友圈照片排列布局（附单图自适应宽高）...
效果图 image.png image.png image.png image.png image.png 思路设置flex实现正常的三列布局 ul{ padding:0px; width:300p ...
CSS 实现自适应宽高的正圆
CSS 实现自适应宽高的正圆利用CSS伪元素增加父元素的高度,使其变成一个正方形代码 <span class="circle-container"><span ...
css实现整体网页16 9,CSS实现宽度自适应宽高16:9的矩形的示例
前面我们讲了怎么做一个自适应宽高1:1的正方形 https://www.ddpool.cn/css/753385.html 现在我们来讲讲做自适应16:9的矩形要怎么做第一步先计算高度,假设宽100 ...
图片圆角边框自适应宽高（深夜原创）
最近挺忙,没来得及更新博客!夜深了,给大家分析下几种图片圆角边框自适应宽高在不同情况下代码实现方法.请先看如下代码: <!DOCTYPE html> <head> <me ...

Echarts图表自适应宽高大小

Echarts图表自适应宽高大小相关推荐

最新文章

热门文章