Как очистить apache Echart? Мне нужно повторно инициализировать его

У меня есть горизонтальная гистограмма с накоплением на одной странице, и каждая диаграмма изменяется в зависимости от того, что выбирает пользователь (выпадающий выбор). У меня есть вызов 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>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
36
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Каждый раз, когда вы делаете новый выбор, вы можете «повторно инициализировать» свой series (сделать его пустым списком), прежде чем добавлять в него новые данные. Поэтому, если данных нет, series останется пустым.

Затем вы можете обновить свою диаграмму, используя notMerge = true. Согласно диаграмма док :

notMergeOptional. Whether not to merge with previous option. false by default, means merge, see more details in Component Merging Modes. If true all of the current components will be removed and new components will be created according to the new option.

myChart.setOption(option, true);

Я устал. Но это не сработало. В моем коде данные серии становятся пустыми. Но он обновляет диаграмму с пустыми данными. Если данные серии пусты, отображается диаграмма с предыдущими данными. Если есть диаграмма данных серии, она обновляется. Ваша поддержка высоко ценится.

ruhunage deshan 12.05.2022 19:09

То, что вы ищете, это notMerge параметр setOption. Я добавил это в свой ответ, теперь он должен работать.

A mere dev 13.05.2022 09:00

Другие вопросы по теме