在将两个ECharts图表放在同一个html文件中时两个图重合，开始以为是div块的问题但是后面发现无论怎么分块都无法实现两个图分开
只能如下图：
该html的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" href="/static/css/bootstrap.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<style type="text/css">
#container_1{
float: left;
width: 700px;
height: 100%;
}
#container_2{
overflow: hidden;
}
</style>
</head>
<body>
<div id="container_1" style="width: 700px;height: 400px"></div>
<script type="text/javascript">
var chartDom = document.getElementById('container_1');
//var myChart=echarts.init(document.getElementById("container_1"),'light',{renderer:'canvas'});
var myChart = echarts.init(chartDom);
$.get('/cb/bar_stone/',function (data) {
var cate_data = new Array()
var im_data=new Array()
var ex_data=new Array()
//var num_data = new Array()
var data = JSON.parse(data)
for (var key in data) {
cate_data[key] = data[key].category
im_data[key]=data[key].import
ex_data[key]=data[key].export
// num_data[key] = {value: data[key].composition, name: data[key].category}
//alert(num_data)
}
var option={
title: {
text: '进出口情况',
subtext: '数据来源：中国知网'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Export', 'Import']
},
toolbox: {
show: true,
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis: [
{
type: 'category',
// prettier-ignore
data: cate_data
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Export',
type: 'bar',
data: ex_data,
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
markLine: {
data: [{ type: 'average', name: 'Avg' }]
}
},
{
name: 'Import',
type: 'bar',
data:im_data,
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
markLine: {
data: [{ type: 'average', name: 'Avg' }]
}
}
]}
myChart.setOption(option);
})
</script>
<div id="container_2" style="width: 750px;height: 400px"></div>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById("container_2"))
$.get('/cb/pie_stone/',function (data){
var cate_data=new Array()
var num_data=new Array()
var data=JSON.parse(data)
for (var key in data){
cate_data[key]=data[key].category
num_data[key]={value:data[key].composition,name:data[key].category}
//alert(num_data)
}
var option={
title: {
text: '商品结构',
subtext: '数据来源：中国知网',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'right'
},
toolbox: {
show: true,
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: '产品名称',
type: 'pie',
radius: '50%',
data: num_data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]}
myChart.setOption(option);
});
</script>
</body>
</html>
想问问为啥总是会重在一起，而不能实现左右布局呀
