当前位置：首页 > news >正文

Echarts图表坐标轴文字太长，省略显示，鼠标放上显示全部（vue）

news 2026/3/29 15:41:49

注意：记得加上这个，触发事件， triggerEvent: true,
重点：下面就是处理函数，在实例化图表的时候使用，传入参数是echarts的实例

// 渲染echartsfirstBarChart() {const that = thislet columnar = echarts.init(that.$refs.bar1)columnar.setOption({tooltip: {trigger: 'axis',axisPointer: {// 坐标轴指示器，坐标轴触发有效type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'},},grid: {top: '3%',right: '3%',bottom: '3%',left: '0%',// 包含文本containLabel: true,// 是否显示网格线show: true,// 边框颜色borderColor: 'rgba(0, 240, 255, 0.3)',},xAxis: [{type: 'category',data: that.xmNameData,// 不要刻度axisTick: {alignWithLabel: false,show: false,},// 记得加上这个triggerEvent: true,axisLabel: {color: '#4c9bfd', // 文字颜色rotate: 45, // 文字倾斜// 文字省略formatter: function (value) {if (value.length > 3) {return `${value.slice(0, 3)}...`}return value},},},],yAxis: [{type: 'value',// 不要刻度axisTick: {alignWithLabel: false,show: false,},// 文字颜色axisLabel: {color: '#4c9bfd',},// 分割线splitLine: {lineStyle: {color: 'rgba(0, 240, 255, 0.3)',},},},],series: [{name: ' 完成投资比例',type: 'bar',barWidth: '60%',data: that.wcblData,label: {show: true,position: 'inside',},// 颜色itemStyle: {color: new echarts.graphic.LinearGradient(// (0,0)点到(0,1)0,0,0,1,[{ offset: 0, color: 'red' }, // 0 起始颜色{ offset: 1, color: 'blue' }, // 1 结束颜色,]),},},],})// 就是这个方法，解决放上提示全部that.extension(columnar)columnar.on('click', function (data) {// 添加点击事件})},

