* stash modify
This commit is contained in:
@@ -83,72 +83,22 @@ section.active {border: 1px solid rgb(0, 166, 255);}
|
|||||||
.dataYearStat .canvas.left {width: 450px;}
|
.dataYearStat .canvas.left {width: 450px;}
|
||||||
.dataYearStat .canvas.right {width: 810px; float: right;}
|
.dataYearStat .canvas.right {width: 810px; float: right;}
|
||||||
|
|
||||||
#timeline {
|
#stopPlaying {font-size: 18px; position: absolute; left: 0; top: 8px;
|
||||||
display: inline-block;
|
|
||||||
width: 310px;
|
|
||||||
padding-top: 20px;
|
|
||||||
list-style: none;
|
|
||||||
text-align: center;
|
|
||||||
margin-left: 25px;
|
|
||||||
}
|
|
||||||
.scroll-shell {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
#stopPlaying {
|
|
||||||
font-size: 18px;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#timeline li {
|
#timeline li {display: inline-block; cursor: pointer; color: #444; padding: 0 5px; margin: 0; position: relative;
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #444;
|
|
||||||
padding: 0 5px;
|
|
||||||
margin: 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#timeline li::before{ content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 4px; background: #fff; position: absolute; left: 20px; top: -8px; z-index: 2;
|
||||||
#timeline li::before{
|
|
||||||
content: '';
|
|
||||||
display: inline-block;
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: #fff;
|
|
||||||
position: absolute;
|
|
||||||
left: 20px;
|
|
||||||
top: -8px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
}
|
||||||
#timeline li::after{content: ''; display: block; width: 100%; height: 2px; border-radius: 1px; background: #fff; position: absolute; left: -20px; top: -5px;}
|
#timeline li::after{content: ''; display: block; width: 100%; height: 2px; border-radius: 1px; background: #fff; position: absolute; left: -20px; top: -5px;}
|
||||||
|
|
||||||
.class1 {
|
.class1 {background-size: 60px 24px;}
|
||||||
background-size: 60px 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#timeline .selecteded {
|
#timeline .selecteded {color: #1a77a5;}
|
||||||
color: #1a77a5;
|
#timeline .selecteded::before {background: #1a77a5;}
|
||||||
/* background: url('img/tuoyuan2.png') 0 15px no-repeat;
|
|
||||||
background-size: 20px 20px; */
|
|
||||||
}
|
|
||||||
#timeline .selecteded::before {
|
|
||||||
background: #1a77a5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-shell {
|
.scroll-shell { width: 330px; height: 96%; margin-top: 1.5%; overflow: hidden; position: relative;
|
||||||
width: 100px;
|
|
||||||
height: 96%;
|
|
||||||
margin-top: 1.5%;
|
|
||||||
float: left;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
.scroll-shell {width: 330px;}
|
#timeline { padding-top: 20px; list-style: none; text-align: center; margin-left: 25px; width: 310px; height: 89%; overflow: auto; overflow-x: hidden;
|
||||||
.scroll {
|
|
||||||
width: 330px;
|
|
||||||
height: 103%;
|
|
||||||
overflow: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
}
|
||||||
@@ -52,7 +52,6 @@ function drawStatusPieChart(id, title, data, callback)
|
|||||||
itemHeight: legendItemHeight,
|
itemHeight: legendItemHeight,
|
||||||
textStyle: legendTextStyle,
|
textStyle: legendTextStyle,
|
||||||
},
|
},
|
||||||
saveAsImage: {},
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: title,
|
name: title,
|
||||||
@@ -187,7 +186,6 @@ function exportAnnualImage(sucessCallback, errorCallback)
|
|||||||
if(sucessCallback) sucessCallback(imageUrl);
|
if(sucessCallback) sucessCallback(imageUrl);
|
||||||
afterFinish(canvas);
|
afterFinish(canvas);
|
||||||
});
|
});
|
||||||
console.log(imageUrl);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -5,7 +5,8 @@
|
|||||||
<?php $annualDataLang = $lang->report->annualData;?>
|
<?php $annualDataLang = $lang->report->annualData;?>
|
||||||
<?php $annualDataConfig = $config->report->annualData;?>
|
<?php $annualDataConfig = $config->report->annualData;?>
|
||||||
<?php $soFar = sprintf($annualDataLang->soFar, $year);?>
|
<?php $soFar = sprintf($annualDataLang->soFar, $year);?>
|
||||||
<?php js::set('totalYears', (array)($years)); ?>
|
<?php js::set('totalYears', (array)$years); ?>
|
||||||
|
<?php js::set('contributionGroups', $contributionGroups); ?>
|
||||||
<div id='container' style='background-image: url(<?php echo $config->webRoot . 'theme/default/images/main/annual_data_bg.png'?>)'>
|
<div id='container' style='background-image: url(<?php echo $config->webRoot . 'theme/default/images/main/annual_data_bg.png'?>)'>
|
||||||
<main id='main' style='background: url(<?php echo $config->webRoot . 'theme/default/images/main/annual_layout_header.png'?>) top no-repeat'>
|
<main id='main' style='background: url(<?php echo $config->webRoot . 'theme/default/images/main/annual_layout_header.png'?>) top no-repeat'>
|
||||||
<header id='header'>
|
<header id='header'>
|
||||||
@@ -122,7 +123,8 @@
|
|||||||
<section id='radar'>
|
<section id='radar'>
|
||||||
<header><h2 class='text-holder'><?php echo $annualDataLang->radar . $soFar;?></h2></header>
|
<header><h2 class='text-holder'><?php echo $annualDataLang->radar . $soFar;?></h2></header>
|
||||||
<div id='radarCanvas' style="display: none;"></div>
|
<div id='radarCanvas' style="display: none;"></div>
|
||||||
<canvas id="canvas" width="330" height="280" style="margin-top:-30px"></canvas>
|
<canvas id="canvas" width="330" height="280" style="margin-top:-30px;"></canvas>
|
||||||
|
<!-- <img src="blob:http://wzm.oop.cc/4390c26b-15b8-4a97-b509-f1f0b11d4d71" alt=""> -->
|
||||||
<div class="scroll-shell">
|
<div class="scroll-shell">
|
||||||
<i class="icon icon-play" id="stopPlaying"></i>
|
<i class="icon icon-play" id="stopPlaying"></i>
|
||||||
<ul id="timeline" ref="timeline" onclick="timeline($event)" class="scroll"></ul>
|
<ul id="timeline" ref="timeline" onclick="timeline($event)" class="scroll"></ul>
|
||||||
@@ -243,6 +245,7 @@
|
|||||||
<script>
|
<script>
|
||||||
$(function()
|
$(function()
|
||||||
{
|
{
|
||||||
|
console.log(contributionGroups);
|
||||||
var radarChart = echarts.init(document.getElementById('radarCanvas'));
|
var radarChart = echarts.init(document.getElementById('radarCanvas'));
|
||||||
var radarOption = {
|
var radarOption = {
|
||||||
tooltip: {},
|
tooltip: {},
|
||||||
@@ -270,10 +273,10 @@ $(function()
|
|||||||
data: [{value: <?php echo json_encode(array_values($radarData));?>}]
|
data: [{value: <?php echo json_encode(array_values($radarData));?>}]
|
||||||
}]
|
}]
|
||||||
};
|
};
|
||||||
console.log(totalYears);
|
console.log(' <?php echo json_encode(array_values($radarData));?>');
|
||||||
|
|
||||||
radarChart && radarChart.setOption(radarOption);
|
|
||||||
|
|
||||||
|
radarChart.setOption(radarOption);
|
||||||
|
|
||||||
function exportImg ()
|
function exportImg ()
|
||||||
{
|
{
|
||||||
var radarCanvasArr = echarts.getInstanceByDom(document.getElementById('radarCanvas'));
|
var radarCanvasArr = echarts.getInstanceByDom(document.getElementById('radarCanvas'));
|
||||||
@@ -340,17 +343,16 @@ $(function()
|
|||||||
|
|
||||||
};
|
};
|
||||||
animationCanvas();
|
animationCanvas();
|
||||||
var years = [];
|
// var years = [];
|
||||||
for(var key in totalYears){
|
// for(var key in totalYears){
|
||||||
years.push(totalYears[key]);
|
// years.push(totalYears[key]);
|
||||||
}
|
// }
|
||||||
var radarCanvasDom = document.getElementById('radarCanvas');
|
// var radarCanvasDom = document.getElementById('radarCanvas');
|
||||||
if(years.length > 1) {
|
// if(years.length > 1) {
|
||||||
radarCanvasDom.style.display = 'none';
|
// radarCanvasDom.style.display = 'none';
|
||||||
}
|
// }
|
||||||
|
|
||||||
|
var years = [2016, 2017, 2018, 2019, 2020, 2021, 2022]
|
||||||
// var years = [2016, 2017, 2018, 2019, 2020, 2021, 2022]
|
|
||||||
var index = 0
|
var index = 0
|
||||||
var timer=null
|
var timer=null
|
||||||
//创建时间轴对应的li
|
//创建时间轴对应的li
|
||||||
|
|||||||
Reference in New Issue
Block a user