Apex Charts 渲染两次 JS 的问题

Question

我在两个不同的容器中显示两个顶点图。但它在每个容器中显示 2 个图表。我检查了我的代码中没有任何内容可以渲染图表两次。

这是我的代码。请告诉我是什么问题。

 
async function userPieChart() {
    // Call the asynchronous function and wait for the result
    let userStat =  await userStats()
    let brandPieData = {
        series: [],
        labels: []
    }
    let pLPieData = [];

    if( Object.keys(userStat).length > 0){
        let dataObj = userStat.brand_distribution || [];
        let pLdataObj = userStat.profile_loss_distribution || [];
        pLPieData = [pLdataObj.profit, pLdataObj.loss]

        if(dataObj.length > 0){
            dataObj.sort(function(a, b) {
                return b.dcount - a.dcount;
              });
            dataObj.forEach(obj => {
                let temp = {
                    series: obj.dcount ,
                    labels: obj.Brand || '',
                }

                brandPieData = {
                    ...brandPieData,
                    series: [
                        ...brandPieData.series,
                        temp.series
                    ],
                    labels: [
                        ...brandPieData.labels,
                        temp.labels
                    ]
                }

            })
        }
    }
  
        var brandOptions = {
            chart: {
                height: 150,
                width: 350,
                type: 'donut',
            },
            series: brandPieData.series,
            labels: brandPieData.labels,
            legend: {
                show: true,
                height: 150,
                width: 150,
            },
            dataLabels: {
                enabled: false
              }
        }

        
        var ProfileLossOptions = {
            chart: {
                height: 150,
                width: 350,
                type: 'donut',
            },
            series: pLPieData,
            labels: ['profit', 'loss'] ,
            legend: {
                show: true,
                height: 150,
                width: 150,
            },
            stroke: {
                show: false,
                colors: ['transparent'],
            },
            dataLabels: {
                enabled: false
              }
            
        }
        
        if(document.querySelector("#top-brand-chart")){
            var bchart = new ApexCharts(document.querySelector("#top-brand-chart"), brandOptions);
            bchart.render();
        }
        

        if(document.querySelector("#top-profileLoss-chart")){
            var plchart = new ApexCharts(document.querySelector("#top-profileLoss-chart"), ProfileLossOptions);
            plchart.render();
        }
  }

当我显示一张图表时，它工作正常

userStats 返回这样的数据

brand_distribution:[
{dcount: 1, Brand: 'A'},
{dcount: 2, Brand: 'B'},
...
],
profile_loss_distribution:{
profit: 120.
loss: 20
}
}

userStats 是一个异步函数。

Answer 1

我也有同样的问题，但是是在 ReactJS 中。我在

chart.destroy()

之后使用

chart.render()

方法解决了这个问题。在您的情况下，您可以在函数末尾返回 destroy 方法，例如

return () => {
            chart.destroy();
        }