AntV中的饼状图重复渲染问题解决

你的名字 2023-10-18 20:06 12阅读 0赞

## 场景 ##

在使用AntV的饼状图时，在页面加载完之后js中会ajax请求一次后台数据，

有一个时间的选择框，选择时间后点击搜索会再次执行ajax请求一次。

效果如图：

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

可是最终导致的后果是饼状图重复渲染。

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

## 实现 ##

在搜索按钮的点击事件执行的方法中，首先将以上四个div进行清理，

然后再重新请求数据进行渲染饼状图。

//搜索按钮事件
        $("#searchBtn").click(function () {
            // 刷新表格数据，分页信息不会重置
            getData();
            //清除之前渲染的图表
            $("#main1").empty();
            $("#main2").empty();
            $("#main3").empty();
            $("#main4").empty();
            var createTime = $("#createTime").val();

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/201906191423272.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190619142339507.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70