解决Echarts图表中tooltip无法换行问题

解决Echarts图表中tooltip无法换行问题echarts tooltip

这里设置宽度、颜色都是是可以生效的,但就是不换行
echarts

解决办法tooltip. extraCssText

echarts

extraCssText: 'max-width:300px; white-space:pre-wrap'

echarts tooltip

tooltip: { // 单个柱子显示悬浮内容
          extraCssText: 'max-width:300px; white-space:pre-wrap',
          formatter: function(params) {
            let transportType = '' // 运输方式
            let chineseName = '' // 国家中文名称
            let deliverCount = '' // 发货数量
            let drawCount = '' // 提取数量
            let drawRate = '' // 提取率
            let effectCount = '' // 签收数量
            let effectRate = ''// 签收率
            let lastDeliverTime = '' // 最晚到仓时间
            let averageAging = ''// 平均时效
            let abnormalRemark = ''// 异常备注
            const matchingItem = arrSet1.find(item => item.shortName === params.seriesName && item.deliverDate === params.name)

            if (matchingItem) {
              transportType = matchingItem.transportType
              chineseName = matchingItem.chineseName
              deliverCount = matchingItem.deliverCount
              drawCount = matchingItem.drawCount
              drawRate = matchingItem.drawRate || 0
              effectCount = matchingItem.effectCount
              effectRate = matchingItem.effectRate
              lastDeliverTime = matchingItem.lastDeliverTime ? _this.$moment(matchingItem.lastDeliverTime).format('YYYY-MM-DD HH:mm:ss') : '' // 最晚到仓时间
              averageAging = matchingItem.averageAging != null ? matchingItem.averageAging : '' // 平均时效
              abnormalRemark = matchingItem.abnormalRemark != null ? matchingItem.abnormalRemark : ''
            }
            let result0 = `运输方式:${transportType} ` + '<br>' + `国家:${chineseName}` + '<br>' + `发货数量:${deliverCount}` + '<br>'
            let result1 = `提取数量:${drawCount}` + '<br>' + `提取率:${drawRate} %` + '<br>' + `签收数量:${effectCount}` + '<br>' + `签收率:${effectRate} %`
            let str = params.seriesName + '<br>' + result0 + result1 + '<br>' + `发货时间:${params.name}<br>最晚到仓时间:${lastDeliverTime}<br>平均时效:${averageAging}<br>异常备注:${abnormalRemark}`
            return str
          }
        }

解决之后

echarts

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/710242.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

工业网关在智能制造中的具体应用和效果-天拓四方

随着工业4.0时代的到来&#xff0c;智能制造正逐渐成为工业领域的发展趋势。作为连接物理世界与数字世界的桥梁&#xff0c;工业网关在智能制造中发挥着至关重要的作用。本案例将详细阐述工业网关在某一制造企业中的具体应用&#xff0c;展示其如何助力企业实现数字化转型&…

【数据挖掘】机器学习中相似性度量方法-欧式距离

写在前面&#xff1a; 首先感谢兄弟们的订阅&#xff0c;让我有创作的动力&#xff0c;在创作过程我会尽最大能力&#xff0c;保证作品的质量&#xff0c;如果有问题&#xff0c;可以私信我&#xff0c;让我们携手共进&#xff0c;共创辉煌。 路虽远&#xff0c;行则将至&#…

Visual Studio 使用第三方库管理工具 vcpkg

一、介绍 Windows下开发C/C程序&#xff0c;少不了用开源的第三方库。比如线性代数和矩阵分析的库eigen&#xff0c;或者图像处理的OpenCV库。虽然这些库都是开源的&#xff0c;但是由于要编译debug和release版本的&#xff0c;32位以及64位的&#xff0c;如果像FFmpeg…

跨境电商测评、采购大额下单自养号需要解决哪些技术原理?

市场上有许多伪装工具&#xff0c;但大多数只是为了方便开发人员测试系统程序&#xff0c;它们并不能针对特定的电商平台进行伪装。每个电商平台都有其独特的风控机制&#xff0c;因此&#xff0c;我们需要从硬件环境的底层配合软件控制&#xff0c;以满足各平台的检测规则。 …

【测试】软件测试方案—实际项目直接套用(Word原件)

1. 引言 1.1. 编写目的 1.2. 项目背景 1.3. 读者对象 1.4. 参考资料 1.5. 术语与缩略语 2. 测试策略 2.1. 测试完成标准 2.2. 测试类型 2.2.1. 功能测试 2.2.2. 性能测试 2.2.3. 安全性与访问控制测试 2.3. 测试工具 3. 测试技术 4. 测试资源 4.1. 人员安排 4.2. 测试环境 4.2.…

Java 网站开发入门指南:如何用java写一个网站

Java 网站开发入门指南&#xff1a;如何用java写一个网站 Java 作为一门强大的编程语言&#xff0c;在网站开发领域也占据着重要地位。虽然现在 Python、JavaScript 等语言在网站开发中越来越流行&#xff0c;但 Java 凭借其稳定性、可扩展性和丰富的生态系统&#xff0c;仍然…

Aigtek电压放大器的标准参数是什么

电压放大器是电子电路中常用的一种器件&#xff0c;主要用于放大输入电压信号。为了评价和比较不同的电压放大器&#xff0c;有一些标准参数被广泛应用。下面将详细介绍电压放大器的几个常见标准参数。 首先是增益。增益是衡量电压放大器输出信号与输入信号之间的倍数关系&…

