niushuai233/gas-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: niushuai233:0f6f0b1d5516153a26eac1f1484b979cbfb91263
Branches Tags
niushuai233:master
..
compare: niushuai233:a6b4f11aa8b403ea4fcd10bff7ac981474672899
Branches Tags
niushuai233:master

No commits in common. "0f6f0b1d5516153a26eac1f1484b979cbfb91263" and "a6b4f11aa8b403ea4fcd10bff7ac981474672899" have entirely different histories.
0f6f0b1d55 ... a6b4f11aa8

1 changed files with 16 additions and 49 deletions
Show Stats Expand all files Collapse all files

65
src/main/resources/templates/index.ftl
View File

@ -19,84 +19,51 @@
width: 85%;
}
.charts {
height: 350px;
#main {
height: 400px;
width: 45%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<h2>Gas监控</h2>
</div>
<br/><br/><br/>
<div class="row">
<div class="col-xs-6 col-md-4">
<div id="main1" class="charts"></div>
</div>
<div class="col-xs-6 col-md-4">
<div id="main2" class="charts"></div>
</div>
<div class="col-xs-6 col-md-4">
<div id="main3" class="charts"></div>
</div>
</div>
<div class="row">
<div class="col-xs-9 col-md-6">
<div id="main4" class="charts"></div>
</div>
<div class="col-xs-9 col-md-6">
<div id="main5" class="charts"></div>
</div>
</div>
<div id="main"></div>
</div>
</body>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('main1'));
var myChart2 = echarts.init(document.getElementById('main2'));
var myChart3 = echarts.init(document.getElementById('main3'));
var myChart4 = echarts.init(document.getElementById('main4'));
var myChart5 = echarts.init(document.getElementById('main5'));
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'COMPLE'
text: ''
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option);
myChart2.setOption(option);
myChart3.setOption(option);
myChart4.setOption(option);
myChart5.setOption(option);
myChart.setOption(option);
window.addEventListener('resize', function () {
console.log(myChart);
myChart1.resize();
myChart2.resize();
myChart3.resize();
myChart4.resize();
myChart5.resize();
myChart.resize();
});
$(function () {