(本文档仅供参考)
问题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": {}, } |
...