美文网首页
echarts横向柱状图容器高度随数据自适应

echarts横向柱状图容器高度随数据自适应

作者: 程序并非猿 | 来源:发表于2019-04-23 17:36 被阅读0次

省份名称和柱状图对不起  高度不够被压了

解决方法:

在图表setOption后添加如下代码:

this.autoHeight = that.userNextCityData.length * 20; // counst.length为柱状图的条数,即数据长度。20为我给每个柱状图的高度。

myChart.getDom().style.height = this.autoHeight + "px";

myChart.getDom().childNodes[0].style.height = this.autoHeight + "px";

myChart.getDom().childNodes[0].childNodes[0].setAttribute("height",this.autoHeight);

myChart.getDom().childNodes[0].childNodes[0].style.height = this.autoHeight + "px";

myChart.resize(); 

getDom是echarts实例下的方法

加完之后的效果,左侧白色为滚动条


相关文章

  • echarts横向柱状图容器高度随数据自适应

    省份名称和柱状图对不起 高度不够被压了 解决方法: 在图表setOption后添加如下代码: this.autoH...

  • 如何设置echarts随页面大小变化自适应

    echarts折线图随页面大小变化自适应 在项目中应用做echarts折线图,柱状图时会碰到需求是echarts会...

  • 十一 ECharts 入门

    ← AntV 入门案例:销售柱状图 ECharts 的绘图流程引入 js 库编写渲染容器 DOM,添加 width...

  • ios 柱状图

    由于工作需要要求柱状图可以横向滚动,但不是动态的随数据变化而变化,下面贴上代码 ColumnarView.m文件 ...

  • 新版弹性盒子

    新版弹性盒子 1.给容器设置的属性 容器里的项目变成横向排列. 容器没有高度的话,高度由项目撑开 项目没有高度的话...

  • H5中消除浮动的方法

    在网页开发中通常希望容器的高度自适应(不设置高度),让子元素把容器的高度撑开,当子元素设置浮动后容器的高度撑不开了...

  • Echarts 柱状图屏蔽显示 Y 轴数字

    需求: ECharts 柱状图,鼠标放在上面的时候会虚线显示 Y 轴高度,可是我的柱状图是统计人数的,出现 1.5...

  • ECharts插件使用

    柱状图,折线图,饼图 初始化echarts实例 1.准备一个div容器,为Echarts准备一个具备大小(宽高)的...

  • 02-Echarts-柱状图和通用配置

    Echarts-柱状图 步骤1 ECharts 最基本的代码结构 步骤2 准备x轴的数据 步骤3 准备 y 轴的数...

  • Echarts图表实现后台数据统计

    柱状图获取后台数据展示: 饼图获取后台数据展示: 前端实现方法: var myChart = echarts.in...

网友评论

      本文标题:echarts横向柱状图容器高度随数据自适应

      本文链接:https://www.haomeiwen.com/subject/zylbgqtx.html