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

uniapp echarts tooltip formation 不识别html

需求:

echarts 的tooltip 的域名太长,导致超出屏幕

想要让他换行

思路一:

用formation自定义样式实现换行

但是: uniapp 生成微信小程序, echart种的tooltip 的formation 识别不了html ,自定义样式没办法做到

最终解决办法:

使用\n实现:(拼接formation)

const formatter = (params) => {if (!params || params.length == 0) return "";var name = toBreak(params[0].name);return `${name}\n${params[0].marker}${params[0].seriesName}         ${params[0].value.toLocaleString()}`;
};const toBreak = (value) => {var ret = ""; //拼接加\n返回的类目项var maxLength = 30; //每项显示文字个数var valLength = value.length; //X轴类目项的文字个数var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数if (rowN > 1) {//如果类目项的文字大于4,for (var i = 0; i < rowN; i++) {var temp = ""; //每次截取的字符串var start = i * maxLength; //开始截取的位置var end = start + maxLength; //结束截取的位置//这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧temp = value.substring(start, end) + "\n";ret += temp; //凭借最终的字符串}return ret;} else {return value;}
};塞数据oneOptipnsOther.value.tooltip.formatter = formatter;

参考:

formation 中添加圆点

https://jingyan.baidu.com/article/eb9f7b6d36ff79869264e85d.html

http://www.lryc.cn/news/492905.html

相关文章:

  • 3D扫描对文博行业有哪些影响?
  • 面试(十一)
  • React-useState的使用
  • 设计模式之破环单例模式和阻止破坏
  • 11.19c++面向对象+单例模式
  • 一文了解TensorFlow是什么
  • 如何做好一份技术文档?
  • Linux和Ubuntu的关系
  • 软件工程之静态建模
  • PICO VR串流调试Unity程序
  • 自媒体图文视频自动生成软件|03| 页面和结构介绍
  • 深入浅出摸透AIGC文生图产品SD(Stable Diffusion)
  • 解析生成对抗网络(GAN):原理与应用
  • CodeIgniter URL结构
  • 从 App Search 到 Elasticsearch — 挖掘搜索的未来
  • 鸿蒙本地模拟器 模拟TCP服务端的过程
  • Qt/C++基于重力模拟的像素点水平堆叠效果
  • Zookeeper学习心得
  • 嵌入式开发工程师面试题 - 2024/11/24
  • Python中打印当前目录文件树的脚本
  • 全景图像(Panorama Image)向透视图像(Perspective Image)的跨视图转化(Cross-view)
  • Redis 中的 hcan 命令耗内存,有什么优化的方式吗 ?
  • 豆包MarsCode算法题:三数之和问题
  • 【Android】AnimationDrawable帧动画的实现
  • 【消息序列】详解(7):剖析回环模式--设备测试的核心利器
  • 解决Ubuntu 22.04系统中网络Ping问题的方法
  • 【大数据学习 | Spark-SQL】Spark-SQL编程
  • 15分钟做完一个小程序,腾讯这个工具有点东西
  • manim动画编程(安装+入门)
  • STL算法之数值算法<stl_numeric.h>