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

mwg9r5ms  于 2023-05-12  发布在  Java
关注(0)|答案(3)|浏览(166)

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

wqnecbli1#

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

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

myChart.setOption(option, true);
rm5edbpk

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);
qv7cva1a

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'], }对我来说是个好主意。

相关问题