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

Compare commits

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

2 Commits
a6b4f11aa8 ... 0f6f0b1d55

Author SHA1 Message Date
niushuai233
0f6f0b1d55 Merge remote-tracking branch 'origin/master' 2024-06-07 17:57:14 +08:00
niushuai233
6d2f9e8b43 feat: 💯 折线图布局调整 2024-06-07 17:57:02 +08:00
1 changed files with 49 additions and 16 deletions
Show Stats Expand all files Collapse all files

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

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