v-charts no data All In One

v-charts no data All In One

echarts dispose

    async getData () {
        this.chartLoading = true;
        this.dataEmpty = false;
        const params = this.getParams();
        const res = await apiService[this.pieApi](params).finally(() => {
            this.chartLoading = false;
        });
        const {data, key, value} = res.data.data;
        // this.$refs.chart.echarts.resize();
        this.chartData = Object.assign({}, {
            columns: [key, value],
            rows: this.formatRows(data),
        });
        if (!data.length) {
            this.chartData.columns = [];
            this.chartData.rows = [];
            // this.$refs.chart.echarts.dispose();
            console.log('this.$refs.chart', this.$refs.chart);
            console.log('this.$refs.chart.echarts', this.$refs.chart.echarts);
            this.$refs.chart.init();
            this.$refs.chart.clean();
            // const id = this.$refs.chart.echarts.id;
            // const div = document.querySelector(`[_echarts_instance_="${id}"]`);
            // div.style.display = 'none';
            // this.$refs.chart.echarts.setOption({series: []}, true);
            // this.$refs.chart.echarts.resize();
            // this.chartExtend.series = [];
            // this.chartSettings.series = [];
            // this.chartSettings.setOptionOpts = true;
            // this.chartSettings['set-option-opts'] = true;
            this.dataEmpty = true;
            return;
        }
        // document.getElementById('e1').removeAttribute('_echarts_instance_');
        // this.$nextTick(_ => {
        //     this.$refs.chart.echarts.resize();
        // });
    },

v-charts 重繪

echarts setOption

set-option-opts

https://sunra.top/2020/03/13/v-charts/

bug

destroy

clear series

// this.chartData.columns = [];
// this.chartData.rows = [];

// this.chartExtend.series = [];
// this.chartSettings.series = [];

this.$refs.chart.echarts.setOption({series: []}, true);

solution

CSS show / hidden ✅

    async getData () {
        this.chartLoading = true;
        this.dataEmpty = false;
        const params = this.getParams();
        const res = await apiService[this.pieApi](params).finally(() => {
            this.chartLoading = false;
        });
        const {data, key, value} = res.data.data;
        this.chartData = Object.assign({}, {
            columns: [key, value],
            rows: this.formatRows(data),
        });
        const id = this.$refs.chart.echarts.id;
        const div = document.querySelector(`[_echarts_instance_="${id}"]`);
        div.style.display = 'block';
        if (!data.length) {
            // this.chartData.columns = [];
            // this.chartData.rows = [];
            div.style.display = 'none';
            this.dataEmpty = true;
            return;
        }
    },

refs

https://v-charts.xgqfrms.xyz/#/props-demo2

https://www.runoob.com/echarts/echarts-ajax-data.html

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 發佈文章使用：只允許註冊用戶纔可以訪問！

原創文章，版權所有©️xgqfrms, 禁止轉載 🈲️，侵權必究⚠️！

---