echarts饼图自定义tooltips实现超长文本省略

最新推荐文章于 2024-06-27 14:57:58 发布

喝咖啡还是泡茶

最新推荐文章于 2024-06-27 14:57:58 发布

阅读量758

点赞数

分类专栏： echarts 文章标签： js echarts vue.js

本文链接：https://blog.csdn.net/weixin_44328764/article/details/115917719

版权

本文介绍了如何在Echarts饼图中自定义Tooltip，实现超长文本的省略显示。通过重绘Tooltip样式，添加文本截断样式，确保在有限的空间内展示关键信息。

摘要由CSDN通过智能技术生成

实现思路：1：1重绘饼图tooltips样式，文本区域添加超长文本省略样式
在这里插入图片描述

let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: params => {
                        // 自定义tooltips样式，模型名过长省略
                        let modelName = params.name
                        let modelCount = params.value
                        let color = params.color
                        let tipHtml = ''
                        tipHtml = `<div
                    ">
                    <div style="margin-bottom:6px">模型使用情况</div>
                    <div style="display:flex;justify-content:space-between">
                        <div>
                            <span
                                style="