Spaces:
Running
Running
Update index.html
Browse files- index.html +21 -0
index.html
CHANGED
|
@@ -8,6 +8,25 @@
|
|
| 8 |
<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
|
| 9 |
<!-- Include jQuery library -->
|
| 10 |
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 11 |
</head>
|
| 12 |
<body>
|
| 13 |
<!-- Placeholder for the chart -->
|
|
@@ -16,6 +35,8 @@
|
|
| 16 |
<script>
|
| 17 |
var chartDom = document.getElementById('main');
|
| 18 |
var myChart = echarts.init(chartDom);
|
|
|
|
|
|
|
| 19 |
|
| 20 |
myChart.showLoading();
|
| 21 |
|
|
|
|
| 8 |
<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
|
| 9 |
<!-- Include jQuery library -->
|
| 10 |
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
/* Make the chart responsive */
|
| 13 |
+
#main {
|
| 14 |
+
width: 100%;
|
| 15 |
+
max-width: 1200px;
|
| 16 |
+
height: 100vh;
|
| 17 |
+
max-height: 800px;
|
| 18 |
+
margin: 5cm auto 0 auto;
|
| 19 |
+
transform: scale(0.8);
|
| 20 |
+
transform-origin: top left;
|
| 21 |
+
}
|
| 22 |
+
|
| 23 |
+
/* Adjust scaling for smaller screens */
|
| 24 |
+
@media (max-width: 768px) {
|
| 25 |
+
#main {
|
| 26 |
+
transform: scale(0.6);
|
| 27 |
+
}
|
| 28 |
+
}
|
| 29 |
+
</style>
|
| 30 |
</head>
|
| 31 |
<body>
|
| 32 |
<!-- Placeholder for the chart -->
|
|
|
|
| 35 |
<script>
|
| 36 |
var chartDom = document.getElementById('main');
|
| 37 |
var myChart = echarts.init(chartDom);
|
| 38 |
+
window.addEventListener('resize', function() {
|
| 39 |
+
myChart.resize();
|
| 40 |
|
| 41 |
myChart.showLoading();
|
| 42 |
|