zoukankan      html  css  js  c++  java
  • vcharts 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, 禁止转载 ️,侵权必究⚠️!


    xgqfrms
  • 相关阅读:
    Dubbo学习系列之六(微服务架构实战)
    流式计算(二)-Kafka Stream
    流式计算(一)-Java8Stream
    Dubbo学习系列之七(分布式订单ID方案)
    Dubbo学习系列之十六(ELK海量日志分析框架)
    什么情况下不能使用 Java 泛型
    Java Stream 流如何进行合并操作
    可别在代码中写那么多魔法值了,脑壳疼!
    你知道如何自动保存 Spring Boot 应用进程号吗
    Spring 官方发起Spring Authorization Server 项目
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/15800259.html
Copyright © 2011-2022 走看看