<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Energy Year Statics</title>
<script src="lib/js/jquery-3.3.1.js"></script>
<script src="lib/js/echarts.js"></script>
<style>
body {
background-color: #5F9EA0;
}
#energyYearStaticsChart {
width: 98%;
height: 300px;
margin-left: 2%;
}
#energyYearStaticsTable {
width: calc(98% - 50px);
margin-left: 2%;
}
.square1 {
width: 20px;
height: 20px;
background: #e5323e;
float: left;
}
.square2 {
width: 20px;
height: 20px;
background: #003366;
float: left;
}
.square3 {
width: 20px;
height: 20px;
background: #006699;
float: left;
}
.square4 {
width: 20px;
height: 20px;
background: #4cabce;
float: left;
}
.square5 {
width: 20px;
height: 20px;
background: #6495ed;
float: left;
}
.echart-table{color: #fff; width: 100%; border:0; border-collapse:collapse; table-layout: fixed;}
.echart-table > thead > tr > th{text-align: center; border: 1px solid #017081;}
.echart-table > thead > tr > th:first-child{border: none; width: 98px;}
.echart-table > thead > tr > th:not(first-child){width:calc((100% - 98px) / 12);}
.echart-table > tbody > tr > td{text-align: center; border: 1px solid #017081;}
.echart-table > tbody > tr > td:first-child{width: 98px;}
.echart-table > tbody > tr > td:not(first-child){width:calc((100% - 98px) / 12);}
</style>
</head>
<body>
<div id="energyYearStaticsChart"></div>
<div id="energyYearStaticsTable">
<table class="echart-table">
<thead>
<tr>
<th></th>
<th>1月</th>
<th>2月</th>
<th>3月</th>
<th>4月</th>
<th>5月</th>
<th>6月</th>
<th>7月</th>
<th>8月</th>
<th>9月</th>
<th>10月</th>
<th>11月</th>
<th>12月</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="square1"></div>2018</td>
<td>320</td>
<td>332</td>
<td>301</td>
<td>334</td>
<td>390</td>
<td>380</td>
<td>370</td>
<td>365</td>
<td>355</td>
<td>395</td>
<td>310</td>
<td>363</td>
</tr>
<tr>
<td><div class="square2"></div>2017</td>
<td>220</td>
<td>182</td>
<td>191</td>
<td>234</td>
<td>290</td>
<td>300</td>
<td>280</td>
<td>265</td>
<td>244</td>
<td>255</td>
<td>275</td>
<td>290</td>
</tr>
<tr>
<td><div class="square3"></div>2016</td>
<td>150</td>
<td>232</td>
<td>201</td>
<td>154</td>
<td>190</td>
<td>200</td>
<td>210</td>
<td>165</td>
<td>175</td>
<td>180</td>
<td>195</td>
<td>220</td>
</tr>
<tr>
<td><div class="square4"></div>2015</td>
<td>98</td>
<td>77</td>
<td>101</td>
<td>99</td>
<td>40</td>
<td>80</td>
<td>100</td>
<td>120</td>
<td>140</td>
<td>110</td>
<td>80</td>
<td>60</td>
</tr>
<tr>
<td><div class="square5"></div>2014</td>
<td>68</td>
<td>57</td>
<td>81</td>
<td>69</td>
<td>60</td>
<td>70</td>
<td>120</td>
<td>140</td>
<td>160</td>
<td>130</td>
<td>60</td>
<td>30</td>
</tr>
</tbody>
</table>
</div>
<script>
var myChart = echarts.init(document.getElementById("energyYearStaticsChart"));
var option = {
color: ['#e5323e','#003366', '#006699', '#4cabce','#6495ed'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '100px',
right: '50px',
bottom: 0
},
legend: {
textStyle: {
color: '#fff'
},
data: ['2018', '2017', '2016', '2015','2014']
},
xAxis: [
{
type: 'category',
axisTick: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
show:true,
lineStyle: {
color: '#017081'
}
},
axisLabel: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show:false
},
data: ['1月', '2月', '3月', '4月', '5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis: [
{
type: 'value',
axisLine: {
show:true,
lineStyle: {
color: '#017081'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
align: 'right',
baseline: 'bottom'
}
},
splitLine: {
show: false
},
axisTick: {
show:false
}
}
],
series: [
{
name: '2018',
type: 'bar',
barGap: 0,
data: [320, 332, 301, 334, 390,380,370,365,355,395,310,363]
},
{
name: '2017',
type: 'bar',
data: [220, 182, 191, 234, 290,300,280,265,244,255,275,290]
},
{
name: '2016',
type: 'bar',
data: [150, 232, 201, 154, 190,200,210,165,175,180,195,220]
},
{
name: '20
echart柱状图拼接table，每列对齐，并自适应的问题的代码
5星 · 超过95%的资源 需积分: 50 165 浏览量
2019-01-09
10:37:03
上传
评论
收藏 544KB RAR 举报 
EchartProject.rar （3个子文件） 
EchartProject 
energyYearStatics.html 8KB lib js 
echarts.js 2.74MB jquery-3.3.1.js 265KB资源评论
ad3132020-04-14应该能满足我的需求，感谢了
Know_Infinity2020-04-22客气了，希望能帮到你。
Know_Infinity
- 粉丝: 7
- 资源: 22
