[Angular]基础饼图之我如何将鼠标显示内容的数字 " 1" 去掉

背景:接到一个需求,如下图:

莫名出来一个数字 “1” ,你啥意思?你要是不知道啥意思,能不能给我把这个 "1 " 去掉?
当时看到这个,感觉也挺简单的,一看就知道,这是引用了一个组件,所以查查看用的什么组件,然后修改一下属性就 OK 了呗.
思路是这样,解决办法也确实是这样,只不过走了一些弯路.

说一下解决过程:首先看代码,定位出问题的原因,前面也说了,这应该是引用了一个组件,所以去页面看相关代码,这么几行代码引起了我的注意:

<v-chart #chart [forceFit]="forceFit" [height]="height" [data]="data1" [scale]="scale" [onClick]="clickpic(chart)">
	<v-tooltip></v-tooltip>
	<v-axis></v-axis>
	<v-coord type="theta"></v-coord>
	<v-pie position="percent" color="item" [style]="pieStyle" [label]="labelConfig"></v-pie>
	<v-legend color="colorStyle" dataKey="item"></v-legend>
</v-chart>

嗯,感觉引用组件的相关代码就是这儿了,所以我就去官网查看了一下相关属性和说明.
后来在一个可以编辑的实例注释的网址中,做相关尝试,发现只需要修改 tooltip 的一个属性就可以了.
既然修改属性对吧,刚开始是这样修改的(着重看 v-tooltip 的 showTitle 字段):

<v-chart #chart [forceFit]="forceFit" [height]="height" [data]="data1" [scale]="scale" [onClick]="clickpic(chart)">
	<v-tooltip showTitle="false"></v-tooltip>
	<v-axis></v-axis>
	<v-coord type="theta"></v-coord>
	<v-pie position="percent" color="item" [style]="pieStyle" [label]="labelConfig"></v-pie>
	<v-legend color="colorStyle" dataKey="item"></v-legend>
</v-chart>

结果发现不起作用,我是确定是这儿有问题的,也就是说肯定是要修改这里的,既然没有起作用,那就是它不能直接这样修改,想了想,做了如下修改(着重看 v-tooltip 的 showTitle 字段):

<v-chart #chart [forceFit]="forceFit" [height]="height" [data]="data1" [scale]="scale" [onClick]="clickpic(chart)">
	<v-tooltip [showTitle]="showTitle"></v-tooltip>
	<v-axis></v-axis>
	<v-coord type="theta"></v-coord>
	<v-pie position="percent" color="item" [style]="pieStyle" [label]="labelConfig"></v-pie>
	<v-legend color="colorStyle" dataKey="item"></v-legend>
</v-chart>

同时要在后台加相关字段:

showTitle=false;

最后完美解决(不废话,上图):

在上面的整个过程中,相关参考网址如下:
相关示例 + 源码,我首先看的这个网址,弄明白各个属性大概是什么意思(里面各种图)
可以编辑的示例,推荐这个网址,主要是可以自己编辑,编辑完之后,它会自动运行编辑完成之后的结果,可以知道自己的操作对不对,等达到自己想要的效果了,再去下手修改自己的代码也不迟
viser 官网,不管什么时候,看官网肯定是最快的办法

有种把饼图玩转的莫名自信感,哈哈哈