• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

echarts的初始化和销毁dispose

开发技术 开发技术 4小时前 3次浏览

容器节点被销毁以及被重建时

假设页面中存在多个标签页,
每个标签页都包含一些图表。
当选中一个标签页的时候,其他标签页的内容在 DOM 中被移除了。
这样,当用户再选中这些标签页的时候,就会发现图表“不见”了。

本质上,这是由于图表的容器节点被移除导致的。
即使之后该节点被重新添加,图表所在的节点也已经不存在了。
正确的做法是,
在图表容器被销毁之后,
调用 echartsInstance.dispose 销毁实例,
在图表容器重新被添加后再次调用 echarts.init 初始化。

从上面这一句话,我们可以得出一个结论:
那就是有些时候我们在移除容器的时候,echarts可能展示不出来
那么解决的办法是:
调用 echartsInstance.dispose 销毁实例,

echartsInstance.dispose的使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 800px;height:400px; background: pink;"></div>
    <div onclick="showHander()" class="zahsnhi">展示实例</div>
    <div onclick="desHander()" class="xiaohui">销毁实例</div>
    <script type="text/javascript">
        // 初始化echarts
        function xuanranInt() {
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            let index = 0;

            var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'];

            var data = [{
                'name': '热点网格',
                'value': 5600
            }, {
                'name': '大气污染',
                'value': 3600
            }, {
                'name': '水质超标',
                'value': 1500
            }, {
                'name': '在线超标',
                'value': 2000
            }, {
                'name': '未知',
                'value': 899
            }, {
                'name': '系统对接',
                'value': 4000
            }]
            option = {
                title: {
                    text: 'PieChart',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontSize: 20
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: '5%',
                    top: 'center',
                    selectedMode: true,
                    icon: 'pin',
                    formatter: function (name) {
                        let title = ''
                        var total = 0;
                        var target;
                        var index;
                        for (var i = 0, l = data.length; i < l; i++) {
                            if (data[i].name == name) {
                                target = data[i].value;
                                title = data[i].label
                                index = i < 6 ? i : 5
                            }
                        }
                        return `  ${name}   ${index}  ${target}个`
                    }
                },
                label: { //去除饼图的指示折线label
                    normal: {
                        show: false,
                        position: 'inside',
                        formatter: "{b}:{d}%"
                    },
                },
                series: [{
                    type: 'pie',
                    center: ['50%', '50%'],
                    radius: ['50%', '70%'],
                    clockwise: true,
                    avoidLabelOverlap: true,
                    hoverOffset: 30,
                    emphasis: {
                        itemStyle: {
                            borderColor: '#f3f3f3',
                            borderWidth: 10
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: "#FFFFFF",
                            borderWidth: 1,
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    },

                    data: data,
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        // 调用
        xuanranInt();

        // 重新渲染echarts
        function showHander() {
            xuanranInt();
        }

        // 销毁实例
        function desHander() {
            var myChart = echarts.init(document.getElementById('main'));
            // 销毁实例,销毁后实例无法再被使用。
            // 在什么情况下需要调用该函数进行销毁当前的实例呢?
            // 官方给的说明:在图表容器被销毁之后,调用 echartsInstance.dispose 销毁实例,
            myChart.dispose();
        }
    </script>
</body>
</html>

效果图

echarts的初始化和销毁dispose

echartsInstance.clear的使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 800px;height:400px; background: pink;"></div>
    <div onclick="showHander()">展示实例</div>
    <div onclick="desHander()">销毁实例</div>
    <div onclick="qingkong()">清空当前实例</div>
    <script type="text/javascript">
    // 初始化echarts
    function xuanranInt(){
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        let index = 0;

        var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'];

        var data = [{
            'name': '热点网格',
            'value': 5600
        }, {
            'name': '大气污染',
            'value': 3600
        }, {
            'name': '水质超标',
            'value': 1500
        }, {
            'name': '在线超标',
            'value': 2000
        }, {
            'name': '未知',
            'value': 899
        }, {
            'name': '系统对接',
            'value': 4000
        }]
        option = {
            title: {
                text: 'PieChart',
                x: 'center',
                y: 'center',
                textStyle: {
                    fontSize: 20
                }
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: '5%',
                top: 'center',
                selectedMode: true,
                icon: 'pin',
                formatter: function (name) {
                    let title = ''
                    var total = 0;
                    var target;
                    var index;
                    for (var i = 0, l = data.length; i < l; i++) {
                        if (data[i].name == name) {
                            target = data[i].value;
                            title = data[i].label
                            index = i < 6 ? i : 5
                        }
                    }
                    return `  ${name}   ${index}  ${target}个`
                }
            },
            label: { //去除饼图的指示折线label
                normal: {
                    show: false,
                    position: 'inside',
                    formatter: "{b}:{d}%"
                },
            },
            series: [{
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['50%', '70%'],
                clockwise: true,
                avoidLabelOverlap: true,
                hoverOffset: 30,
                emphasis: {
                    itemStyle: {
                        borderColor: '#f3f3f3',
                        borderWidth: 10
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: "#FFFFFF",
                        borderWidth: 1,
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false
                        }
                    }
                },

                data: data,
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
    // 调用
    xuanranInt();

    // 重新渲染echarts
    function showHander(){
        xuanranInt();
    }

    // 销毁实例
    function desHander(){
        var myChart = echarts.init(document.getElementById('main'));
        // 销毁实例,销毁后实例无法再被使用。
        // 在什么情况下需要调用该函数进行销毁当前的实例呢?
        // 官方给的说明:在图表容器被销毁之后,调用 echartsInstance.dispose 销毁实例,
        myChart.dispose();
    }

    // 清空当前实例
    function qingkong(){
        // 清空当前实例,会移除实例中所有的组件和图表。
        var myChart = echarts.init(document.getElementById('main'));
        myChart.clear() 
    }
    </script>
</body>
</html>

echarts的初始化和销毁dispose

clear和dispose的区别在哪里呢?

学过vue的同学都知道,v-show和v-if
其实clear类似于v-show
dispose类似于v-if
他们的区别就是这样

程序员灯塔
转载请注明原文链接:echarts的初始化和销毁dispose
喜欢 (0)