Echarts跟随数据长度实现高度自适应解决出现滚动条的解决方案

简介: Echarts跟随数据长度实现高度自适应解决出现滚动条的解决方案

在echarts中,不设置高度,图表无法渲染;若设置固定高度,当柱状图数据过多时轴文本标签会自动隐藏且数据挤压,用户的体验差。通过给容器设置自适应高度,然后通过getDom()的方法解决此问题。

    var myChart = echarts.init(document.getElementById("container"));
    var option = {
        yAxis: {
            type: 'category',
            interval: 0,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        xAxis: {
            type: 'value'
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130, 80, 70, 110, 130],
            type: 'bar',
        }]
    }
    myChart.setOption(option);
    //柱状图y轴的长度 option.yAxis.data.length
    var autoHeight = option.yAxis.data.length * 50 + 150;
    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.getDom().childNodes[0].childNodes[0].style.background = "rgba(0,0,0,0.5)";
    //根据窗口的大小变动图表
    myChart.resize();


Done!

相关文章
|
2月前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
173 1
|
3月前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
150 23
echarts地图数据信息流向图效果
|
2月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
98 2
|
2月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
467 0
|
4月前
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
|
4月前
|
JavaScript 数据可视化 BI
echarts的使用 超好用的报表制作、数据的图形化展示
您提供的链接是关于echarts使用的博客文章,它介绍了如何使用echarts进行数据的图形化展示,包括制作报表和图表。echarts是一个强大的数据可视化工具,能够创建折线图、柱状图、饼图等多种图表类型。文章还提供了一个Demo演示和项目结构的图片,以及官网链接供读者参考。
echarts的使用 超好用的报表制作、数据的图形化展示
|
4月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
4月前
|
前端开发 数据可视化 JavaScript
【揭秘神器】如何用Pyecharts轻松召唤出Echarts?只需几行Python代码,让你的数据瞬间生动起来!
【8月更文挑战第21天】Pyecharts是一款基于Python的图表生成库,利用Echarts强大的JavaScript可视化能力,让开发者无需编写前端代码即可在Python环境中创建美观图表。本文通过实例演示如何安装Pyecharts并生成一个展示城市气温分布的柱状图,包括基本图表生成及自定义样式设置,如颜色调整、图例显示等,最终将图表嵌入HTML文件展示,适合各水平开发者快速掌握数据可视化技能。
57 0
|
5月前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
270 0
|
5月前
echarts 提示框异步获取数据 —— formatter 异步回调函数的使用
echarts 提示框异步获取数据 —— formatter 异步回调函数的使用
142 0

热门文章

最新文章