echarts横向柱状图高度随动态数据长度自适应
一.需求echarts横向柱状图的容器高度,随后端返回的动态数据的长度自适应,瀑布流式展示二.分析难点:echarts的容器高度若是写死的话,后端返回数据过多时,则呈现的效果是容器高度不变,内容会被压缩的很小,但是会展示全;如果不给容器高度设置高度的话,他会默认一个高度,后端返回数据过多时,则呈现的效果是容器高度为默认高度,内容展示不全,容器装不下的剩下的内容会被遮挡看不见三.关键性代码和注释如下
·
一.需求
echarts横向柱状图的容器高度,随后端返回的动态数据的长度自适应,瀑布流式展示
二.分析
难点:echarts的容器高度若是写死的话,后端返回数据过多时,则呈现的效果是容器高度不变,内容会被压缩的很小,但是会展示全;如果不给容器设置高度的话,他会默认一个高度,后端返回数据过多时,则呈现的效果是容器高度为默认高度,内容展示不全,容器装不下的、剩下的内容会被遮挡看不见
三.关键性代码和注释如下
<div id="main2" style="width:100%"></div>
//注意宽度不写,echarts不会展示;高度不可写死,否则不能实现容器的高度自适应了
drawChart2(){
var option2={
//这里写你需要对应的配置项去控制这个echarts的样式与数据源
}
let myChart = this.$echarts.init(document.getElementById('main2'))
//获取到这个echarts图表的节点,并初始化
myChart.setOption(option2);
//将该echarts用之前配置好的option2的配置项进行渲染
var autoHeight = option2.yAxis.data.length* 50 + 150
//获取option2配置项中y轴的数据源的长度*每个柱状你想设定的高度+150的预留高度
myChart.getDom().style.height = autoHeight + "px"
//echarts有个getDom()的方法可以设置获取 ECharts 实例容器的 dom 节点,给节点分别设置高度
myChart.getDom().childNodes[0].style.height = autoHeight + "px"
myChart.getDom().childNodes[0].childNodes[0].setAttribute("height",autoHeight)
myChart.getDom().childNodes[0].childNodes[0].style.height = autoHeight + "px"
//根据窗口的大小变动图表
myChart.resize()
}
更多推荐
已为社区贡献2条内容
所有评论(0)