TIP
利用markPoint
实现echart仪表盘,标签文字旋转
echart给出的例子如下
- 仪表盘上的数字默认是在表盘里面的,通过
distance
可以将其调到外面去,但是可以看到图中顶部中间的数字,距离仪表盘的间距太大了,不美观。 - 同时我想要使文字沿着表盘外围,有弧度的排列。但是
axisLabel
中不知此rotate
这个配置。
解决思路
- 既然不支持就直接隐藏
axisLabel
。 - 利用
markPoint
图表标注,曲线解决。 - 标注有一个标记图形
symbol
必须设置,如果设置为none
就不会显示,随便选择一个其他类型,就会有一个图形背景,但是我不需要这个背景。可以看到文档中说了该属性值还可以是图片路径或矢量路径,那么我就直接弄一张透明图片作为它的背景图形。 - 标注的数据根据
min max splitNumber
来计算。 - 标注的位置根据圆心位置、单个标注刻度的角度来计算。
- 标注的文字旋转角度同样根据单个标注刻度的角度来计算。