(本文档仅供参考)
问题
当柱图系列较多,数值较大且相近时,容易出现数据标签重叠的现象,如下图所示:
...
如何实现每个系列中的数据标签可以依次往上偏移,实现数据标签不重叠?
解决方案
可通过扩展属性调整每个柱子的数据标签位置,扩展属性如下:
代码块 |
---|
{ |
...
"series": [{ |
...
"itemStyle": { //有多个系列柱图,需要设置多个itemStyle |
...
"normal": { |
...
"label": { |
...
"show": true, |
...
"position": "top", |
...
"offset": [0, 0] //是否对文字进行偏移。默认不偏移。例如:[30, 40] 表示文字在横向上偏移 30,纵向上偏移 40 |
...
}}} |
...
}, { |
...
"itemStyle": { |
...
"normal": { |
...
"label": { |
...
"show": true, |
...
"position": "top", |
...
"offset": [0, -10] |
...
}}} |
...
}, { |
...
"itemStyle": { |
...
"normal": { |
...
"label": { |
...
"show": true, |
...
"position": "top", |
...
"offset": [0, -20] |
...
}}} |
...
}, { |
...
"itemStyle": { |
...
"normal": { |
...
"label": { |
...
"show": true, |
...
"position": "top", |
...
"offset": [0, -30] |
...
}}} |
...
}, { |
...
"itemStyle": { |
...
"normal": { |
...
"label": { |
...
"show": true, |
...
"position": "top", |
...
"offset": [0, -40] |
...
}}}}, |
...
]} |
其中扩展属性中的设置如下图:
...