知识库

Loading

0 评论 / 0 点赞 / 178 阅读  新人入手 最后更新: 2022-09-08 作者: 飞致云 总字数: 664

image-1652751754776原图 VS image-1652751743977 DataEase出图共同点:都是弯的
那么,此图如何实现呢?

其实,是一个半圈的南丁格尔图。

1 准备数据

众所周知,整个圆是 360 度,如果只想让半圈展示数据,而另半圈不展示,那么只把有效展示维度放在 180 度上即可,另 180 度设置成值为 0 并且维度值的个数与有效维度的值的个数相等,以此来对半均分 360 度。然后按照指标大小降序,即可达到如上图所示的效果。

以目前 “某咖啡门店 2021 年城市数量排行榜 TOP20” 数据为例,进行视图制作,数据明细如下:

image-1652751959721

此处我用的是Excel数据集,所以我直接在Excel表格中处理原始数据。

可见,本次要展示的数据是某咖啡门店城市数量排行的 TOP20,以城市为维度有 20 个值,所以,无数据展示的空白半圈 180 度也要设置 20 个值为 0 的虚拟维度占位,不然视图会自动按照目前所存在的值个数均分总 360 度,达不到我们想画的半圈图的效果。处理后的数据如下:

image-1652751993668
image-1652752007164

2 添加数据集

将表格中处理好的数据,添加到 DataEase 的数据集中。
image-1652752032071

3 视图制作

3.1 选择 ECharts 中 “南丁格尔玫瑰图” 视图,将 “城市” 拖入 扇区标签 / 维度 中,将 “数量” 拖入 扇区角度 / 指标 中

image-1652752078946

3.2 把数量排序为降序

image-1652752099603

3.3 在视图样式中,调整大小,将内径和外径调整到适合的大小,玫瑰图模式选择 “面积”,也将圆角调整到合适弧度,同时,标题不显示,图例不显示。

image-1652752117265

3.4 最后是颜色调整,配色方案可以自定义,从左到右色号请参考:#262525,#585653,#B5B2B2,#989589,#E1E4E4,#8B8B95,#625B61,#CCC6C6,#E4E2E1

image-1652752135062

4 完成

image-1652752154112

文章目录
其他资源