parent
1608dd75ab
commit
0239d9462b
@ -0,0 +1,41 @@
|
||||
<div class="sidebar">
|
||||
<div class="menu-item">北京</div>
|
||||
<div class="menu-item">长沙</div>
|
||||
<div class="menu-item">上海</div>
|
||||
<!-- 更多菜单项... -->
|
||||
</div>
|
||||
<button id="toggleIndent">切换缩进</button>
|
||||
<style>
|
||||
/* 初始的侧边栏样式 */
|
||||
.sidebar {
|
||||
width: 200px; /* 侧边栏宽度 */
|
||||
background-color: #f4f4f4; /* 侧边栏背景颜色 */
|
||||
padding: 10px; /* 侧边栏内边距 */
|
||||
}
|
||||
|
||||
/* 菜单项样式 */
|
||||
.menu-item {
|
||||
padding: 8px 20px; /* 菜单项内边距 */
|
||||
margin-bottom: 5px; /* 菜单项之间的间隔 */
|
||||
background-color: #ddd; /* 菜单项背景颜色 */
|
||||
cursor: pointer; /* 鼠标悬停时显示为指针 */
|
||||
transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
|
||||
}
|
||||
|
||||
/* 缩进效果的样式 */
|
||||
.indented {
|
||||
margin-left: 20px; /* 缩进的距离 */
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var toggleIndentButton = document.getElementById('toggleIndent');
|
||||
var menuItems = document.querySelectorAll('.menu-item');
|
||||
|
||||
toggleIndentButton.addEventListener('click', function () {
|
||||
menuItems.forEach(function (item) {
|
||||
item.classList.toggle('indented');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,363 @@
|
||||
@charset "UTF-8";
|
||||
/* CSS Document */
|
||||
.bg{
|
||||
margin:0 auto;
|
||||
width:100%;
|
||||
min-height:100vh;
|
||||
background:url(../images/bg2.jpg) no-repeat;
|
||||
background-size: cover;
|
||||
padding-top:0rem;
|
||||
padding:0rem 0.2rem;
|
||||
|
||||
}
|
||||
/*.conIn{
|
||||
display:flex;
|
||||
display: -webkit-flex;}*/
|
||||
.title{
|
||||
width:100%;
|
||||
font-size:0.12rem;
|
||||
line-height:0.3rem;
|
||||
color:rgba(14,253,255,1);
|
||||
text-align:center;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.border_bg_leftTop{
|
||||
position:absolute;
|
||||
left:-0.008rem;
|
||||
top:-0.04rem;
|
||||
width:0.37rem;
|
||||
height:0.05rem;
|
||||
display:block;
|
||||
background: url(../images/title_left_bg.png) no-repeat;
|
||||
background-size:cover;}
|
||||
.border_bg_rightTop{
|
||||
position:absolute;
|
||||
right:-0.01rem;
|
||||
top:-0.01rem;
|
||||
width:0.1rem;
|
||||
height:0.1rem;
|
||||
display:block;
|
||||
background:url(../images/border_bg.jpg) no-repeat;
|
||||
background-size:cover;}
|
||||
.border_bg_leftBottom{
|
||||
position:absolute;
|
||||
left:-0.008rem;
|
||||
bottom:-0.008rem;
|
||||
width:0.1rem;
|
||||
height:0.1rem;
|
||||
display:block;
|
||||
background:url(../images/border_bg.jpg) no-repeat;
|
||||
background-size:cover;}
|
||||
.border_bg_rightBottom{
|
||||
position:absolute;
|
||||
right:-0.01rem;
|
||||
bottom:-0.01rem;
|
||||
width:0.08rem;
|
||||
height:0.08rem;
|
||||
display:block;
|
||||
background:url(../images/title_right_bg.png) no-repeat;
|
||||
background-size:cover;}
|
||||
|
||||
.leftMain{
|
||||
width:75%;
|
||||
float:left;
|
||||
padding-right:0.1rem;
|
||||
padding-top:0.1rem;
|
||||
}
|
||||
|
||||
.rightMain{
|
||||
width:25%;
|
||||
float:left;
|
||||
padding-top:0.1rem;}
|
||||
|
||||
.leftMain_top{
|
||||
width:100%;
|
||||
padding-bottom:0.1rem;}
|
||||
.leftMain_top ul{
|
||||
display:flex;
|
||||
display: -webkit-flex;
|
||||
}
|
||||
.leftMain_top ul li{
|
||||
float:left;
|
||||
width:25%;
|
||||
padding-right:0.1rem;}
|
||||
.leftMain_top ul li:last-child{
|
||||
padding:0;}
|
||||
.leftMain_top ul li .liIn{
|
||||
border:0.008rem solid rgba(14,253,255,0.5);
|
||||
width:100%;
|
||||
min-height:60px;
|
||||
position:relative;
|
||||
padding:0.08rem 0.05rem;
|
||||
}
|
||||
.leftMain_top ul li .liIn h3{
|
||||
font-size:0.08rem;
|
||||
color:#fff;
|
||||
margin-bottom:0.05rem;
|
||||
}
|
||||
|
||||
.leftMain_top ul li .liIn .shu{
|
||||
font-size:0.12rem;
|
||||
color:rgba(14,253,255,1);
|
||||
font-family:dig;
|
||||
margin-bottom:0.02rem;}
|
||||
.leftMain_top ul li .liIn .shu i{
|
||||
font-size:0.04rem;
|
||||
margin-left:0.06rem;
|
||||
font-style:normal;}
|
||||
.leftMain_top ul li .liIn .zi{
|
||||
font-size:0.04rem;
|
||||
color:#fff;
|
||||
position:relative;
|
||||
z-index:10;}
|
||||
.leftMain_top ul li .liIn .zi .span1{
|
||||
margin-right:0.1rem;}
|
||||
|
||||
|
||||
.leftMain_middle{
|
||||
width:100%;
|
||||
padding-bottom:0.1rem;
|
||||
display:flex;
|
||||
display: -webkit-flex;}
|
||||
|
||||
.leftMain_middle .leftMain_middle_left{
|
||||
width:60%;
|
||||
padding-right:0.1rem;}
|
||||
.leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn{
|
||||
border:0.008rem solid rgba(14,253,255,0.5);
|
||||
width:100%;
|
||||
min-height:60px;
|
||||
position:relative;
|
||||
padding:0.08rem 0.05rem;
|
||||
}
|
||||
.leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn h3{
|
||||
font-size:0.08rem;
|
||||
color:#fff;
|
||||
margin-bottom:0.05rem;
|
||||
}
|
||||
.leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn .biaoge{
|
||||
min-height:200px;}
|
||||
|
||||
.leftMain_middle .leftMain_middle_right{
|
||||
width:40%;
|
||||
}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn{
|
||||
border:0.008rem solid rgba(14,253,255,0.5);
|
||||
width:100%;
|
||||
min-height:60px;
|
||||
position:relative;
|
||||
padding:0.08rem 0.05rem;
|
||||
}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn h3{
|
||||
font-size:0.08rem;
|
||||
color:#fff;
|
||||
margin-bottom:0.05rem;
|
||||
}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge{
|
||||
min-height:200px;}
|
||||
/*左边中间部分排行榜*/
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai{
|
||||
width:100%;
|
||||
overflow:hidden;
|
||||
}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn{
|
||||
display:flex;
|
||||
display: -webkit-flex;
|
||||
align-items:center;
|
||||
color:#fff;
|
||||
font-size:0.06rem;
|
||||
height:0.18rem;
|
||||
}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left{
|
||||
width:25%;
|
||||
position:relative;
|
||||
padding-left:0.14rem;
|
||||
}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left .bot{
|
||||
width:0.08rem;
|
||||
height:0.08rem;
|
||||
background:#f78cf3;
|
||||
border-radius:1000px;
|
||||
display:block;
|
||||
position:absolute;
|
||||
left:0.02rem;
|
||||
top:0;
|
||||
bottom:0;
|
||||
margin:auto 0;
|
||||
}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn2 .liIn_left .bot{
|
||||
background:#e7feb8;}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn3 .liIn_left .bot{
|
||||
background:#fdea8a;}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn4 .liIn_left .bot{
|
||||
background:#8ff9f8;}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn5 .liIn_left .bot{
|
||||
background:#d890fa;}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn6 .liIn_left .bot{
|
||||
background:#05d1fc;}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left zi{
|
||||
}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line{
|
||||
width:58%;
|
||||
height:0.08rem;
|
||||
background:rgba(255,255,255,0.5);
|
||||
border-radius:2000px;}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line .line_lineIn{
|
||||
width:100%;
|
||||
height:0.08rem;
|
||||
background:#f78cf3;
|
||||
border-radius:100px;
|
||||
-webkit-animation: widthMove1 2s ease-in-out ;}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn2 .liIn_line .line_lineIn{
|
||||
background:#e7feb8;
|
||||
-webkit-animation: widthMove2 2s ease-in-out ;}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn3 .liIn_line .line_lineIn{
|
||||
background:#fdea8a;
|
||||
-webkit-animation: widthMove3 2s ease-in-out ;
|
||||
}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn4 .liIn_line .line_lineIn{
|
||||
background:#8ff9f8;
|
||||
-webkit-animation: widthMove4 2s ease-in-out ;}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn5 .liIn_line .line_lineIn{
|
||||
background:#d890fa;
|
||||
-webkit-animation: widthMove5 2s ease-in-out ;}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn6 .liIn_line .line_lineIn{
|
||||
background:#05d1fc;
|
||||
-webkit-animation: widthMove6 2s ease-in-out ;}
|
||||
@-webkit-keyframes widthMove1 {
|
||||
0% {width:0%; }
|
||||
100% { width:98.5%; }
|
||||
}
|
||||
@-webkit-keyframes widthMove2 {
|
||||
0% {width:0%; }
|
||||
100% { width:88.5%; }
|
||||
}
|
||||
@-webkit-keyframes widthMove3 {
|
||||
0% {width:0%; }
|
||||
100% { width:68.5%; }
|
||||
}
|
||||
@-webkit-keyframes widthMove4 {
|
||||
0% {width:0%; }
|
||||
100% { width:40.5%; }
|
||||
}
|
||||
@-webkit-keyframes widthMove5 {
|
||||
0% {width:0%; }
|
||||
100% { width:22.5%; }
|
||||
}
|
||||
@-webkit-keyframes widthMove6 {
|
||||
0% {width:0%; }
|
||||
100% { width:10.5%; }
|
||||
}
|
||||
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .num{
|
||||
width:17%;
|
||||
font-family:dig;
|
||||
padding-left:0.02rem;}
|
||||
/*左边底部*/
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul{
|
||||
display:flex;
|
||||
display: -webkit-flex;
|
||||
flex-wrap:wrap;
|
||||
width:100%;
|
||||
}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li{
|
||||
width:33.3%;
|
||||
text-align:center;
|
||||
margin-bottom:0.05rem;}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li .shu{
|
||||
font-size:0.14rem;
|
||||
color:rgba(14,253,255,1);
|
||||
font-family:dig;
|
||||
padding:0.12rem 0 0.02rem;
|
||||
font-weight:normal;}
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li .zi{
|
||||
font-size:0.06rem;
|
||||
color:#fff;}
|
||||
/*右边部分*/
|
||||
.rightMain .rightMain_top{
|
||||
width:100%;
|
||||
padding-bottom:0.1rem;
|
||||
}
|
||||
.rightMain .rightMain_topIn{
|
||||
border:0.008rem solid rgba(14,253,255,0.5);
|
||||
width:100%;
|
||||
min-height:60px;
|
||||
position:relative;
|
||||
padding:0.08rem 0.05rem;
|
||||
}
|
||||
.rightMain .rightMain_topIn h3{
|
||||
font-size:0.08rem;
|
||||
color:#fff;
|
||||
margin-bottom:0.05rem;
|
||||
}
|
||||
.rightMain .rightMain_topIn .biaoge{
|
||||
min-height:200px;}
|
||||
|
||||
.rightMain .rightMain_bottom{
|
||||
width:100%;
|
||||
}
|
||||
.rightMain .rightMain_bottomIn{
|
||||
border:0.008rem solid rgba(14,253,255,0.5);
|
||||
width:100%;
|
||||
min-height:60px;
|
||||
position:relative;
|
||||
padding:0.08rem 0.05rem;
|
||||
}
|
||||
.rightMain .rightMain_bottomIn h3{
|
||||
font-size:0.08rem;
|
||||
color:#fff;
|
||||
margin-bottom:0.05rem;
|
||||
}
|
||||
/*右下角表格*/
|
||||
.rightMain .rightMain_bottomIn .biaoge{
|
||||
min-height:200px;}
|
||||
.rightMain .rightMain_bottomIn .biaoge_list{
|
||||
overflow:hidden;
|
||||
position: relative;}
|
||||
.rightMain .rightMain_bottomIn .biaoge_list .biaoge_listIn .ul_list{
|
||||
overflow:hidden;
|
||||
position: relative;}
|
||||
.rightMain .rightMain_bottomIn .biaoge_list .biaoge_listIn .ul_listIn{
|
||||
-webkit-animation: 14s gundong linear infinite normal;
|
||||
animation: 14s gundong linear infinite normal;
|
||||
position: relative;}
|
||||
@keyframes gundong {
|
||||
0% {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translate3d(0, -30vh, 0);
|
||||
transform: translate3d(0, -30vh, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.rightMain .rightMain_bottomIn .biaoge_list ul{
|
||||
display:flex;
|
||||
display: -webkit-flex;
|
||||
width:100%;
|
||||
}
|
||||
.rightMain .rightMain_bottomIn .biaoge_list .ul_title{
|
||||
background: linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
|
||||
background: -ms-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
|
||||
background: -webkit-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
|
||||
background: -moz-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
|
||||
}
|
||||
.rightMain .rightMain_bottomIn .biaoge_list .ul_con{
|
||||
border-bottom:0.008rem solid rgba(14,253,255,0.5);}
|
||||
.rightMain .rightMain_bottomIn .biaoge_list ul li{
|
||||
width:20%;
|
||||
text-align:center;
|
||||
color:#fff;
|
||||
font-size:0.06rem;
|
||||
height:0.2rem;
|
||||
line-height:0.2rem;}
|
||||
.rightMain .rightMain_bottomIn .biaoge_list ul li:frist-child{
|
||||
text-align:left;}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 255 KiB |
|
After Width: | Height: | Size: 1006 B |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
@ -0,0 +1,275 @@
|
||||
/*
|
||||
*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
export * from './src/echarts';
|
||||
export * from './src/export';
|
||||
|
||||
import './src/component/dataset';
|
||||
|
||||
|
||||
|
||||
// ----------------------------------------------
|
||||
// All of the modules that are allowed to be
|
||||
// imported are listed below.
|
||||
//
|
||||
// Users MUST NOT import other modules that are
|
||||
// not included in this list.
|
||||
// ----------------------------------------------
|
||||
|
||||
|
||||
|
||||
// ----------------
|
||||
// Charts (series)
|
||||
// ----------------
|
||||
|
||||
|
||||
|
||||
// All of the series types, for example:
|
||||
// chart.setOption({
|
||||
// series: [{
|
||||
// type: 'line' // or 'bar', 'pie', ...
|
||||
// }]
|
||||
// });
|
||||
|
||||
import './src/chart/bar';
|
||||
import './src/chart/boxplot';
|
||||
import './src/chart/candlestick';
|
||||
import './src/chart/custom';
|
||||
import './src/chart/effectScatter';
|
||||
import './src/chart/funnel';
|
||||
import './src/chart/gauge';
|
||||
import './src/chart/graph';
|
||||
import './src/chart/heatmap';
|
||||
import './src/chart/line';
|
||||
import './src/chart/lines';
|
||||
import './src/chart/map';
|
||||
import './src/chart/parallel';
|
||||
import './src/chart/pictorialBar';
|
||||
import './src/chart/pie';
|
||||
import './src/chart/radar';
|
||||
import './src/chart/sankey';
|
||||
import './src/chart/scatter';
|
||||
import './src/chart/sunburst';
|
||||
import './src/chart/themeRiver';
|
||||
import './src/chart/tree';
|
||||
import './src/chart/treemap';
|
||||
|
||||
|
||||
|
||||
// -------------------
|
||||
// Coordinate systems
|
||||
// -------------------
|
||||
|
||||
|
||||
|
||||
// All of the axis modules have been included in the
|
||||
// coordinate system module below, do not need to
|
||||
// make extra import.
|
||||
|
||||
// `cartesian` coordinate system. For some historical
|
||||
// reasons, it is named as grid, for example:
|
||||
// chart.setOption({
|
||||
// grid: {...},
|
||||
// xAxis: {...},
|
||||
// yAxis: {...},
|
||||
// series: [{...}]
|
||||
// });
|
||||
import './src/component/grid';
|
||||
|
||||
// `polar` coordinate system, for example:
|
||||
// chart.setOption({
|
||||
// polar: {...},
|
||||
// radiusAxis: {...},
|
||||
// angleAxis: {...},
|
||||
// series: [{
|
||||
// coordinateSystem: 'polar'
|
||||
// }]
|
||||
// });
|
||||
import './src/component/polar';
|
||||
|
||||
// `geo` coordinate system, for example:
|
||||
// chart.setOption({
|
||||
// geo: {...},
|
||||
// series: [{
|
||||
// coordinateSystem: 'geo'
|
||||
// }]
|
||||
// });
|
||||
import './src/component/geo';
|
||||
|
||||
// `singleAxis` coordinate system (notice, it is a coordinate system
|
||||
// with only one axis, work for chart like theme river), for example:
|
||||
// chart.setOption({
|
||||
// singleAxis: {...}
|
||||
// series: [{type: 'themeRiver', ...}]
|
||||
// });
|
||||
import './src/component/singleAxis';
|
||||
|
||||
// `parallel` coordinate system, only work for parallel series, for example:
|
||||
// chart.setOption({
|
||||
// parallel: {...},
|
||||
// parallelAxis: [{...}, ...],
|
||||
// series: [{
|
||||
// type: 'parallel'
|
||||
// }]
|
||||
// });
|
||||
import './src/component/parallel';
|
||||
|
||||
// `calendar` coordinate system. for example,
|
||||
// chart.setOptionp({
|
||||
// calendar: {...},
|
||||
// series: [{
|
||||
// coordinateSystem: 'calendar'
|
||||
// }]
|
||||
// );
|
||||
import './src/component/calendar';
|
||||
|
||||
|
||||
|
||||
// ------------------
|
||||
// Other components
|
||||
// ------------------
|
||||
|
||||
|
||||
|
||||
// `graphic` component, for example:
|
||||
// chart.setOption({
|
||||
// graphic: {...}
|
||||
// });
|
||||
import './src/component/graphic';
|
||||
|
||||
// `toolbox` component, for example:
|
||||
// chart.setOption({
|
||||
// toolbox: {...}
|
||||
// });
|
||||
import './src/component/toolbox';
|
||||
|
||||
// `tooltip` component, for example:
|
||||
// chart.setOption({
|
||||
// tooltip: {...}
|
||||
// });
|
||||
import './src/component/tooltip';
|
||||
|
||||
// `axisPointer` component, for example:
|
||||
// chart.setOption({
|
||||
// tooltip: {axisPointer: {...}, ...}
|
||||
// });
|
||||
// Or
|
||||
// chart.setOption({
|
||||
// axisPointer: {...}
|
||||
// });
|
||||
import './src/component/axisPointer';
|
||||
|
||||
// `brush` component, for example:
|
||||
// chart.setOption({
|
||||
// brush: {...}
|
||||
// });
|
||||
// Or
|
||||
// chart.setOption({
|
||||
// tooltip: {feature: {brush: {...}}
|
||||
// })
|
||||
import './src/component/brush';
|
||||
|
||||
// `title` component, for example:
|
||||
// chart.setOption({
|
||||
// title: {...}
|
||||
// });
|
||||
import './src/component/title';
|
||||
|
||||
// `timeline` component, for example:
|
||||
// chart.setOption({
|
||||
// timeline: {...}
|
||||
// });
|
||||
import './src/component/timeline';
|
||||
|
||||
// `markPoint` component, for example:
|
||||
// chart.setOption({
|
||||
// series: [{markPoint: {...}}]
|
||||
// });
|
||||
import './src/component/markPoint';
|
||||
|
||||
// `markLine` component, for example:
|
||||
// chart.setOption({
|
||||
// series: [{markLine: {...}}]
|
||||
// });
|
||||
import './src/component/markLine';
|
||||
|
||||
// `markArea` component, for example:
|
||||
// chart.setOption({
|
||||
// series: [{markArea: {...}}]
|
||||
// });
|
||||
import './src/component/markArea';
|
||||
|
||||
// `legend` component scrollable, for example:
|
||||
// chart.setOption({
|
||||
// legend: {type: 'scroll'}
|
||||
// });
|
||||
import './src/component/legendScroll';
|
||||
|
||||
// `legend` component not scrollable. for example:
|
||||
// chart.setOption({
|
||||
// legend: {...}
|
||||
// });
|
||||
import './src/component/legend';
|
||||
|
||||
// `dataZoom` component including both `dataZoomInside` and `dataZoomSlider`.
|
||||
import './src/component/dataZoom';
|
||||
|
||||
// `dataZoom` component providing drag, pinch, wheel behaviors
|
||||
// inside coodinate system, for example:
|
||||
// chart.setOption({
|
||||
// dataZoom: {type: 'inside'}
|
||||
// });
|
||||
import './src/component/dataZoomInside';
|
||||
|
||||
// `dataZoom` component providing a slider bar, for example:
|
||||
// chart.setOption({
|
||||
// dataZoom: {type: 'slider'}
|
||||
// });
|
||||
import './src/component/dataZoomSlider';
|
||||
|
||||
// `dataZoom` component including both `visualMapContinuous` and `visualMapPiecewise`.
|
||||
import './src/component/visualMap';
|
||||
|
||||
// `visualMap` component providing continuous bar, for example:
|
||||
// chart.setOption({
|
||||
// visualMap: {type: 'continuous'}
|
||||
// });
|
||||
import './src/component/visualMapContinuous';
|
||||
|
||||
// `visualMap` component providing pieces bar, for example:
|
||||
// chart.setOption({
|
||||
// visualMap: {type: 'piecewise'}
|
||||
// });
|
||||
import './src/component/visualMapPiecewise';
|
||||
|
||||
|
||||
|
||||
// -----------------
|
||||
// Render engines
|
||||
// -----------------
|
||||
|
||||
|
||||
|
||||
// Provide IE 6,7,8 compatibility.
|
||||
import 'zrender/src/vml/vml';
|
||||
|
||||
// Render via SVG rather than canvas.
|
||||
import 'zrender/src/svg/svg';
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,84 @@
|
||||
/*!
|
||||
* jquery.numscroll.js -- 数字滚动累加动画插件 (Digital rolling cumulative animation)
|
||||
* version 1.0.0
|
||||
* 2018-09-22
|
||||
* author: KevinTseng < 921435247@qq.com@qq.com >
|
||||
* 文档: https://github.com/chaorenzeng/jquery.numscroll.js.git
|
||||
* QQ交流群: 739574382
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
|
||||
function isInt(num) {
|
||||
//作用:是否为整数
|
||||
//返回:true是 false否
|
||||
var res = false;
|
||||
try {
|
||||
if(String(num).indexOf(".") == -1 && String(num).indexOf(",") == -1) {
|
||||
res = parseInt(num) % 1 === 0 ? true : false;
|
||||
}
|
||||
} catch(e) {
|
||||
res = false;
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
function isFloat(num) {
|
||||
//作用:是否为小数
|
||||
//返回:小数位数(-1不是小数)
|
||||
var res = -1;
|
||||
try {
|
||||
if(String(num).indexOf(".") != -1) {
|
||||
var index = String(num).indexOf(".") + 1; //获取小数点的位置
|
||||
var count = String(num).length - index; //获取小数点后的个数
|
||||
if(index > 0) {
|
||||
res = count;
|
||||
}
|
||||
}
|
||||
} catch(e) {
|
||||
res = -1;
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
$.fn.numScroll = function(options) {
|
||||
|
||||
var settings = $.extend({
|
||||
'time': 1500,
|
||||
'delay': 0
|
||||
}, options);
|
||||
|
||||
return this.each(function() {
|
||||
var $this = $(this);
|
||||
var $settings = settings;
|
||||
|
||||
var num = $this.attr("data-num") || $this.text(); //实际值
|
||||
var temp = 0; //初始值
|
||||
$this.text(temp);
|
||||
var numIsInt = isInt(num);
|
||||
var numIsFloat = isFloat(num);
|
||||
var step = (num / $settings.time) * 10; //步长
|
||||
|
||||
setTimeout(function() {
|
||||
var numScroll = setInterval(function() {
|
||||
if(numIsInt) {
|
||||
$this.text(Math.floor(temp));
|
||||
} else if(numIsFloat != -1) {
|
||||
$this.text(temp.toFixed(numIsFloat));
|
||||
} else {
|
||||
$this.text(num);
|
||||
clearInterval(numScroll);
|
||||
return;
|
||||
}
|
||||
temp += step;
|
||||
if(temp > num) {
|
||||
$this.text(num);
|
||||
clearInterval(numScroll);
|
||||
}
|
||||
}, 1);
|
||||
}, $settings.delay);
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
@ -0,0 +1,202 @@
|
||||
<html>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<head>
|
||||
<title>模态框示例</title>
|
||||
<style>
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: 2.5% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
}
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.table-container {
|
||||
margin: auto;
|
||||
width: 80%;
|
||||
max-width: 600px; /* 根据需要调整表格的最大宽度 */
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="myModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<div>
|
||||
<canvas id="myChart"></canvas>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<caption>响应时间统计</caption>
|
||||
<tr>
|
||||
<th>统计指标</th>
|
||||
<th>值</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>最大响应时间</td>
|
||||
<td id="maxResponseTime">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>最小响应时间</td>
|
||||
<td id="minResponseTime">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>平均响应时间</td>
|
||||
<td id="averageResponseTime">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>错误率</td>
|
||||
<td id="errorRate">-</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
// 获取按钮和模态框元素
|
||||
var btn = document.getElementById('openModalBtn');
|
||||
var modal = document.getElementById('myModal');
|
||||
var span = document.getElementsByClassName("close")[0];
|
||||
// 为按钮添加点击事件以打开模态框
|
||||
modal.style.display = "block";
|
||||
|
||||
// 为关闭按钮添加点击事件以关闭模态框
|
||||
span.onclick = function() {
|
||||
modal.style.display = "none";
|
||||
window.history.go(-1); //返回上一页
|
||||
}
|
||||
|
||||
// 在用户点击模态框外部时关闭模态框
|
||||
// window.onclick = function(event) {
|
||||
// if (event.target == modal) {
|
||||
// modal.style.display = "none";
|
||||
// window.history.go(-1); //返回上一页
|
||||
// }
|
||||
// }
|
||||
//var receiveData={[{"time":"2021.2.19", "responsetime": 10},{"time":"2021.3.19", "responsetime": 10}]};
|
||||
var receiveData={"servername":"127.0.0.1","DisabledRate": 0.5,
|
||||
"ResponseTimeArray": [111,110,110,111,111,111],
|
||||
"Time":["2021.3.19","2021.3.20","2021.3.21","2021.3.22","2021.3.22","2021.3.23"]}
|
||||
var jsonData = {
|
||||
"labels": receiveData.Time,
|
||||
"data": [
|
||||
{
|
||||
"label": "响应时间",
|
||||
"data": receiveData.ResponseTimeArray
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
// 获取Canvas元素
|
||||
window.onload=function(){
|
||||
var ctx = document.getElementById('myChart').getContext('2d');
|
||||
|
||||
// 创建折线图
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line', // 图表类型
|
||||
data: {
|
||||
labels:jsonData.labels,
|
||||
datasets:[{
|
||||
label:jsonData.data[0].label,
|
||||
data:jsonData.data[0].data,
|
||||
backgroundColor: 'rgba(255, 99, 132, 0.2)', // 数据集的背景颜色
|
||||
borderColor: 'rgba(255, 99, 132, 1)', // 数据集的边框颜色
|
||||
borderWidth: 1 // 边框宽度
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: false // Y轴是否从0开始
|
||||
}
|
||||
},
|
||||
responsive: true, // 响应式图表
|
||||
maintainAspectRatio: true // 保持宽高比
|
||||
}
|
||||
});
|
||||
};
|
||||
// 可以添加一个函数来更新图表数据
|
||||
function updateChartData(newData) {
|
||||
myChart.data.datasets.forEach((dataset, index) => {
|
||||
myChart.data.labels = newData.labels;
|
||||
myChart.data.datasets[index].data = newData.data[index].data;
|
||||
});
|
||||
myChart.update();
|
||||
}
|
||||
function calculateResponseTimeStats(data) {
|
||||
const times = data.map(set => set.data);
|
||||
const flattenedTimes = times.flat();
|
||||
const maxTime = Math.max(...flattenedTimes);
|
||||
const minTime = Math.min(...flattenedTimes);
|
||||
const sumTime = flattenedTimes.reduce((acc, curr) => acc + curr, 0);
|
||||
const averageTime = sumTime / flattenedTimes.length;
|
||||
|
||||
return {
|
||||
max: maxTime,
|
||||
min: minTime,
|
||||
average: averageTime
|
||||
};
|
||||
}
|
||||
|
||||
// 更新表格中的统计数据
|
||||
function updateStatsTable(stats,data) {
|
||||
document.getElementById('maxResponseTime').textContent = stats.max;
|
||||
document.getElementById('minResponseTime').textContent = stats.min;
|
||||
document.getElementById('averageResponseTime').textContent = stats.average.toFixed(2);
|
||||
document.getElementById('errorRate').textContent=data.DisabledRate;
|
||||
}
|
||||
|
||||
// 使用jsonData中的数据更新统计表
|
||||
const stats = calculateResponseTimeStats(jsonData.data);
|
||||
updateStatsTable(stats,receiveData);
|
||||
|
||||
// 模拟数据更新
|
||||
setInterval(() => {
|
||||
// 这里应该根据实际逻辑获取新数据
|
||||
var newData = {
|
||||
labels: jsonData.labels,
|
||||
data: [
|
||||
// 这里添加新数据点或更新现有数据点
|
||||
]
|
||||
};
|
||||
updateChartData(newData);
|
||||
}, 1000);
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in new issue