Echarts图表设置百分比显示以及图表内容合并问题

最新推荐文章于 2022-09-20 18:42:17 发布
最新推荐文章于 2022-09-20 18:42:17 发布
阅读量1.4k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 业务场景 框架 文章标签： Echarts 百分比显示 图表内容合并 图表内容未更新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/HCJS_Zee/article/details/88747346
本文档记录了在Echarts图表中遇到的百分比显示问题和内容合并问题的解决过程。在尝试动态切换图表时，百分比显示在初始状态下失效，但在页面调整或控制台开启后恢复正常。通过避免DOM操作，使用透明度控制图表显示，并调整图表的定位和层级解决了tooltip不显示的问题。此外，还提到了Echarts的setOption方法可能导致的数据内容合并，可以通过notMerge参数来防止内容合并。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

业务需求

需要开发一个动态tab用来切换Echarts图表的显示，tab项指定显示图表的展示数据。

实现思路

通过多个DIV标签承载Echarts图表。起初的思路是将多个DIV标签设置样式display:none:进行隐藏，在每次进行tab切换时，先改变DIV标签的样式让其显示，然后进行数据请求并绘制图表。

出现问题

本该按照百分比显示的Echarts图表只显示了很小的宽和高，当我打开控制台或者对页面布局大小进行控制，就会突然转换为百分比显示。

解决思路

因为动态的去让DOM元素取消与显示，可能会影响DOM的加载、图标的绘制。
所以想了两个办法，要么不操作DOM，要么不按百分比显示（利用媒体查询）。

媒体查询的方案期初在两个常见分辨率可以较好的显示，但这样的响应式存在较大的局限，也会影响用户体验，于是考虑不操作DOM。

让Echarts图表项隐藏的办法可以用透明度opacity来控制，这样就避开了DOM操作，此时将DIV标签绝对定位到父级标签。

新的问题

然后在切换时出现了新的问题，Echarts上的tooltip提示框没有显示，只显示了HTML中最后一个DIV的tooltip。

问题定位失败

对这个细节的思考，我竟然定位到了图表本身，既然有的图标能显示，显然不是图标的问题。我想到了透明度opacity属性是将其以及子代所有元素透明，是不是tooltip被透明了，我又错误的想使用background:rgba()方式进行透明度变更。以为只透明本身元素即可。试了以后才发现并不是这个影响。既然有一个Echarts的图表可以显示tooltip，就证明无关透明度本身了，而我连续两次问题定位失误。

问题解决

经过思考以后，我尝试改变D

最低0.47元/天 解锁文章

