目录
1.效果图
解析:用到了多表联动与html的图插入,图用的是float 浮动效果
2.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
<style>/*div间隔与横向联动设置*/
.container {
display: flex;
}
.chart {
margin: 0px;
}
.a1{
background-color: pink;
}
.a2{
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="a1" style="width: 100%;height: 960px;">
<div class="a2" style="width: 400px;height: 300px;">
<img src="image\卡比兽.jpg" >
</div>
<div class="container">
<div id="my1" class="chart" style="width: 400px;height: 300px;"></div>
<div id="my2" class="chart" style="width: 400px;height: 300px;"></div>
</div>
</div>
<script type="text/javascript">
var myChar1=echarts.init(document.getElementById("my1"));
var myChar2=echarts.init(document.getElementById("my2"));
var option1={
backgroundColor:'rgba(204,204,204,0.7)',
title: {
text: '外观',
top: '10',
textStyle: {
color: 'pi