如何解决EChart不能被多次调用啊？

Question

如何解决EChart不能被多次调用啊？求大神解答！

html代码：

 <div class="col-md-6">
                        <div class="panel" id="panel2">
                            <div class="panel-heading">
                                <a href="#">▌统计图</a>

                                <span class="tools pull-right">
                                   
                            <a class="fa fa-chevron-down" href="javascript:;"><img src="img\dh.png" alt=""></a>
                            <a class="fa fa-times" href="javascript:;"><img src="img\shutdown.png" alt=""></a>
                        </span>
                            </div>
                            <div class="panel-body">
                                <div id="container1" style="height: 100%;width: 100%;"></div>

                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="panel" id="panel2">
                            <div class="panel-heading">
                                <a href="#">▌统计图</a>

                                <span class="tools pull-right">
                                   
                            <a class="fa fa-chevron-down" href="javascript:;"><img src="img\dh.png" alt=""></a>
                            <a class="fa fa-times" href="javascript:;"><img src="img\shutdown.png" alt=""></a>
                        </span>
                            </div>
                            <div class="panel-body">
                                <div id="container2" style="height: 100%;width: 100%;"></div>

                            </div>
                        </div>
                    </div>

js：

 var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    // var app = {};

    // app.title = '环形图';

    var option = {

        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        color: ['#93D8A9', '#FFB99D', '#AF7DCC', '#FFD83D', '#bbe2e8'],
        legend: {
            orient: 'horizontal',
            top: "0%", //图例选择条
            x: 'left',
            data: ['熊掌号', '网站地图', '网站导航', '小程序', '360']
        },

        series: [{
            name: '访问来源',
            type: 'pie',
            radius: ['30%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                value: 335,
                name: '熊掌号'
            }, {
                value: 310,
                name: '网站地图'
            }, {
                value: 234,
                name: '网站导航'
            }, {
                value: 135,
                name: '小程序'
            }, {
                value: 1548,
                name: '360'
            }]
        }]
    };

    if (option && typeof option === "object") {
        myChart.clear();
        myChart.setOption(option, true);

    }

    //系统数据

    var dom = document.getElementById("container2");
    var myChart = echarts.init(dom);

    option = {
        tooltip: {
            trigger: "axis"
        },
        legend: {
            data: ["新增", "删除", "更新", "推荐"]
        },

        xAxis: [{
            type: "category",
            data: ["产品", "黄页", "旺铺", "商务服务"]
        }],
        yAxis: [{
            type: "value"
        }],
        series: [{
                name: "新增",
                type: "bar",
                data: [215, 535, 102, 253]
            },
            {
                name: "删除",
                type: "bar",
                data: [215, 542, 154, 251]
            },
            {
                type: "bar",
                name: "更新",
                data: [125, 545, 545, 1005]
            },
            {
                type: "bar",
                name: "推荐",
                data: [524, 215, 235, 451]
            }
        ]
    }

    if (option && typeof option === "object") {
        myChart.clear();
        myChart.setOption(option, true);
    }

我现在只能调用第一个图，但是调用不了第二个图，是怎么回事呢？？求解答

Answer 1

你两个图表 变量一样啊 亲