echarts中tooptips提示框超出了怎么解决

news2024/11/6 9:27:19

我们在制作echarts表格时,有时候会遇到提示框内容较多,会让提示框超出,展示不全数据,如下:

这种情况下需要在tooltips下增加一些属性:

1.confine: true:这个配置的作用是让提示框(tooltip)限制在图表的区域内。

        也就是说,当提示框的位置计算出来可能超出图表范围时,会自动调整提示框的位置,确保提示框完全在图表的可视范围内。

2.extraCssText: 'max - width: none; overflow: visible;'

  • max - width: none:它表示取消对提示框最大宽度的限制。默认情况下,提示框可能会有一个最大宽度的限制,设置为none后可以允许提示框根据内容的需要自由扩展宽度。
  • overflow: visible:这个属性的设置使得当提示框的内容超出其本身的区域时,允许内容溢出显示,而不是被裁剪掉,这样就可以保证提示框内的所有内容都能够展示出来。

这两个配置结合起来,可以在一定程度上解决提示框内容显示不完整的问题,尤其是当提示框的内容较多或者提示框容易超出图表区域的情况。

代码如下:

confine: true,
extraCssText: 'max - width: none; overflow: visible;',

全部代码如下: 

    var chartDom = document.getElementById('lineChart1');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {
            trigger: 'axis',
            borderWidth: 1,
            borderColor: '#2ba4d4',
            padding: 5,
            textStyle: {
                fontSize: 16
            },
            confine: true,
            extraCssText: 'max - width: none; overflow: visible;',
            formatter: function(params) {
                var relVal = params[0].name +'(波长/nm)'
                for (var i = 0, l = params.length; i < l; i++) {
                    relVal += '<br/>' + params[i].marker + params[i].seriesName+':'+  + params[i].value
                }
                return relVal
            },
        },
        legend: {
            right: '3%',
            lineStyle: {
                type: 'solid'
            },
            textStyle: {
                color: '#fff',
            },
            itemWidth: 15,
            itemHeight: 2,

        },
        grid: {
            left: '1%',
            right: '1%',
            top: '17%',
            bottom: '2%',
            containLabel: true
        },
        color: ['#FFC91A', '#52FFD6', '#FC364D', '#00D1FF', '#B2FFAB'],
        xAxis: {
            name:'波长/nm',
            type: 'category',
            axisLabel: {
                color: '#eceeee',
                margin: 3,
            },
            z: 10,
            axisTick: {show: true, color: '#c6cccf'},//x轴刻度线
            data: date,
        },
        yAxis: {
            // name: '(元/kg)',
            type: 'value',
            nameTextStyle: {
                color: '#eceeee'
            },
            axisLabel: {
                textStyle: {
                    color: '#eceeee'
                },
                formatter: "{value}",

            },
            splitLine: {
                lineStyle: {
                    color: '#677d7a',
                    type: 'dashed'
                }
            },
            axisLine: {show: false},
        },
        series: [{
            name: '第一次',
            type: 'line',
            data: numMy
        },
            {
                name: '第二次',
                type: 'line',
                data: numKy
            },
            {
                name: '第三次',
                type: 'line',
                data: numAd33
            },
            {
                name: '第四次',
                type: 'line',
                data: numAd44
            },
            {
                name: '第五次',
                type: 'line',
                data: numAd55
            },

        ]
    };

    option && myChart.setOption(option);

运行效果:

完美解决,撒花~~~

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Docker笔记-容器数据卷

Docker笔记-容器数据卷 docker的理念将运行的环境打包形成容器运行&#xff0c;运行可以伴随容器&#xff0c;但是我们对数据的要求是希望持久化&#xff0c;容器 之间可以共享数据&#xff0c;Docker容器产生的数据&#xff0c;如果不通过docker commit生成新的镜像&#xf…

大数据新视界 --大数据大厂之数据挖掘入门:用 R 语言开启数据宝藏的探索之旅

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

类型转换等 面试真题

题目1 请问哪个结果为NaN A. 123null B. 123‘1’ C. 123/0 D. 123undefined 在这四个表达式中&#xff0c;只有D. 123 undefined 的结果是 NaN&#xff0c;原因如下&#xff1a; A. 123 null 结果是&#xff1a;123原因&#xff1a;null 在数值运算中会被自动转换为 0&a…

mac上什么压缩软件没有广告,苹果电脑解压软件BetterZip有广告吗

mac上有很多压缩软件&#xff0c;可以帮助用户压缩或解压各种格式的文件&#xff0c;如zip、rar、7z等。但是&#xff0c;有些压缩软件会在使用过程中弹出广告&#xff0c;影响用户的体验和效率。那么&#xff0c;mac上什么压缩软件没有广告呢&#xff1f;苹果电脑解压软件Bett…

一步步教你利用大模型开发个性化AI应用,告别‘人工智障’!

为了回答这个问题&#xff0c;我用说人话的方式拿gpts创建了一个“我”&#xff0c;然后让她来回答这个问题。&#xff08;确认过眼神&#xff0c;我是懂套娃的&#xff09; 接下来我会先展示下整个定制过程&#xff1b;然后我们一起看一下她能把题答到什么程度&#xff1b;最后…

UnrealEngine 打包Android平台应用

虚幻引擎 支持将项目发布到 安卓&#xff08;Android&#xff09; 移动设备上&#xff0c;并且提供了若干功能帮你将项目发布到 谷歌游戏商店。本节包含了如何设置Android开发环境、如何使用Android功能和服务、以及如何为发布游戏做准备相关的指南。 当前SDK要求 当前UE版本…

JavaSE篇之内部类和图书系统

