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

相关推荐
林强1812 小时前
前端文件预览docx、pptx和xlsx
前端
像是套了虚弱散4 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan5 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇5 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15886 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追6 小时前
Vue组件化开发
前端·html
艾德金的溪7 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长7 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH7 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴7 小时前
Android Studio新手开发第二十六天
android·前端·android studio