ApexChart获取首个图表选中值更新第二个图表 重复生成div问题

你的代码存在三个核心问题导致重复生成图表：

• 未单独声明第二个图表的实例变量，在secondchart中调用的chart.render()实际是第一个图表#chart1的实例方法，逻辑完全错误。
• 每次触发点选事件都会先重载#chart2容器，再重复创建新的图表实例，旧实例没有销毁，自然会生成新的div垂直堆叠。
• 没有使用ApexCharts自带的数据更新API，每次触发更新都走完整的初始化渲染流程，性能低且会触发重复渲染。

• 全局声明第二个图表的实例变量，用来复用实例避免重复创建
• 移除不必要的$("#chart2").load()容器重载逻辑，保留固定的#chart2DOM节点即可
• 首次调用secondchart时初始化第二个图表实例，后续调用直接通过updateSeries方法更新数据，无需重新初始化实例

var app = @json($newval);
// 全局存储第二个图表的实例
let chart2 = null;

var options = {
    series: app,
    chart: {
        events: {
            dataPointSelection:function (event, chartContext, config) {
                var value= config.w.config.series[config.dataPointIndex];
                secondchart(value);
            }
        },
        width: 380,
        type: 'donut',
    },
    dataLabels: {
        enabled: false
    },
    responsive: [{
        breakpoint: 480,
        options: {
            chart: {
                width: 200
            },
            legend: {
                show: false
            }
        }
    }],
    legend: {
        position: 'right',
        offsetY: 0,
        height: 230,
    }
};

var chart = new ApexCharts(document.querySelector("#chart1"), options);
chart.render();

function secondchart(value) {
    console.log(value);
    var chart2Options = {
        series: [{
            // 注：你原逻辑仅传入1个值，第二个图表x轴有10个分类，可根据业务需求补全数组
            data: [value]
        }],
        chart: {
            type: 'bar',
            height: 350
        },
        plotOptions: {
            bar: {
                borderRadius: 4,
                horizontal: true,
            }
        },
        dataLabels: {
            enabled: false
        },
        xaxis: {
            categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
                'United States', 'China', 'Germany'
            ],
        }
    };

    // 实例不存在则初始化，存在则直接更新数据
    if (!chart2) {
        chart2 = new ApexCharts(document.querySelector("#chart2"), chart2Options);
        chart2.render();
    } else {
        chart2.updateSeries([{
            data: [value]
        }]);
    }
}
</script>

如果后续需要修改第二个图表除了series之外的其他配置，把updateSeries替换为updateOptions方法，传入完整的新配置项即可。

内容的提问来源于stack exchange，提问作者Muhammad Bilal