javascript 如何清除Apache Echart？我需要重新初始化它

mwg9r5ms 于 2023-05-12 发布在 Java

关注(0)|答案(3)|浏览(156)

我在一个页面上有一个堆叠的水平条形图，每个图表都根据用户的选择（下拉选择）而变化。我有一个 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

来源：https://stackoverflow.com/questions/72210140/how-do-i-clear-a-apache-echart-i-need-to-re-initialize-it

3条答案

按热度按时间

wqnecbli1#

每次你做一个新的选择，你都可以在把新的数据放入series之前，重新初始化series（使它成为一个空列表）。因此，如果没有数据，series将保持为空。
然后，您可以使用notMerge = true更新图表。根据echarts doc：

notMerge*可选 *。是否不与上一个选项合并。默认情况下，false表示合并，请参阅组件合并模式中的详细信息。如果true，则删除所有当前组件，并根据新选项创建新组件。

myChart.setOption(option, true);

赞(0）回复(0）举报 2023-05-12

rm5edbpk2#

我今天也遇到了同样的问题。
我在您的问题中看到的是，您正在使用每个 AJAX 调用来创建一个新图表。

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

因此，第一次创建图表并显示初始数据时， AJAX 调用是很好的。
事实上，ApacheEcharts库会记住在其示例上绘制的每个图表。因此，每次调用这个success方法时，实际上都在创建一个新图表。
因此，您必须创建另一个 AJAX 调用来更新数据，首先，您必须找到图表示例，并执行setOption方法，正如@A mere dev在其他答案中所说的那样。在唯一的更新 AJAX 调用中，您不需要创建新图表，而只需接收新数据并传递它

myChart.setOption(option, true);

赞(0）回复(0）举报 2023-05-12

qv7cva1a3#

this.chartInstance.setOption(
  {
    series: this.widgetData.map((widget: ChartDataDto) => ({
      type: 'bar',
      barMaxWidth: !this.widget.barWidth ? 40 : this.widget.barWidth,
      name: widget.name,
      data: widget.data,
      stack: 'one',
      label: {
        show: this.widget.showLabel ? true : false,
        position: 'right',
        fontWeight: 'bold',
        formatter: ({ value }) => MathUtils.formatNumberToThousands(value),
      },
    })),
  },
  {
    replaceMerge: ['series'],
  }

添加{ replaceMerge: ['series'], }对我来说是个好主意。

赞(0）回复(0）举报 2023-05-12

我来回答

javascript 如何清除Apache Echart？我需要重新初始化它

3条答案

相关问题

热门标签

最新问答