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

(本文档仅供参考)

问题1:

想实现横条图的数据显示上方,同时左对齐,如下图:

image2021-9-7_18-36-28.png

解决方案

        基于数据做echarts图形,选择横条图:

image2021-9-7_18-38-6.png

然后添加如下扩展属性实现,如下:

{
    //不显示Y轴
    "yAxis": {
        "show": false
    },
    //不显示X轴
    "xAxis": {
        "show": false
    },
    "series": [{
        "barWidth": 15, //柱子宽度
        "barGap": 1, //柱子之间间距
        "itemStyle": {
            "normal": {
                "label": {
                    "formatter": "{b}",
                    "show": true,
                    "position": [
                        "0%",
                        "-120%"
                    ],
                    "color": "#585858",
                }
 
            }
        }
    }],
    "color": ["pink", "#DF01D7", "#81DAF5"]
}

说明:

上面的扩展属性仅适用于 页面设置→报表设置→未勾选“在浏览器中使用SVG展示ECharts图形”的场景,如下图:

image2021-9-7_18-40-55.png

问题2:

电子表格中的echarts图形使用横条图,然后想显示文字在上方,同时Y轴的文字不显示,

如下效果图:

解决方案

可以使用扩展属性实现,如下:

{
    //此部分控制Y轴不显示文字
    "yAxis": {
        "type": "category",
        "boundaryGap": true,
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "show": true,
            "textStyle": {
                "color": "none",
            },
        },
    },

    "series": [{
        "barWidth": 15, //柱子宽度
        "barGap": 1, //柱子之间间距
        "itemStyle": {
            "normal": {
                //这部分让指标提示显示在上方
                "label": {
                    "formatter": "{b}{c}千万元",
                    "show": true,
                    "position": "top",
                }

            }
        }
    }]
}


问题3:

自助仪表盘中的echarts图形使用横条图,然后想显示文字在上方,同时Y轴的文字不显示,如下图的效果:

解决方案

1,先打开自定义扩展属性,然后添加英文逗号,再把下面的扩展属性添加进去

可以使用扩展属性实现,如下:

   	"series": [
		{
			"barWidth": 10,
			"barGap": 1,
			"itemStyle": {
				"normal": {
					"label": {
						"formatter": "{b}{c}千万元",
						"show": true,
						"position": "top"
					}
				}
			}
		}
	]

2,对组件设置中的坐标轴设置如下: