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

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

与当前比较 查看页面历史

« 前一个 版本 2 下一个 »

(本文档仅供参考)

问题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",
	    }],
	    "polar": {},

	}

效果图如下:

问题2:

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

解决方案:

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

 {

    "yAxis": {
        "show": false
    },
    "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": {}
}

效果图如下:

问题3:

如上面的极坐标柱图,如果我是有多个指标怎么实现?

解决方案:

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

	{
	    //不显示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",
	    }],
	    "polar": {},

	}


效果图如下:


如果上面的series部分只写了两个,如下写法,那会出现有一个没有转换过来,所以需要按指标(我上面销售量,销售额,指标1三个指标)个数写



  • 无标签