echarts主题切换时页面不刷新问题

最新推荐文章于 2024-06-05 09:57:16 发布

戒不掉的伤怀

最新推荐文章于 2024-06-05 09:57:16 发布

阅读量679

点赞数

分类专栏：工作类文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/u013141712/article/details/126699737

版权

工作类专栏收录该内容

42 篇文章 2 订阅

订阅专栏

解决办法，在重新渲染之前，先给他清空在渲染

echarts.init(document.getElementById('main')).dispose();

var myChart = echarts.init(document.getElementById('main'), buttonS);

    function fun(n) {
        if (n == 1) {
            fun1('walden')
            fun2('walden')
        } else if (n == 2) {

            fun1('dark')
            fun2('dark')
          
        }
    }
    // 基于准备好的dom，初始化echarts实例
    function fun1(buttonS) {
        echarts.init(document.getElementById('main')).dispose();
        var myChart = echarts.init(document.getElementById('main'), buttonS);
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'Rainfall and Flow Relationship',
                left: 'center'
            },
            grid: {
                bottom: 80
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    animation: false,
                    label: {
                        backgroundColor: '#505765'
                    }
                }
            },
            legend: {
                data: ['Flow', 'Rainfall'],
                left: 10
            },
            dataZoom: [
                {
                    show: true,
                    realtime: true,
                    start: 65,
                    end: 85
                },
                {
                    type: 'inside',
                    realtime: true,
                    start: 65,
                    end: 85
                }
            ],
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLine: { onZero: false },
                    // prettier-ignore
                    data: [
        
                    ]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
 
        
    }