我如何清除apache Echart？我需要重新初始化它答案

【问题标题】：how do I clear a apache Echart? I need to re-initialize it我如何清除apache Echart？我需要重新初始化它
【发布时间】：2023-01-12 08:53:38
【问题描述】：

我在单个页面上有堆叠水平条形图，每个图表都会根据用户选择（下拉选择）而变化。我有一个检索数据的 ajax 调用，因此数据会根据用户选择而变化并且是动态的。我在清除旧数据时遇到问题。如果没有数据，它应该显示水平条形图。但它显示以前的数据。如果没有数据，它不会变空。基本上，我只想在每次选择后重新初始化图表并从头开始。我怎样才能做到这一点？

<script type = "text/javascript" >
    var series;
$("#sub_project3").change(function() {
    $.ajax({
        url: "<?php echo base_url("
        Manage_procurement_plan / load_bar_chart ");?>",
        type: "POST",
        data: {
            drop_value: $(this).val()
        },
        dataType: "text",
        cache: false,
        success: function(data) {
            series = data;
            var dom = document.getElementById("main");
            var myChart = echarts.init(dom);
            var app = {};
            var option;
            getBarGraph(series);

            function getBarGraph(data) {
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        top: '3%',
                    },
                    grid: {
                        top: '28%',
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                    },
                    xAxis: {
                        type: 'value',
                    },
                    yAxis: {
                        type: 'category',
                        data: ['Actual Avg', 'ADB Min Standard']
                    },
                    series: JSON.parse(data),
                };
                /*if (option && typeof option === 'object') {
                    
                    myChart.setOption(option);
                }*/
                myChart.setOption(option);

            }
        }
    });
}); 
</script>

【问题讨论】：

标签： javascript ajax echarts

【解决方案1】：

每次进行新选择时，您都可以在向其中推送新数据之前“重新初始化”您的series（使其成为一个空列表）。因此，如果没有数据，series 将保持为空。

然后，您可以使用notMerge = true更新您的图表。根据echarts doc：

不合并 选修的.是否不与之前的选项合并。 false来自 default，表示合并，详见组件合并模式。如果 true所有当前组件将被删除和新组件将根据新选项创建.
myChart.setOption(option, true);

【讨论】：

我累了。但它没有用。在我的代码中，系列数据变空了。但它确实用空数据更新了图表。如果系列数据为空，它会显示包含先前数据的图表。如果有系列数据图表正在更新。非常感谢您的支持。
您正在寻找的是 setOption 的 notMerge 参数。我在我的答案中添加了它，它现在应该可以工作了。

【解决方案2】：

我今天遇到了同样的问题。

我在你的问题中看到的是你正在使用每个 Ajax 调用来创建一个新图表。

var dom = document.getElementById("main");
var myChart = echarts.init(dom);

因此，在您第一次创建图表并显示初始数据时，Ajax 调用没有问题。

事实上，Apache Echarts 库会记住在它的实例上绘制的每个图表。因此，在每次调用此 success 方法时，您实际上是在创建一个新图表。

因此，您必须创建另一个 Ajax 调用来更新数据，首先，您必须找到图表实例，然后执行 setOption 方法，正如 @A mere dev 在另一个答案中所说的那样。在唯一的更新 Ajax 调用中，您不需要创建新图表，只需接收新数据并将其传递

myChart.setOption(option, true);

【讨论】：