个人网站 外贸最新一周新闻

需求：

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