测试demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;background-color:#E1F5FE;}
body {margin: 0;}
/* 头部样式 */
.spanpic{float: left;}
.spantxt{ text-align: center;}
/* top表格 */
.topnav {overflow: hidden;text-align: center;}
.table{width:100%;border-collapse:collapse;border-color:#42A5F5;border-width:2px;}
.table td{border-width:2px;}
/*left表格 */
.row{ overflow: hidden;}
.column {float: left;}
.column.middle {width: 50%;}
.tableft{width:100%;border-collapse:collapse;border-color:#42A5F5;border-width:2px;text-align:center;height:340px;}
.tabtop{font-size: 1.5rem;}
.column.side {width: 50%;height:340px;border:2px solid #42A5F5; }
/* 列后面清除浮动 */
.row:after { content: "";display: table;clear: both;
}
/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {.column.side, .column.middle {width: 100%;}}
/* 底部样式 */
.footer {text-align: center;width:100%;height:300px;border:2px solid #42A5F5;}
.footeripc{width:100%;height:260px;}
</style>
</head>
<body>
<!-- 头部 -->
<div>
<span class='spanpic'>银宝山新</span>
<span class='spantxt'><h2>高端设备BU生产运营大屏</h2></span>
</div>
<!--最上表格-->
<div class="topnav">
<table class='table' border="1" >
<tr>
<td rowspan='2'>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td rowspan='2'>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</div>
<div class="row">
<div class="column middle">
<table border="1" class='tableft'>
<tr>
<td colspan='3' class='tabtop'>6月各项目生产排名</td>
</tr>
<tr>
<th>排名</th>
<th>项目名</th>
<th>生产数量</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</div>
<div class="column side" id='side'></div>
</div>
<div class="footer" id='footer'>
<div class='footeripc'></div>
</div>
</body>
</html>
<script type="text/javascript" src="css/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var data=['2022/6/1','2022/6/1','2022/6/1','2022/6/1','2022/6/1','2022/6/1','2022/6/1']
var myChart = echarts.init(document.getElementById('side'));
var option;
option = {
title: {
x:'center',
text: 'Weather Statistics'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
y:'bottom', //可设定图例在上、下、居中
data: ['星期一', '星期二', '星期三','星期四', '星期五', '星期六']
},
grid: {
left: 100
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
color:['#2196F3','#FF5722','#B0BEC5','#FFD54F','#0D47A1','#4CAF50'],
yAxis: {
type: 'value',
name: 'Days',
axisLabel: {
formatter: '{value}'
}
},
xAxis: {
type: 'category',
inverse: true,
data: ['A030170', 'A030106', 'A030105'],
axisLabel: {
margin: 20,
rich: {
value: {
lineHeight: 30,
align: 'center'
},
Sunny: {
height: 40,
align: 'center',
},
Cloudy: {
height: 40,
align: 'center',
},
Showers: {
height: 40,
align: 'center',
}
}
}
},
series: [
{
name: '星期一',
type: 'bar',
barGap:'2%',/*多个并排柱子设置柱子之间的间距*/
data: [165, 170, 30],
},
{
name: '星期二',
type: 'bar',
data: [150, 105, 110]
},
{
name: '星期三',
type: 'bar',
data: [220, 82, 63]
},
{
name: '星期四',
type: 'bar',
data: [220, 82, 63]
},
{
name: '星期五',
type: 'bar',
data: [220, 82, 63]
},
{
name: '星期六',
type: 'bar',
data: [220, 82, 63]
}
]
};
myChart.setOption(option);
var myChart = echarts.init(document.getElementById('footer'));
var options;
options = {
title: {
x:'center',
fontStyle:'normal',
fontWeight:'100',
text: '双周各项目出货统计'
},
tooltip: {
trigger: 'axis'
},
color:['#FF5722','#42A5F5','#B0BEC5'],
legend: {
// x:'left', //可设定图例在左、右、居中
y:'bottom', //可设定图例在上、下、居中
data: ['Email', 'Union Ads', 'Video Ads']
},
grid: {
left: '3%',
right: '4%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
interval:0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
rotate:38 //调整数值改变倾斜的幅度（范围-90到90）
},
data:data
},
yAxis: {
type: 'value',
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
}
]
};
myChart.setOption(options);
</script>