[echarts] 图表自适应宽高大小

 <div class="echart-wrap" :ref="wrapId" :id="wrapId" ><div :ref="chartsId"  :id="chartsId" ></div></div>

props: {wrapId: {// 需传递外层echarts外层id字符串，已便于动态获取外层宽高type: String,default: 'wrapId',},chartsId: {// echarts本身id 以便于dom操作，避免冲突type: String,default: 'chartsId',},

 .echart-wrap{width: 100%;height: 100%;position: relative;}

this.myChart.setOption(this.options, true);
window.addEventListener('resize', () => {this.echartsResize(this.myChart, this.chartsId, this.wrapId);});

 /***  echarts resize** @export* @param {*} myChart echarts 初始化后得到的值* @param {String} domId echarts的dom id* @param {String} domWrapId echarts 外层div的 dom id，用来获取宽高*/echartsResize(myChart, domId, domWrapId) {// 重置容器高宽this.echartsSetWH(domId, domWrapId);if (myChart) {myChart.resize();}},

    /*** echarts 设置宽高** @export* @param {String} domId echarts的dom id* @param {String} domWrapId echarts 外层div的 dom id，用来获取宽高*/echartsSetWH(domId, domWrapId) {const worldMapContainer = document.getElementById(domId);// // 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽if (worldMapContainer) {worldMapContainer.style.width = `${document.getElementById(domWrapId).offsetWidth - 5}px`;worldMapContainer.style.height = `${document.getElementById(domWrapId).offsetHeight - 5}px`;}},

Echarts图表自适应宽高大小

[echarts] 图表自适应宽高大小相关推荐

Echarts图表自适应宽高大小
最近项目用到了Echarts,他要求在容器上以行内样式固定宽高.这就无法按照浏览器大小进行自适应调整.经过一番纠结发现了解决方法. 官网描述的截图如下: 这个设计,多少有那么一点不够灵活. 我这个项目 ...
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] 图表自适应宽高大小相关推荐

最新文章

热门文章