uniapp echarts tooltip formation 不识别html

需求:

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

想要让他换行

思路一:

用formation自定义样式实现换行

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

最终解决办法:

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

javascript 复制代码
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

相关推荐
掘金安东尼4 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~6 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务9 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛9 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑12 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭19 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿23 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨32 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭40 分钟前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆44 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js