echarts中的玫瑰图(饼图)如何取消显示指示线和指示文字(coderwhy后台管理系统优化2)

因为显示空间有限,无论怎么调整玫瑰图的内外半径,指示线对应的指示文字还是看不见,如下图:

echarts中的玫瑰图(饼图)如何取消显示指示线和指示文字(coderwhy后台管理系统优化2)

 

 

 所以我想是否可以取消指示线和指示文字,只有当点击的时候显示具体数据同时显示百分比

具体步骤如下:

1.添加label相关代码,取消指示文字和指示线

echarts中的玫瑰图(饼图)如何取消显示指示线和指示文字(coderwhy后台管理系统优化2)

 查看echarts官网:

echarts中的玫瑰图(饼图)如何取消显示指示线和指示文字(coderwhy后台管理系统优化2)

 

 

 可以看到它就是设置视觉引导线的,将其Boolean值设置为false即可。

 

2.显示百分比

具体配置如下:

echarts中的玫瑰图(饼图)如何取消显示指示线和指示文字(coderwhy后台管理系统优化2)

 

 

 tooltip: 提示框组件。

触发类型选择'item',数据项图像触发,主要在散点图、饼图等无类目轴的图表中使用。

formatter:提示框浮层内容格式器,对饼图而言,{a}(系列名称),{b}(数据项名称),{c}(数值),{d}(百分比)。

 

最终效果图:

echarts中的玫瑰图(饼图)如何取消显示指示线和指示文字(coderwhy后台管理系统优化2)

 

上一篇:大数据时代“必需品”——ECharts


下一篇:echarts词云图遇到的坑