extension(chart) {// 注意这里，是以X轴显示内容过长为例，如果是y轴的话，需要把params.componentType == 'xAxis'改为yAxis// 判断是否创建过div框,如果创建过就不再创建了// 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理var elementDiv = document.getElementById('extension')if (!elementDiv) {var div = document.createElement('div')div.setAttribute('id', 'extension')div.style.display = 'block'document.querySelector('html').appendChild(div)}chart.on('mouseover', function (params) {if (params.componentType == 'xAxis') {var elementDiv = document.querySelector('#extension')//设置悬浮文本的位置以及样式var elementStyle ='position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'elementDiv.style.cssText = elementStyleelementDiv.innerHTML = params.valuedocument.querySelector('html').onmousemove = function (event) {var elementDiv = document.querySelector('#extension')var xx = event.pageX - 10var yy = event.pageY + 15console.log('22', xx)elementDiv.style.top = yy + 'px'elementDiv.style.left = xx + 'px'}}})chart.on('mouseout', function (params) {//注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxisif (params.componentType == 'xAxis') {var elementDiv = document.querySelector('#extension')elementDiv.style.cssText = 'display:none'}})},

Echarts图表坐标轴文字太长，省略显示，鼠标放上显示全部（vue）

注意：记得加上这个，触发事件， triggerEvent: true,重点：下面就是处理函数，在实例化图表的时候使用，传入参数是echarts的实例 // 渲染echartsfirstBarChart() {const that thislet columnar echarts.init…...

编程日记 2023/9/1 0:23:51

C语言控制语句——跳转关键字

循环和switch专属的跳转：break循环专属的跳转：continue无条件跳转：goto break 循环的break说明某一条件满足时，不再执行循环体中后续重复的代码，并退出循环需求：一共吃5碗饭, 吃到第3碗吃饱了, 结束吃饭…...

编程日记 2023/9/1 0:22:50

C#，《小白学程序》第五课：队列（Queue）

日常生活中常见的排队，软件怎么体现呢？ 排队的基本原则是：先到先得，先到先吃，先进先出 1 文本格式 /// <summary> /// 《小白学程序》第五课：队列（Queue） /// 日常生活中常见…...

编程日记 2023/9/1 0:21:49

【【萌新的STM32学习25--- USART寄存器的介绍】】

萌新的STM32学习25- USART寄存器的介绍 STM32–USART寄存器介绍（F1） 控制寄存器1 （CR1） 位13： 使能USART UE 0： USART分频器和输出被禁止 1： USART模块使能位12 ： 配置8个数据位…...

编程日记 2023/9/1 0:20:48

SpringBootWeb案例 Part 5

4. 配置文件员工管理的增删改查功能我们已开发完成，但在我们所开发的程序中还一些小问题，下面我们就来分析一下当前案例中存在的问题以及如何优化解决。 4.1 参数配置化在我们之前编写的程序中进行文件上传时，需要调用AliOSSUtils工具类&…...

编程日记 2023/9/1 0:19:46

【ES6】Promise.race的用法

Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。 const p Promise.race([p1, p2, p3]);上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值&#…...

编程日记 2023/9/1 0:18:45

PMP - 敏捷 3355

三个核心产品负责人负责最大化投资回报（ROI），通过确定产品特性，把他们翻译成一个有优先级的列表为下一个 sprint 决定在这个列表中哪些应该优先级最高，并且不断调整优先级以及调整这个列表职责是定义需求、定义…...

编程日记 2023/9/1 0:17:43

Mapbox-gl 关闭所有Popup，以及关闭按钮出现黑色边框bug

1.官方示例 var popup new mapboxgl.Popup().addTo(map);popup.remove(); 很明显，需要记录popup对象，管理起来比较麻烦。 2.本人采用div的方式关闭所有的popup，在map对象上新增加方法 map.closePopupmapView.popupClear function(){$(&q…...

编程日记 2023/9/1 0:16:42

RE：从零开始的车载Android HMI（四） - 收音机刻度尺

最近比较忙，研究复杂的东西需要大量集中的时间，但是又抽不出来，就写点简单的东西吧。车载应用开发中有一个几乎避不开的自定义View，就是收音机的刻度条。本篇文章我们来研究如何绘制一个收音机的刻度尺。本系列文章的目的是在讲…...

编程日记 2023/9/1 0:15:41

评估安全 Wi-Fi 接入：Cisco ISE、Aruba、Portnox 和 Foxpass

在当今不断变化的数字环境中，对 Wi-Fi 网络进行强大访问控制的需求从未像现在这样重要。各组织一直在寻找能够为其用户提供无缝而安全的体验的解决方案。在本博客中，我们将深入探讨保护 Wi-Fi（和有线）网络的四种领先解决方案——…...

编程日记 2023/9/1 0:14:40

java 泛型作为方法的返回值的封装

问题背景业务需要，经常需要http方式调用某服务，然后某服务返回特定类型的返回内容。类似 String resStr xxxHttpClient.post() ，然后它返回一个字符串，你还需要反序列化成某种格式的。返回值可以反序列化成的形式如下&#…...

编程日记 2023/9/1 0:13:38

ASP.NET Core 中基于 Minimal APIs 的Web API

基于 Minimal APIs 的Web API Minimal APIs 是ASP.NET Core中快速构建 REST API 的方式，可以用最少的代码构建全功能的REST API。比如下面三行代码： var app WebApplication.Create(args); app.MapGet("/", () > "Hello World!&quo…...

编程日记 2023/9/1 0:12:37

ProBuilder SetUVs 不起作用 🐟 需要设置face.manulUV true public static void Set01UV(this ProBuilderMesh mesh){foreach (var face in mesh.faces){face.manualUV true;//设置为手动uv}var vertices mesh.GetVertices().Select(v > v.position).ToArray(…...

编程日记 2023/9/1 0:11:36

c#接口（interface）

概述： 在C#中，接口是一种定义了一组相关方法、属性和事件的规范。接口可以被类或结构体实现，以提供一种方式来定义类之间的契约或协议。接口定义了一组成员，这些成员没有具体的实现。实现接口的类必须提供这些成员的具体实现。…...

编程日记 2023/9/1 0:10:34

SSH远程连接macOS服务器：通过cpolar内网穿透技术实现远程访问的设置方法

文章目录前言1. macOS打开远程登录2. 局域网内测试ssh远程3. 公网ssh远程连接macOS3.1 macOS安装配置cpolar3.2 获取ssh隧道公网地址3.3 测试公网ssh远程连接macOS 4. 配置公网固定TCP地址4.1 保留一个固定TCP端口地址4.2 配置固定TCP端口地址 5. 使用固定TCP端口地址ssh远程 …...

编程日记 2023/9/1 0:09:31

【C++】Visual Studio EditorConfig 格式设置

【C】Visual Studio EditorConfig 格式设置文章目录【C】Visual Studio EditorConfig 格式设置I - EditorConfig1.1 - 通用设置indent_styleindent_sizetab_widthend_of_linecharsettrim_trailing_whitespaceinsert_final_newline II - Visual Studio 特定键值缩进设置cpp_in…...

编程日记 2023/9/1 0:08:30

服务器单机大规模数据存储方案

大规模数据存储都需要解决三个核心问题： 1.数据存储容量的问题，既然大数据要解决的是数据 PB 计的数据计算问题，而一般的服务器磁盘容量通常 1～2TB，那么如何存储这么大规模的数据呢？ 2.数据读写速度的问题&…...

编程日记 2023/9/1 0:07:29

ElasticSearch-集成ik分词器

本文已收录于专栏《中间件合集》目录背景介绍版本选择优势说明集成过程1.下载安装包2.解压安装包3.重启ElasticSearch服务3.1通过ps -ef | grep elastic查看正在启动的es进程号3.2使用kill -9 xxx 杀死进程3.3使用 ./elasticsearch 启动es服务分词测试细粒度分词方式分词请…...

编程日记 2023/9/1 0:06:26

c++版opencv求二值图的质心

代码 #include <iostream> #include <opencv2/core.hpp> #include <opencv2/highgui.hpp> #include <opencv2/imgproc.hpp>int main(int argc, char* argv[]) {cv::Mat input_image cv::imread("Untitled.png", cv::IMREAD_GRAYSCALE);cv:…...

编程日记 2023/9/1 0:05:23

6、深入解析Kotlin类与对象：构造、伴生、单例全面剖析

前言本篇文章将带您了解Kotlin编程中的重要概念：类及构造函数、访问修饰符、伴生对象和单例模式。就像搭积木一样，我们会逐步揭开这些概念的面纱，让您轻松理解它们的作用和用法。无论您是编程新手还是有经验的开发者，本文都将为…...

编程日记 2023/9/1 0:04:22

nlp_structbert模型助力AIGC内容审核：生成文本与违规库相似度比对

nlp_structbert模型助力AIGC内容审核：生成文本与违规库相似度比对 1. 引言：当AIGC内容爆发，审核成了大难题最近两年，AIGC技术发展得太快了。无论是写文章、做设计，还是生成营销文案，AI工具已经渗透到内容…...

编程新知 2026/3/29 14:45:41

Qwen3-0.6B快速调用：LangChain助力，轻松玩转大模型

Qwen3-0.6B快速调用：LangChain助力，轻松玩转大模型 1. 快速了解Qwen3-0.6B Qwen3-0.6B是阿里巴巴开源的通义千问系列最新一代语言模型，拥有6亿参数规模。相比前代模型，它在推理能力、指令遵循和多语言支持方面都有显著提升。这个…...

编程新知 2026/3/29 14:09:21

CS-Notes：从汇编到现代编程语言的系统化学习路径

编程新知 2026/3/29 14:07:19

3分钟彻底解决Windows安装错误2502/2503：AtlasOS一键修复方案揭秘 [特殊字符]

3分钟彻底解决Windows安装错误2502/2503：AtlasOS一键修复方案揭秘 🚀 【免费下载链接】Atlas 🚀 An open and lightweight modification to Windows, designed to optimize performance, privacy and security. 项目地址: https://gitcode.…...

编程新知 2026/3/29 13:14:32

C# rtwpriv Wi-Fi定频工具

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、使用简介，说明#前言对于无线产品，很多需要做CE,FCC,SRRC等认证，需要测试RF，像Realtek方案的Wi-Fi用到rtwpriv工具…...

编程新知 2026/3/29 13:06:26

如何构建现代化微前端架构：Umi-plugin-qiankun实战指南

如何构建现代化微前端架构：Umi-plugin-qiankun实战指南【免费下载链接】umi-plugin-qiankun Umi plugin for qiankun. 项目地址: https://gitcode.com/gh_mirrors/um/umi-plugin-qiankun 在现代企业级前端开发中，Umi-plugin-qiankun微前端解决方…...

编程新知 2026/3/29 12:08:03