echarts实现南丁格尔图（angle）

Posted 2023-02-24

参考技术A 首先要实现一个饼状图
将type类型设置为pie

接着设置
roseType: 'angle'
当然可以有两种选择 radius（圆心角展现数据百分比，半径展现数据大小） 或者 area（圆心角相同，仅通过半径展示数据大小）

通过测试我们发现 默认的angle 与radius一致 即 圆心角展现数据百分比，半径展现数据大小。

我们也可以通过阴影的配置使页面更有立体感
其中'rgba(0, 0, 0, 0.5)'
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A：Alpha透明度。取值0~1之间。(颜色的透明度)

再加入一些动态效果例如悬停时扇区发生改变 （类似css中的伪类）
图形样式下有 normal（正常显示时样式）与emphasis（高亮时样式）

当前样式不能满足页面设计需求，需要改变背景颜色及文字颜色。这时我们可以设置
backgroundColor 属性与textStyle属性

以上是听过全局属性进行配置，我们也可以通过 系列（series）单独设置每个系列的文本与其他线条颜色

扇形的颜色也可以改变 在itemStyle下

有人说颜色一样没有层次感，想通过明暗渐变表现出层次感
使用 visualMap 可以调节亮暗区间，以及根据明亮程度取色。

如果想不被visualmap修饰可以在series里的对应数据项中设置

如果想要设置每个扇区的颜色可以再color数组中设置