【乐吾乐2D可视化组态编辑器】开关、阀门、报警状态切换

开关状态 开关的断开与闭合&#xff1a;将电力组件的“开”与“关”2个组件重叠在一起&#xff0c;右键选择“组合为状态”&#xff0c;属性面板中就可以任意切换状态。 视频教程&#xff1a;开关阀门多状态控制 乐吾乐2D可视化组态编辑器地址&#xff1a;https://2d.le5le.co…

30KW高原汽油发电机,海拔5000米可使用

大汉动力高原汽油发电机是专为高原地区设计的发电设备&#xff0c;其设计和特性考虑了高原环境的特别性。以下是关于高原汽油发电机的一些关键信息&#xff1a; 设计特点&#xff1a; 高原适应性&#xff1a;高原地区海拔高&#xff0c;空气稀薄&#xff0c;氧气含量低&#x…

高考志愿填报选专业,兴趣爱好和就业前景哪个优先?

每个人都有自己的兴趣与爱好&#xff0c;而高考志愿填报是在为自己选择职业方向。最理想的状态就是把自己的兴趣和爱好与自己的职业统一起来&#xff0c;让兴趣和爱好促进职业的发展&#xff0c;为职业增添动力。但现实生活中&#xff0c;这种理想的状态并不是每个人都能达到的…

前端技术回顾系列 11|TS 中一些实用概念

在微信中阅读,关注公众号:CodeFit。 创作不易,如果你觉得这篇文章对您有帮助,请不要忘了 点赞、分享 和 关注 我的公众号:CodeFit,为我的持续创作提供动力。 上文回顾:泛型在类和接口中的应用 上一篇文章我们回顾了 泛型 在 类 和 接口 中的应用。 通过使用泛型,我们…

工资信息管理系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;基础数据管理&#xff0c;公告管理&#xff0c;津贴管理&#xff0c;管理员管理&#xff0c;绩效管理 用户账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;公告管理&#xff0c;津…

Python酷库之旅-比翼双飞情侣库(08)

目录 一、xlrd库的由来 二、xlrd库优缺点 1、优点 1-1、支持多种Excel文件格式 1-2、高效性 1-3、开源性 1-4、简单易用 1-5、良好的兼容性 2、缺点 2-1、对.xlsx格式支持有限 2-2、功能相对单一 2-3、更新和维护频率低 2-4、依赖外部资源 三、xlrd库的版本说明 …

苹果AI入华探讨及Apple Intelligence体验分析

引言 近日&#xff0c;苹果在WWDC 2024上引起了广泛关注。尽管苹果在发布会上并未明确提到“AI”一词&#xff0c;但从其展示的众多新功能中可以看出&#xff0c;AI已深深嵌入到其产品中。那么&#xff0c;苹果AI何时能在中国落地&#xff1f;它的模型大小是多少&#xff1f;用…

精品丨PowerBI迁移到SSAS

业务场景&#xff1a; 企业初期在进行 BI 可视化路线的时候&#xff0c;往往不会选择方案较为完整的SSAS&#xff0c;而是会选择轻量的 PowerBI 方案&#xff0c;究其根本还是软件成本的问题。 但是随着模型越来越臃肿&#xff0c;维护成本越来越高&#xff0c;有很多模型需要进…

leetcode LRU 缓存

leetcode: LRU 缓存 LRU 全称为 Least Recently Used&#xff0c;最近最少使用&#xff0c;常常用于缓存机制&#xff0c;比如 cpu 的 cache 缓存&#xff0c;使用了 LRU 算法。LRU 用于缓存机制时&#xff0c;关键的是当缓存满的时候有新数据需要加载到缓存的&#xff0c;这个…

9.1 图片的分割处理(c++)

本文的图片处理分为图片分割、图像的亚像素坐标处理。亚像素处理的原理可以看论文一种基于多项式插值改进的亚像素细分算法&#xff0c;该论文的详解及c的代码实现可以看博文基于多项式插值的亚像素边缘定位算法_基于多项式插值的亚像素算法-CSDN博客。下面的内容很多来自以上博…

简单Mesh多线程合并,使用什么库性能更高

1&#xff09;简单Mesh多线程合并&#xff0c;使用什么库性能更高 2&#xff09;Unity Semaphore.WaitForSignal耗时高 3&#xff09;VS编辑的C#代码注释的中文部分乱码 4&#xff09;变量IntPtr m_cachePtr切换线程后变空 这是第389篇UWA技术知识分享的推送&#xff0c;精选了…

Stability AI最新的SD3模型存在严重问题 为规避裸体结果导致躯体部分错乱

人工智能 Stability AI 最新的 SD3 Medium 模型存在严重问题&#xff0c;只要生成人物就会出现躯体错乱&#xff0c;这似乎是该公司刻意规避生成裸体图片的结果。目前猜测他们可能在训练过程中就剔除了 NSFW 内容&#xff0c;同时在训练时规避裸体内容进而导致模型也会刻意将人…

03 Tricks

一&#xff1a;Auto-ML的一般形式 还可以支持这个CV啦lp啦&#xff0c;还有多模态啦&#xff0c;都还有很多很多任务啊&#xff0c;都可以支持啊 Auto-Sklearn Auto-Pytorch 结构搜所&#xff1a;神经网络搜所算法&#xff1a; AutoGluon 02 >自动特征工程 Tsfresh Boru…