页面树结构
转至元数据结尾
转至元数据起始

正在查看旧版本。 查看 当前版本.

与当前比较 查看页面历史

« 前一个 版本 3 当前 »

(本文档仅供参考)

问题

当柱图系列较多,数值较大且相近时,容易出现数据标签重叠的现象,如下图所示:

 如何实现每个系列中的数据标签可以依次往上偏移,实现数据标签不重叠?

解决方案

可通过扩展属性调整每个柱子的数据标签位置,扩展属性如下:

{
"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]
}}}},

]}


        

其中扩展属性中的设置如下图:

        

        显示效果如下图:

        

         说明:使用此扩展属性,数据标签的值会与y轴的值不对应,此扩展属性是移动数据标签的位置。

         注:使用此扩展属性实现的是对固定多系列柱图数据标签的移动,如果存在柱图系列数变化的情况,即动态数据,此时需要通过定制宏代码才能实现动态变化。

        

  • 无标签