echarts图表legend高度自适应

已于 2023-06-06 18:01:57 修改
阅读量1.8k 收藏
点赞数
文章标签： echarts legend
于 2023-06-02 17:51:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RogerWang_H5/article/details/130867069
版权
一、问题描述

echarts图表的类目数据最多可以自适应到两行，超过两行的时候，会跟X轴坐标产生重叠。
在这里插入图片描述

二、处理方法

在这里插入图片描述

这里只描述思路，未提供具体代码。

计算方法：图表总高度 = grid + 间隙1 + legend + 间隙2 + dataZoom

除了legend高度外，其他高度都是固定的，因此难点在于动态计算legend高度，计算legend高度的思路如下:

1、获取图表总宽度 chartWidth

2、获取每个legend条目的宽度和间隙总和 legendWidth

3、获取legend行数，legendRowNum = legendWidth / chartWidth

4、获取legend总高度 = 行数乘以每行的高度，legendRowNum * perLegendWidth

rogerwang@f2e
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts 图设置高度_Echarts 如何设置图表内容的高度 ?
weixin_36218209的博客
01-14 3034
这是生成的图表: x 已经贴到div最下面了. 能不能让它整体上去一点;类似这样 :我的option:var option = {toolbox: {feature: {dataZoom: {yAxisIndex: 'none'},restore: {},saveAsImage: {}}},backgroundColor: 'white',title: {text: '趋势',textStyle...
echarts ---配置-（柱状图）
luodanBeauty的博客
06-09 9183
echarts柱状图配置
echarts分别自定义legend的宽高与样式
小太阳的博客
05-10 7309
如图所示，需要分别自定义legend的宽高 想要实现不同样式的图例，需要用数组写对应图例的样式 代码如下： legend: [ { data: ['降水量'], left: '30%', textStyle: { color: '#9FC6F6' }, icon: 'rect', // 形状 itemWidth: 7, // 宽 itemHeight:
echarts图表 实现高度按照 内容撑起来或者超出部分滚动展示效果
weixin_49203377的博客
09-22 2180
echarts图表 实现高度按照 内容撑起来或者超出部分滚动展示效果
解决Echarts图表宽高自适应问题
最新发布
nanren_nanren的博客
05-28 501
出现这种问题的情况可能是外层嵌套了其他UI组件库的标签，使得在初始化图表的时候找不到其对应的父级宽高。解决方法我们可以参考Echarts官方的resize()方法。以下是官网文档截图。将图表初始化以后添加监听窗口的变化，在监听回调中调用resize方法。
echarts -- legend属性使用的方法详解
m0_65930596的博客
09-19 8018
legend: [{data: [{}],left: "0",padding: [0, 0,-3, 0], // 修改文字和图标距离},},data: [{}],padding: [0, 0,-3, 0], // 修改文字和图标距离},},data: [{}],padding: [0, 0,-3, 0], // 修改文字和图标距离},],实现效果。
echarts的legend——图例样式的配置
热门推荐
杜永康的博客
12-22 3万+
echarts官网配置项手册里有非常详细的内容，我们挑几种常用的看看，加深对legend属性的理解。echarts图表中的图例，有形状，颜色，位置等等各种样式的不同配置。以上几张图表中，红色圆圈部分即图例。
echarts计算legend高度
qq_22182185的博客
06-08 816
/模拟绘制legend item 默认间隙为10 高度为14 宽度为25 字体大小为12。let legendItems = ["折线1","折线2","折线3","折线4"];//计算legend组件的可用宽度。//legend的padding。//创建一个不可见的模拟盒子。//创建一个不可见的模拟盒子。* 模拟计算legend高度。
Echarts - legend属性设置
、蹄码笑春风的博客
09-06 1482
legend: { show: true, //是否显示 type: "plain", // 图例的类型 'plain':普通图例 'scroll':可滚动翻页的图例 zlevel: 1, // 所有图形的 zlevel 值。 icon: "circle", top: "5%", // bottom:"20%" // 组件离容器的距离 right: "5%", //le...
echarts图例高度计算-横向图例-legend组件高度模拟计算-冷知识
郑伟斌的博客
08-27 4126
1.简介 echarts是百度发起的一个开源项目，在开源中国和github上都可以找到对应的文档和源代码。如果你对使用echarts图表绘制的要求并不高那么其实只要去看看echarts的教程再照着官方实例写几个例子就应该足够了，不过，如果你需要对echarts做很多自定义设置，那么就需要对echarts足够熟悉才行。 本文echarts版本4.2.7。 1.1补充介绍 本文属于echarts的进阶...
echarts图例legend高度模拟计算
weixin_49100088的博客
02-12 1492
echarts计算legend的高度
echarts图表自适应
zhengyun1568的博客
10-28 632
**背景：**vue项目中用到echarts图表，页面上有侧边栏，侧边栏收缩图表不能自适应，想通过监听内容部分的宽度让图表resize，试过window带的resize，只能监听浏览器窗口大小变化，为了监听某元素区域的变化而使echarts的尺寸重置 本次解决采用 element-resize-detector 可以完美的解决 **思路：**因为收缩侧边栏的时候右侧的区域会自动适应，但是echarts不会随之改变 element提供的 element-resize-detector 可以轻松解决问题的存在
echarts图自适应
caoning315629的博客
08-20 847
var myChart2 = echarts.init(document.getElementById('img_2')); option2 = { title: { text: '存量中各学历段情况', x:'center' }, legend: { orient: 'vertical', x: 'left...
echarts 实现大屏自适应展示
10-14
使用 ECharts 的 `option` 配置项中的一些属性，如 `grid` 或 `legend` 的位置，可以调整在不同屏幕尺寸下的显示效果。 6. **性能优化**：大屏展示往往包含大量数据，因此性能优化至关重要。可以使用 ECharts 的...
echarts大屏字体自适应的方法步骤
10-16
上述代码是在ECharts的tooltip组件中设置字体大小的例子，但同样的方法可以应用到图表的其他任何需要设置字体大小的地方，如series、title、legend等。 需要注意的是，这种方法基于1920px作为基准分辨率，你可以...
echarts 柱状图-APP自适应完整方案代码.zip
07-29
总结起来，这个项目提供了一个完整的Echarts柱状图在APP中自适应的方案，涵盖了图表的初始化、自适应布局、颜色定制、数据格式化以及交互设计等多个方面，对于理解和实践Echarts在移动应用中的使用具有很高的参考...
echarts在jsp中使用配置手册
05-07
Echarts是一款基于JavaScript的数据可视化库，它提供了各种图表和组件，能够帮助开发者快速构建数据可视化应用。在JSP中使用Echarts需要进行一些配置和集成，本文将详细介绍如何在JSP中使用Echarts。 一、创建...
Echarts水管图标
10-16
1. **自适应布局**：Echarts支持响应式设计，可以根据浏览器窗口大小自动调整图表尺寸，确保在不同设备上都能正常显示。这通常通过设置`resizeable`属性为`true`，并监听窗口大小变化事件来实现。 2. **自定义系列...
Echarts legend属性使用
m0_67394006的博客
03-03 1万+
Echarts的legend属性是对图例组件的相关配置 而legend就是Echarts图表中对图形的解释部分： 其中legend自身常用的配置属性如下： orient 设置图例的朝向 属性值： vertical // 垂直显示 或者 horizontal // 水平显示 legend: { orient: 'vertical' } legend: { orient: 'horizontal' } x/y(left/top) 设置图例在X轴方向
echarts响应式自适应
04-01
Echarts是一个数据可视化的JavaScript插件库，它支持多种图表类型和各种交互方式。Echarts的响应式自适应能力可以让图表在不同尺寸的屏幕上自适应调整大小和布局，以适应不同的设备和分辨率。 Echarts的响应式自适应功能主要通过设置图表的容器大小和配置项中的grid、legend、tooltip、toolbox等参数来实现。以下是一些常用的响应式自适应方式： 1. 设置容器大小 在使用Echarts时，可以通过设置容器的宽度和高度来控制图表的大小。对于响应式自适应，通常建议设置容器的宽度为百分比，以便在不同屏幕尺寸下自适应调整大小。 2. 使用grid参数 grid参数可以控制图表中的坐标轴、数据区域、标签等元素的位置和大小。通过设置grid的containLabel和left、right、top、bottom等参数，可以让图表在不同尺寸的容器中自适应调整。 3. 使用legend参数 legend参数可以控制图表中的图例的位置、大小和样式。通过设置legend的orient、left、right、top、bottom等参数，可以让图例在不同尺寸的容器中自适应调整。 4. 使用tooltip参数 tooltip参数可以控制图表中的提示框的位置、大小和样式。通过设置tooltip的position、borderWidth、padding等参数，可以让提示框在不同尺寸的容器中自适应调整。 5. 使用toolbox参数 toolbox参数可以控制图表中的工具箱的位置、大小和样式。通过设置toolbox的feature、iconSize、left、right、top、bottom等参数，可以让工具箱在不同尺寸的容器中自适应调整。 总之，Echarts的响应式自适应功能非常强大，可以让图表在不同尺寸的屏幕上自适应调整大小和布局，以适应不同的设备和分辨率。开发者可以根据具体需求选择不同的配置方式来实现响应式自适应。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值