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

矫情吗；* 2022-02-05 09:25 72阅读 0赞

背景:接到一个需求,如下图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psbF8wNDA1_size_16_color_FFFFFF_t_70]  
莫名出来一个数字 “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;

最后完美解决(不废话,上图):  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psbF8wNDA1_size_16_color_FFFFFF_t_70 1]

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psbF8wNDA1_size_16_color_FFFFFF_t_70]: /images/20220205/71ad1cc6b9584d109071904d4cf2d913.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psbF8wNDA1_size_16_color_FFFFFF_t_70 1]: /images/20220205/92dafaf3a7d54cc6965955177f9c8258.png
[Link 1]: https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html
[Link 2]: https://bizcharts.net/products/bizCharts/demo/detail?id=pie-labelline&selectedKey=%E9%A5%BC%E5%9B%BE&from=antv
[viser]: https://www.yuque.com/rs385i