页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

(本文档仅供参考)

问题

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

...

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

解决方案

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

代码块
{

...


"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]

...


}}}},

...



]}


        

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

        

...