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

feat: 💯 折线图布局调整

Browse Source
This commit is contained in:
niushuai233 2024-06-07 17:57:02 +08:00
parent 6a101ffee3
commit 6d2f9e8b43
1 changed files with 49 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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