200万优质内容无限畅学
前端 ECharts 优化图表响应式布局的方法
前端视界的博客
05-28 665
本文针对前端开发者在使用ECharts时遇到的“图表在不同屏幕尺寸下显示异常”问题，系统讲解响应式优化的核心思路与具体实现方法。覆盖从基础容器适配到复杂动态配置调整的全流程，适用于移动端H5、数据看板、BI系统等常见业务场景。本文将按照“问题认知→原理理解→方法详解→实战演示→避坑指南”的逻辑展开：首先用生活案例说明响应式布局的重要性，接着拆解ECharts的布局机制，然后分7类讲解优化方法，最后通过完整代码案例演示全流程，并总结常见问题解决方案。原理。
Apache Echarts高级|图表显示优化
diviner_s的博客
04-27 3240
文章目录Echarts高级一、显示相关1.主题2.调色盘 Echarts高级 一、显示相关 1.主题 默认主题 ECharts中默认内置了两套主题：light,dark 在初始化对象方法init中可以指明 var mChart = echarts.init(dom,'light') var mChart = echarts.init(dom,'dark') 自定义主题 1.在主题编译器中编辑主题 主题编译器的地址为：https://www.echartsjs.com/theme-builder/
Echarts 饼图 动态数据比例 处理干货
qq_37899005的博客
05-13 4624
前段时间想做一个统计数据人气指数高低，打算做一个饼图，可以一目了然很直观的看出报名，点击…高低之分 这个处理 只是自己涉及到的层面，简单了然没有深入 详细见官网开发文档 饼图开发文档 官方实例饼图 实例 JS插件：（csdn有人上传 我没权限在上传，各位自己找吧） 从两方面一个PHP动态数据层 一个是从HTML饼图展示 （直接代码） PHP 数据需要自己整合，说白了就是所占比列，查询数据方面自己...
echarts饼图百分比不为100%
chenxiaoyi0207的博客
05-11 6637
由于需要兼容低版本ie，使用的echarts版本较低，为2.2.x。当前版本有饼图百分比不为100%的问题，如数据为如下： [ { name: ‘测试1’, value: 1 }, { name: ‘测试2’, value: 1 }, { name: ‘测试3’, value: 1 } ] 当前版本饼图计算的百分比均为33.33%，最新版本计算的百分比是33.34%、33.33%、33.33%。 百度了一些文章是说用了最大余数法，但是在外部使用插件无法使用这个算法，又不能改数据。只能修改源码。 遇到的问题：
vue饼状图，小于5%或者小于10%显示其他
qq_58307541的博客
02-21 795
Echarts柱状图、折线图一起显示
wangchaohpu的博客
08-06 6874
option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { left: '3%', .
echarts 时间曲线图_Echarts折线图绑定动态数据 x轴当前时间 y轴百分比刻度 toolbox使用...
weixin_33622153的博客
01-12 3207
项目中难免遇到将数据绑定至图表，这时候就可以使用echarts控件。博主近期在项目中，需要将服务器CPU和内存使用率做成一张折线图，要用到绑定动态数据，于是在网上查阅后发现echarts官网中的实例都是死数据，问题解决后写了这篇博客分享给大家。内含绑定动态数据，toolbox的使用，x轴绑定当前时间，设置多长时间刷新，y轴刻度百分比，多条折线显示隐藏等，尽可能写全一些。实现的效果和任务管理器性能中...
echarts实现一个页面同时显示多个图表
热门推荐
weixin_38981413的博客
12-27 10万+
一个JSON数据，通过echarts实现一个页面同时显示多个图表，我这是通过写一个option实现多个图表（折线图，饼图，关系图）展示，也就是说只要一个div（dom对象），实现多个不同形状的图表展示。总体采用了LayUI（表格）+eCharts技术，通过在html页面，引入自定义的js，实现预期页面效果。 自己在网上找了下，没有找到对应的文章，直接来说怎么实现，所以特意写了此文章，共同学习。总结技巧：1.先用最少的代码显示出图 2.【关键点】自己能控制每个图在指定的地方的显示 3.确定每个图位置，整体布
解决echarts 一条柱状图显示两个值,类似进度条的问题
10-15
在ECharts图表库中，创建一个柱状图来同时显示两个值，通常是为了展示数据的对比或者进度。这里的问题是需要让柱状图看起来像一个进度条，展示两个不同的数值，一个代表整体进度，另一个代表特定阶段的进度。通过...
ECharts 饼图的合并显示
老杨头的博客
12-20 3616
ECharts提供了丰富的图表功能，其中饼图是一个常用的功能。 但是很多时候由于设置的数据量过多，导致图表显示非常拥挤，不利于用户快速阅读，提取有效信息。如下图所示： 此时可以将数据进行一下排序，将数值较小的数据进行合并显示，合并后的展示效果如下图所示： 可以看到合并后，整个图表看起来更加简洁，更能快速的得到一个大概的占比比例信息，方便了信息提取。 通过简单的代码处理就可以实现上述的数据合并展示： ...
echarts图表宽度为百分比出现的问题
withNanSi的博客
07-23 1460
问题：echarts因为移动端适应性宽度为百分比，图表显示不正常 原因：echarts图表外层div宽高要给固定的值 解决： 给外层div固定的值 设置监听，获取到外层div最新宽，赋值给echarts图表 var phone = echarts.init(document.getElementById("phone")); $(window).resize(function () { phone.resize({ width:
echart 堆叠柱状图而不重叠，总数不会叠加，显示百分比
u013365404的专栏
06-13 5035
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="contain...
Echarts动态设置
m0_46129241的博客
03-23 1671
动态设置显示数据百分比（柱状图） option.series[0].label.formatter = ‘{c}%’ 设置浮框显示格式（折线图） tooltip: { trigger: ‘axis’, position: function (pt) { return [pt[0], ‘10%’]; }, formatter: function(params){ return params[0].n...
Echarts容器宽高为百分比，图表展示不全
RequesToGod的博客
05-13 3674
Echarts设置宽高，图表仍展示不全问题 问题示例如下： 代码设置的宽度为100%父元素的宽，而打开F12会发现图表容器的宽高是100px。 出现该问题的原因： 1、高度固定，宽度百分比 2、以Vue为例，图表中用到v-show等会引起页面重绘的指令，数据更新了但图表未更新。 解决方案： 1、重新调用图表绘制函数。 2、调用Echats实例的resize()方法。 ...
echarts宽度如何设为百分比
彤云望月
06-29 3841
前言 问题 : 有八个饼状图要展示，其中一行展示两个饼状图。一开始是固定了宽度为450px，但到了宽屏上一行就会展示三个。 思路：于是想当然的想到将 width 设为 百分比，继承父组件的宽度。但是改完之后图缩到了一起，网上查了查，发现echarts源码中，计算宽度的时候将 100% parseInt -> 100px, 所以比如我改成了45%, 就会显示为 45px。 解决：最后查了各种博客，得到了解决方法，就是根据别的组件宽度来动态改变echarts图标的宽度。 代码 var width =
解决vue中echarts图自适应问题，设置100%宽度显示100px
apple_52148181的博客
07-03 2584
data(){ myChart:null, echarts_option1:{}, }, methods:{ setEcharts() { let myChart = document.getElementById("myChart"); myChart.style.width = window.innerWidth - 290 + "px"; //初始化echarts图表宽度
echarts宽度100%变成了100px (实用）
chelen_jak的专栏
11-05 4028
原文出处：https://www.cnblogs.com/SoundOfTheSea/p/7699683.html 延伸阅读：echarts图表自适应，容器宽度设置为百分数，但是图表显示不全，缩到一起 这几天在做折线图，先是用的chart.js，但是chart.js会出现纵轴不显示数字，宽度不能设置百分比只能设置定值，而且图像重绘之后需要鼠标移到折线图的数据点上才会出现图像，找了半天也没有...
echarts 饼图 实例（动态获取数据/图例数值和百分比/总数/动态图例）
初心不改
09-20 5800
echarts 饼图实例
echart柱状图即显示数值，又显示百分比
qq_36246660的博客
04-13 1万+
barGap: '-100%', series: [ {//百分比 name: legendData[0], type: "bar", barWidth: 20, label: { show: true, //开启显示 position: ['1%',
psd设计稿中的图表如何让codefun识别
最新发布
04-03
<think>好的，用户的问题是关于如何让CodeFun正确识别PSD设计稿中的图表。首先，我需要理解用户的需求。他们可能在使用CodeFun将PSD转换为代码时遇到了图表识别的问题，想知道具体的操作方法。接下来，我需要回忆CodeFun的相关文档或引用内容，看看有没有提到图表识别的具体步骤。 根据提供的引用，CodeFun是一个UI设计稿转代码的工具，能够智能生成代码，但用户可能遇到图表元素未被正确识别的情况。用户可能需要具体的步骤来确保图表被正确解析。我需要整理出可能的解决方法，比如图层命名规范、分组结构、使用矢量图形等。 然后，我应该分步骤详细说明，比如图层命名的重要性，分组结构如何影响识别，以及矢量图形和栅格图的区别。此外，引用中提到的在线预览功能可能在调整后需要预览确认效果，这也是一个关键点。需要确保用户知道如何利用预览功能进行验证和调整。 同时，用户可能不知道如何手动标注或补充说明，这部分也需要涵盖。最后，总结关键点，并提醒用户遇到问题时联系技术支持。还要确保回答结构清晰，步骤明确，引用相关的引用内容来支持建议，比如引用[1]和[2]来强调生成代码和预览的重要性。</think>### CodeFun识别PSD设计稿中图表的方法教程 要让CodeFun正确识别PSD设计稿中的图表，需遵循以下步骤： #### 1. **规范图层命名与分组** - **图表命名规则**：为图表的主图层命名时，建议使用`chart`、`graph`或`diagram`等关键词作为前缀或后缀，例如`sales-chart`或`pie_graph`[^1]。 - **元素分组层级**：将图表的所有相关元素（如坐标轴、数据点、图例）放在同一个父级组内，层级结构需清晰。例如： ``` ├─ LineChart (组) │ ├─ Axis-X │ ├─ Axis-Y │ └─ DataLine ``` #### 2. **使用矢量图形绘制图表** - CodeFun对矢量路径（如形状图层、钢笔工具绘制的路径）识别准确率更高[^3]。避免使用栅格化的图片或合并形状图层。 - **数据标注要求**：若图表包含文本标签（如数值、百分比），需确保文字图层独立存在，不可与图形合并。 #### 3. **补充标注说明（高级场景）** - 对于复杂图表（如动态交互图表），可在PSD中添加隐藏注释图层，命名格式为`@comment: 此图表为可交互柱状图`，CodeFun会将其解析为代码注释。 #### 4. **在线预览与修正** - 上传PSD后，立即通过CodeFun的**在线预览功能**查看生成效果[^2]。 - 若图表未被识别为代码组件，可： 1. 检查图层命名是否符合规范 2. 重新调整分组层级 3. 使用「手动标注工具」框选图表区域并添加`chart`标签 #### 5. **输出代码优化** 生成的图表代码可能包含基础HTML/CSS结构，例如： ```html <div class="bar-chart"> <div class="bar" style="height: 45%"></div> <div class="bar" style="height: 80%"></div> </div> ``` 建议在此基础上补充数据绑定逻辑（如Vue/React）或图表库（ECharts/D3）集成。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值