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

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

与当前比较 查看页面历史

版本 1 下一个 »

(本文档仅供参考)

问题1:

我想实现极坐标柱图,在自助仪表盘中有极坐标柱图组件可实现,如下文档:极坐标柱图/极坐标堆积柱图
但是我想在电子表格中实现极坐标柱图,没有看到相关的图形类型,需要怎么实现呢?

解决方案:

可按下面的截图选择:

然后使用扩展属性实现,如下:

	{
	    //不显示y轴
	    "yAxis": {
	        "show": false
	    },
	    //不显示x轴	
	    "xAxis": {
	        "show": false
	    },
	    "radiusAxis": {
	        //"data": [],
	        "data": ['点心', '饮料', '调味品', '酱料', '水果', '海鲜'],
	        //  不显示上面的横线,极坐标系的径向轴
	        // "axisLine": {
	        //     "show": false
	        // },
	        "axisLabel": {
	            "interval": 0,
	            "color": "blue",
	            "fontSize": 12,

	        }
	    },
	    //显示极坐标系的角度轴
	    "angleAxis": {
	        "show": true
	    },
	    "series": [{
	        //类型为柱图
	        "type": "bar",
	        //转换为极坐标
	        "coordinateSystem": "polar",
	    }, {
	        "type": "bar",
	        "coordinateSystem": "polar",
	    }, {
	        "type": "bar",
	        "coordinateSystem": "polar",
	    }, {
	        "type": "bar",
	        "coordinateSystem": "polar",
	    }, {
	        "type": "bar",
	        "coordinateSystem": "polar",
	    }, {
	        "type": "bar",
	        "coordinateSystem": "polar",
	    }],
	    "polar": {},

	}

效果图如下:

问题2:

如上面的极坐标柱图,如果我是有一个并列轴需要怎么实现?

解决方案:

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

{
    //不显示y轴
    "yAxis": {
        "show": false
    },
    //不显示x轴	
    "xAxis": {
        "show": false
    },
    //  不显示上面的横线,极坐标系的径向轴
    "radiusAxis": {
        "data": [],
        "axisLine": {
            "show": false
        },
    },
    //不显示极坐标系的角度轴
    "angleAxis": {
        "show": false
    },
    "series": [{
        //类型为柱图
        "type": "bar",
        //转换为极坐标
        "coordinateSystem": "polar",
    }, {
        "type": "bar",
        "coordinateSystem": "polar",
    }, {
        "type": "bar",
        "coordinateSystem": "polar",
    }, {
        "type": "bar",
        "coordinateSystem": "polar",
    }, {
        "type": "bar",
        "coordinateSystem": "polar",
    }],
    "polar": {}
}

效果图如下:


  • 无标签