1.内部类(类中类) 在Java中&#xff0c;将一个类定义在另一个类内部&#xff0c;前者称为内部类&#xff0c;后者称为外部类。 注意事项&#xff1a; 1. 1.静态内部类&#xff08;被static修饰的内部类&#xff09; 1.在静态内部类的方法中不能直接引用外部类的成员变量&…

中国农业银行——轻量式云原生应用平台(轻云平台)

2021年10月&#xff0c;中国人民银行等联合发布了《关于规范金融业开源技术应用与发展的意见》&#xff08;银办发〔2021〕146 号&#xff09;&#xff0c;规范金融机构合理应用开源技术&#xff0c;提高应用水平和自主可控能力&#xff0c;促进开源技术健康可持续发展。前期&a…

幻灯片放映过程中如何调出激光笔

1、第一步先打开制作好的幻灯片 2、进行幻灯片放映 3、看到上图最下面一行&#xff0c;减号左方的小杯进入幻灯片播放 4、幻灯片下方有个放映&#x1f58a;&#xff0c;点击一下 5、选择激光笔就好啦

基于Java的建筑节能监测系统+公共建筑能耗监测系统+建筑能耗监测系统+节能监测系统+能源管理系统

建筑节能监测系统公共建筑能耗监测系统建筑能耗监测系统节能监测系统能耗监测建筑能耗监测能耗分析能耗管理能耗预测能耗监控能耗监测平台建筑能耗 介绍 建筑节能监测系统是基于计算机网络、物联网、大数据和数据可视化等多种技术融合形成的一套节能监测系统。 系统实现了对建…

el-table表格的展开行,初始化的时候展开哪一行+设置点击行可展开功能

效果&#xff1a; 表格展开行官网使用&#xff1a; 通过设置 type"expand" 和 Scoped slot 可以开启展开行功能&#xff0c;el-table-column 的模板会被渲染成为展开行的内容&#xff0c;展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。 但是这种方法…

开源 TTS 模型「Fish Speech」1.4 发布;GameGen-O :生成开放世界游戏视频模型丨 RTE 开发者日报

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。 我们的社区编辑团队会整理分享 RTE&#xff08;Real-Time Engagement&#xff09; 领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考的文章」、…

计算机网络:概述 - 性能指标

目录 一. 速率 二. 带宽 三. 吞吐量 四. 时延 五. 时延带宽积 六. 往返时间RTT 七. 利用率 八. 丢包率 此博客介绍计算机网络中的性能指标&#xff0c;性能指标从不同的角度来度量计算机网络的性能。下面介绍几个常用的性能指标&#xff1a; 一. 速率…

【TabBar嵌套Navigation案例-cell重用 Objective-C语言】

一、我们来说这个cell重用(重复使用)的问题啊 1.我们这个比分直播推送页面, 这个里边呢,现在这个cell,涉及到两个样式,上面呢,是Default的,下面呢,是Value1的,然后,我们在这个里边啊,我们每一组就一个cell啊,然后呢,我把这个组,多给它复制几份儿,现在是三个组…

OpenSSH后门从入门到应急响应与加固

目录 1. Openssh与后门介绍 1.1 Openssh介绍 1.2 Openssh后门介绍 2. 实战演练 2.1 查看版本,注意V是大写的 2.2 下载SSH配置文件 2.3 安装 2.4、修改后⻔密码和⽂件记录 2.5、修改版本号为原本的版本号(伪装openssh) 2.6、修改/etc/ssh中的key 2.7、安装所需环境与…

【黑神话】无脑过大头怪(幽魂)教程,手残也能打过关!

在《黑神话悟空》这款扣人心弦的动作角色扮演游戏中&#xff0c;玩家将面对众多考验操作与策略的Boss战。其中&#xff0c;大头幽魂作为玩家早期就会遇到的挑战之一&#xff0c;其独特的战斗机制和技能组合&#xff0c;对新手玩家而言无疑是一次不小的考验。今天&#xff0c;就…

AI 场景下如何构建运维的标准化能力?SOMA 智能运维计划发布 | 2024 龙蜥大会

8 月 30 日&#xff0c;2024 龙蜥操作系统大会&#xff08;OpenAnolis Conference&#xff09;在北京盛大召开。 与此同时&#xff0c;由龙蜥社区运营委员会副主席、龙腾计划生态负责人金美琴&#xff0c;阿里云智能集团高级技术专家毛文安&#xff0c;云杉网络 VP 向阳联合出品…

Java--常见的接口--Comparable

String类型的compareTo方法&#xff1a; 在String引用中&#xff0c;有一个方法可以比较两个字符串的大小&#xff1a; 和C语言中是一样的&#xff0c;两个字符串一个字符一个去比较。 那么这个方法是怎么实现的呢&#xff1f; 其实就是一个接口&#xff1a;Comparable接口里…

阿里云rds数据迁移

记录一下rds数据同步操作,官方文档: 跨阿里云账号迁移RDS实例. 背景:不同阿里云账号的rds中指定数据库迁移. 操作说明: 使用阿里云数据传输服务产品,选择数据迁移.注意是从目标阿里云账号的rds中操作,按照文档操作基本上没有问题. 源阿里云账号设置如上. 需要注意的是需要从源…

有伸缩镜头也能实现IP68级防尘防水,Pura 70 Ultra兼顾时尚与便捷

在这个快节奏的时代&#xff0c;手机不仅仅是通讯的工具&#xff0c;更是我们日常生活中不可或缺的伙伴。它记录着我们的回忆&#xff0c;承载着我们的工作&#xff0c;甚至在紧急时刻成为我们的救星。然而生活中总有一些不可预测的时刻&#xff0c;比如突如其来的大雨&#xf…