注意 |
---|
示例仅供参考,若是实际场景和示例需求场景有所差别,有可能需要自行调整宏代码。 |
需求
饼图设置显示数据标签,但有时数据标签的值较长,画布无法显示完整的数据标签,导致显示效果不好,此时可设置数据标签换行显示
设置后的效果如下图,比如设置数据标签长度超过10个字符则换行:
思路
1)新建客户端宏
2)宏代码如下,设置超过几位即换行
代码块 | ||||||
---|---|---|---|---|---|---|
| ||||||
function main(chartView) {
// 此处设置所截标签长度
var length = 10;
var chart = chartView.getChartObject();
var option = chart.getOptions();
var series = option.series[0].data;
// 遍历所有标签
for (var i in series) {
series[i].label = series[i].label || {};
series[i].label.normal = series[i].label.normal || {};
series[i].label.normal.formatter = function(data) {
var name = strFormat(data.name);
var value = data.value;
// 此处可设置标签格式 例:name:value
return name + ":" + value;
// return name; // 也可设置只显示分类标签,不显示数据
};
}
// 字符串换行函数
function strFormat(str) {
// 将分类标签分割开
var label = [];
var newStr = "";
if (str.indexOf("_") >= 0) {
label = str.split("_");
} else {
label[0] = str;
}
// 对数据项标签进行超过规定长度则换行处理
for (var n = 0; n < label.length; n++) {
var arr = [];
arr = label[n].split('');
if (arr.length > length) {
// 数组下标由0开始,初始下标为所截长度减1
for (var j = length - 1; j < arr.length;) {
// 正则表达式,匹配数字、小数点、百分号,是则不换行
if (/\d|\.|\%/.test(arr[j]))
j++;
else {
arr[j] += '\n';
j += length;
}
}
}
// 组合新的字符串
// 判断是否到了最后一个标签
if (n === label.length - 1) {
newStr += arr.join("");
} else {
newStr += arr.join("") + "_";
}
}
return newStr;
}
} |
示例资源:饼图数据标签分行显示.xml
borderColor | #BBBBBB |
---|---|
bgColor | #F0F0F0 |
borderWidth | 1 |
borderStyle | solid |