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