如何解决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);
}
我现在只能调用第一个图,但是调用不了第二个图,是怎么回事呢??求解答