需求:
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