<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta content="yes" name="mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>印象之旅2019年底大红包</title>
<link rel="stylesheet" href="../css/animate.css">
<link rel="stylesheet" href="../css/cssReset.css">
<script type="text/javascript" src="../js/autosize2.js"></script>
<link rel="stylesheet" href="../css/huikui.css?v='122222'">
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js"></script>
</head>
<body>
<div class="wrap" id="wrap">
<div class="fan fan-up animated bounceInDown" id="fan-up">
<img src="../images/huikui/arr2.png" alt="">
</div>
<div class="wrap2" id="wrap2">
<div class="page page1" id="page1">
<div class="tit animated fadeInLeft">
<img src="../images/huikui/page1_tit.png" alt="">
</div>
<div class="content">
<p><span class="red" id="year"></span>年<span class="red" id="month"></span>月<span class="red" id="day"></span>日</p>
<p>成为印象同行</p>
<div>
<p>由销售经理<span id="CreateBy" class="red"></span>录入</p>
<p>您的资料</p>
<p>正式成为印象会员同行</p>
</div>
</div>
<div class="rili-box">
<div>
<p class="rili-tit" id="rili-tit"></p>
<div class="rili clearfix" id="rili">
</div>
</div>
</div>
</div>
<div class="page page2" id="page2">
<div class="tit">
<img src="../images/huikui/page2_tit.png" alt="">
</div>
<div class="content">
<p><span class="red year"></span>年里</p>
<p>销售经理上门拜访您<span class="num font-c04-s3"></span>次</p>
<div class="margint-20">
我们十分的愿意
<br>
倾听您的声音
</div>
</div>
<div class="bottom-box">
<p class="baifangjihua">
拜访
<br>
计划
</p>
<img class="page2_ren" src="../images/huikui/page2_ren.png" alt="">
<img class="page2_tanzi" src="../images/huikui/page2_tanzi.png" alt="">
</div>
</div>
<div class="page page3" id="page3">
<div class="tit">
<img src="../images/huikui/page3_tit.png" alt="">
</div>
<div class="content dingdany">
<p><span class="red" id="year"></span>年<span class="red" id="month"></span>月<span class="red" id="day"></span>日 <span class="red" id="time"></span>分</p>
<p>我们收到了您的第<span class="num3 font-c04-s3">1</span>单</p>
<div class="margint-20">
<p>怀着无比激动与感恩的心</p>
</div>
</div>
<div class="content dingdann">
<p>我们暂未收到您的订单</p>
<div class="margint-20">
<p>我们待着与您的合作</p>
</div>
</div>
<div class="page3_shiz" >
<img src="../images/huikui/page3_shiz.png" alt="">
</div>
</div>
<div class="page page4" id="page4">
<div class="tit">
<img src="../images/huikui/page4_tit.png" alt="">
</div>
<div class="content">
<p><span class="red year4"></span>年</p>
<p class="margint-20">您累计交客<span class="num3 font-c04-s3" id="renshu"></span>人</p>
<p class="margint-20">交易额累计<span class="num3 font-c04-s3" id="jiaoyie"></span>.<span class="num3 font-c04-s3" id="jiaoyie2"></span> 万</p>
<p class="margint-20">感恩您对印象之旅的大力支持与信任</p>
</div>
<div class="page4_shiz" >
<img src="../images/huikui/page4_shiz.png" alt="">
</div>
</div>
<div class="page page5" id="page5">
<div class="tit2">
<span id="fenshu"></span>分
</div>
<div class="content">
<p id="pingjiaY">这是您的客人对我们的总体评价</p>
<p id="pingjiaN">还未收到您的客人评价</p>
</div>
<div class="danmu" id="danmu">
</div>
<div class="page5_img">
<img src="../images/huikui/page5_img.png" alt="">
</div>
</div>
<div class="page page6" id="page6">
<div class="tit">
<img src="../images/huikui/page6_tit.png" alt="">
</div>
<div class="content">
<p><span class="red year6"></span>年，您的客户来自哪里</p>
</div>
<div class="line_box">
<div class="xianlu">
<div id="xianluEchart">
</div>
</div>
<div class="nianling">
<div id="nianlingEchart">
</div>
</div>
</div>
</div>
<div class="page page7" id="page7">
<div class="tit">
<img src="../images/huikui/page7_tit.png" alt="">
</div>
<div class="content">
<p>印象之旅 <span class="red" id="allYear">10</span> 年</p>
<p><span class="font-c04-s3" id="Country"></span> 个国家 <span class="font-c04-s3" id="City"></span> 座城市 <span class="font-c04-s3" id="Company"></span> 个分公司</p>
<p class="margint-20">我们的目标是走得更远<br>让我们的线路覆盖全球...</p>
</div>
<div class="page7_img margint-20">
<img src="../images/huikui/page7_map.png" alt="">
</div>
</div>
<div class="page page8" id="page8">
<div class="tit">
<img src="../images/huikui/page8_tit.png" alt="">
</div>
<div class="content">
<p><span class="red year8"></span> 年</p>
<p>已有同行<span class="font-c04-s3" id="allTH"></span>个</p>
<p class="margint-20">印象之旅感动与世界同步</p>
</div>
<div class="page8_img margint-20">
<img src="../images/huikui/page8_map.png" alt="">
</div>
</div>
<div class="page page9" id="page9">
<div class="tit">
<img src="../images/huikui/page9_tit.png" alt="">
</div>
<div class="content">
<p>年底<span class="red">大红包</span>来啦！</p>
<p>您目前已累计<span class="red">￥</span><span class="font-c04-s3" id="dahongbao"></span>元大红包</p>
</div>
<div class="page9_img">
<img onclick="goRed()" src="../images/huikui/page9_img.png" alt="">
</div>
<div class="shuoming" onclick="showTk(1)">
<div class="shuoming_box margint-20">
<p class="tit3 red">大红包活动及使用说明</p>
<div class="more">
<span>查看更多</span>
<img src="../images/huikui/more.png" alt="">
</div>
</div>
</div>
<div class="tanchuang" onclick="showTk(2)">
<img src="../images/huikui/close.png" alt="">
<div class="tiaokuan">
<p class="tit3 red">大红包活动及使用说明</p>
<p>为答谢广大同行在即将过去的2019年里对印象之旅的厚爱与支持，公司将在新的一年来临之际奉上年底大红包，活动具体说明如下：</p>
<p>1、2019年12月25日至2020年1月2日，同行可在印象之旅APP、小程序、H5站点查阅2019年度账单，并及时查阅预计红包金额。</p>
<p>2、2020年1月2日至2020年1月20日，用户进入活动页面后可以直接领取年底大红包，若用户逾期未领取，则视为主动放弃年底大红包。大红包的具体金额依据同行报名参加印象之旅2019年内的跟团游产品产生的实际交易额来计算。具体计算规则请参照：<span class="rule" onclick="goRule()">《印象之旅2019年底大红包规则》</span></p>
<p>3、大红包一旦领取成功，金额将自动转入用户的幸福存折中并且不能取现。</p>
<p>4、用户可以使用幸福存折的余额对跟团游，自由行，机票，签证，酒店等订单金额进行抵扣，每次最多能使用1000元，且账户余额必须保留9元。</p>
<p>5、幸福存折目前只能在印象相关的同业平台使用，包含同业网站（www.oytour.com）,同业APP（印象同业），同业小程序（行程助理）。</p>
<p>6、幸福存折可以和优惠券一起使用。</p>
<p>7、若为联盟客户，我们将会把大红包转入联盟的主体账户中。如需做红包拆分，请联系您的印象之旅销售客服专员。</p>
</div>
<p class="jieshi red">本活动最终解释权在法律允许范围内归本公司所有。</p>
</div>
</div>
<div class="page page9 page10" id="page10">
<div class="tit animated fadeInLeft">
<img src="../images/huikui/page9_tit.png" alt="">
</div>
<div class="content">
<p>印象之旅<span class="red">2020</span>年</p>
<p>年底<span class="red">大红包</span>玩法来了</p>
<p>殷殷之心,拳拳可见 </p>
<p>印象之旅感动与世界同步</p>
</div>
<!-- <div class="rule_box">
<div class="rule_box_tit">
<img src="../images/huikui/page10_xr.png" alt="">
<p class="red">大红包规则</p>
</div>
</div> -->
<div class="rule_box2">
<img src="../images/huikui/page10_rimg.png" alt="">
</div>
</div>
</div>
<div class="fan fan-down animated bounceInUp" id="fan-down">
<img src="../images/huikui/arr1.png" alt="">
</div>
</div>
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../js/jquery.animateNumber.js"></script>
<script type="text/javascript" src="../js/md5.js"></script>
<script type="text/javascript" src="../js/mian.js"></script>
<script type="text/javascript" src="../js/layer/layer.js"></script>
<script type="text/javascript" src="../js/barrageWall.js?v=10086"></script>
<script type="text/javascript">
var userInfo = {
customerId: 0,
token: "",
secretKey: "",
};
$(".tanchuang").hide()
if (!localStorage.onLogin) {
localStorage.billPage = null
}
var billPage = localStorage.billPage ? JSON.parse(localStorage.billPage) : ''
var newPageIndex = localStorage.newPageIndex ? localStorage.newPageIndex : 0,
maxPageIndex = 9;
// 1 判断地址栏是否有参数
if(window.location.href.split('?')[1]){
var param = window.location.href.split('?')[1].split("&") ? window.location.href.split('?')[1].split("&") : null;
userInfo.customerId = param ? param[0].split('=')[1] : 0;
userInfo.token = param ? param[2].split('=')[1] : 0;
userInfo.secretKey = param ? param[3].split('=')[1] : 0;
var userJson = JSON.stringify(userInfo);
localStorage.billPage = userJson;
} else if (billPage){ // 2 获取本地缓存
userInfo.customerId = billPage.customerId
userInfo.token = billPage.token
userInfo.secretKey = billPage.secretKey
} else { // 否则就去登录
window.location.href = 'login.html?page=billPage';
}
var str = location.href,
param = str.substr(str.indexOf("?")+1),
dataObj = {},
FirstOrderCreateStr = [],
TextContentList = [],
danmuIndex = 0;
param = param.split('&');
var customerId = param[0].split('=')[1];
var myChart1 = echarts.init(document.getElementById('xianluEchart'));
var myChart2 = echarts.init(document.getElementById('nianlingEchart'));
var option = {
container: "#danmu",//弹幕墙的id
barrageLen: 5//弹幕的行数
}
//初始化弹幕墙
barrageWall.init(option);
getData();
// 获取数据
function getData(){
// locationName.indexOf('oytour') !== -1 ? userInfo.customerId : 7989
var msg = {
customerId: userInfo.customerId,
}
$.ajax({
type: "POST",
url: `${getApiUrl().urlPost}`,
contentType: "application/json",
data: getAjaxData("app_get_GetPersonalBills", msg, userInfo.token, userInfo.secretKey),
async: false,
success: function(res) {
if (res.resultCode === 1) {
var CreateTime = res.data.CreateTime.split('-'),
year = CreateTime[0],
month = CreateTime[1],
day = CreateTime[2];
//最后一个参数为0,意为获取2018年10月一共多少天
var monthAllDay = new Date(year, month,0);
creatRili(day, monthAllDay.getDate());
dataObj = res.data;
localStorage.dataObj = JSON.stringify(dataObj);
$("#year").text(year);
$("#month").text(month);
$('#day').animateNumber({ number: day });
$("#CreateBy").text(res.data.CreateBy.split('（')[0])
$("#rili-tit").text( year + '年' + month + '月')
if (dataObj.yearTotalPrice > 0) {
$("#page9").show()
$("#page10").hide()
} else {
$("#page9").hide()
$("#page10").show()
}
if (dataObj.FirstOrderCreateStr == '') {
$(".dingdany").hide()
$(".dingdann").show()
} else {
FirstOrderCreateStr = res.data.FirstOrderCreateStr.replace(' ', '-').replace(':', '-').split('-');
$(".dingdany").show()
$(".dingdann").hide()
}
if (newPageIndex > 0) {
$("#page9 #dahongbao").animateNumber({ number: dataObj.yearTotalPrice}, 2000)
document.getElementById('wrap2').style.transform = 'translateY(' + (-(newPageIndex-1) * 10) + '%)'; //根据手指的位置移动页面
$("#fan-down").hide()
}
// 弹幕
var danmu=document.getElementById('danmu');
var winH=danmu.clientHeight;
if(dataObj.evaluateList.TextContentList && dataObj.evaluateList.TextContentList.length) {
TextContentList = dataObj.evaluateList.TextContentList
createDM()
}
//客户 & 线路
var LineOrder = {
LineName: [],
TotalGuest: []
}
if(dataObj.LineOrder && dataObj.LineOrder.length) {
dataObj.LineOrder.map(x=>{
LineOrder.LineName.push(x.LineName)
LineOrder.TotalGuest.push(x.TotalGuest)
})
creatEchart(LineOrder)
}
var ageData = {
LineName: ['老人', '成年人', '小孩'],
TotalGuest: [dataObj.OldGuest, dataObj.AdultGuest, dataObj.ChildrenGuest]
}
if ((dataObj.OldGuest + dataObj.AdultGuest + dataObj.ChildrenGuest) > 0) {
creatEchart2(ageData)
}
} else {
layer.msg(res.message)
setTimeout(function(){
window.location.href = 'login.html?page=billPage';
},500)
}
}
})
};
// 创建日历
function creatRili(day, maxDay) {
$(".rili-box>div").hide()
var htmlStr = ''
for(var i = 1; i <= maxDay; i++) {
if (i == day) {
htmlStr += '<div class="animated today_box"><div class="circleProgress_wrapper"><div class="wrapper right"><div class="circleProgress rightcircle"></div></div><div class="wrapper left"><div class="circleProgress leftcircle"></div></div></div><span class="today">'+ i +'</span></div>'
} else {
htmlStr += '<div class="animated"><span>'+ i +'</span></div>'
}
}
$("#rili").html(htmlStr)
riliAnimated()
}
// 日历动画
function riliAnimated(){
$("#rili div").each(function (index, ele) {
setTimeout(function (){
$(".rili-box>div").show()
$(ele).addClass('fadeIn')
}, 500)
})
}
$("#fan-up").hide()
// 初始化分页
var pages = function(obj) {
var box = document.getElementById(obj.wrap);
var box2 = document.getElementById(obj.wrap2);
var pageUp = document.getElementById('fan-up')
var pageDown = document.getElementById('fan-down')
var len = obj.len;
var n = obj.n;
var startY, moveY, cliH;
//获取屏幕高度
var getH = function() {
cliH = document.body.clientHeight
};
getH();
window.addEventListener('resize', getH, false);
//touchStart
var touchstart = function(event) {
if(!event.touches.length) {
return;
}
startY = event.touches[0].pageY;
moveY = 0;
};
//touchMove
var touchmove = function(event) {
if(!event.touches.length) {
return;
}
moveY = event.touches[0].pageY - startY;
box2.style.transform = 'translateY(' + (-n * cliH + moveY) + 'px)'; //根据手指的位置移动页面
};
//touchEnd
var touchend = function(event) {
if (n == 8) {
localStorage.newPageIndex = maxPageIndex
}
//位移小于+-50的不翻页
if(moveY < -50) n++;
if(moveY > 50) n--;
//最后&最前页控制
if(n < 0) n = 0;
if(n > len - 1) n = len - 1;
//重定位
box2.style.transform = 'translateY(' + (-n * 10) + '%)'; //根据百分比位置移动页面
// 翻页 加载页面动画
if (moveY < -50 || moveY > 50) {
$("#page" + (n+1) + ">div.tit").addClass('animated fadeInLeft')
$("#page" + (n+1) + " .year").text(dataObj.Year)
var number = dataObj.VisiteCount
if (number < 3) {
number = 3
}
$("#page" + (n+1) + " .num").animateNumber({ number: number }, 2000);
$("#page" + (n+1) + " .baifangjihua").addClass('animated fadeIn')
if (FirstOrderCreateStr.length) {
$("#page" + (n+1) + " #year").text(FirstOrderCreateStr[0])
$("#page" + (n+1) + " #month").text(FirstOrderCreateStr[1])
$("#page" + (n+1) + " #day").text(FirstOrderCreateStr[2])
$("#page" + (n+1) + " #time").text(FirstOrderCreateStr[3] + ':' + FirstOrderCreateStr[4])
}
if(dataObj.TotalGuest == '0') {
$("#page" + (n+1) + " #renshu").text('-');
} else {
$("#page" + (n+1) + " #renshu").animateNumber({ number: dataObj.TotalGuest }, 2000);
}
if(dataObj.TotalPrice == '0') {
$("#page" + (n+1) + " #jiaoyie").text('-');
} else {
var TotalPrice = (parseInt(dataObj.TotalPrice) / 10000).toFixed(2)
$("#page" + (n+1) + " #jiaoyie").animateNumber({ number: TotalPrice.split('.')[0] }, 2000);
$("#page" + (n+1) + " #jiaoyie2").animateNumber({ number: TotalPrice.split('.')[1] }, 2000);
}
$("#page" + (n+1) + " .year" + (n+1)).text(dataObj.Year)
$("#page" + (n+1) + " .year" + (n+1)).text(dataObj.Year)
if(dataObj.evaluateList.ScoreNum == '0') {
$("#page" + (n+1) + " #fenshu").text('-')
$("#pingjiaY").hide()
$("#pingjiaN").show()
} else {
$("#pingjiaY").show()
$("#pingjiaN").hide()
$("#page" + (n+1) + " #fenshu").animateNumber({ number: dataObj.evaluateList.ScoreNum }, 2000)
}
$("#page" + (n+1) + " #allYear").animateNumber({ number: 10}, 2000)
$("#page" + (n+1) + " #Country").animateNumber({ number: 3}, 2000)
$("#page" + (n+1) + " #City").animateNumber({ number: 16}, 2000)
$("#page" + (n+1) + " #Company").animateNumber({ number: 17}, 2000)
$("#page" + (n+1) + " #allTH").animateNumber({ number: 14100}, 2000)
$("#page" + (n+1) + " #dahongbao").animateNumber({ number: dataObj.yearTotalPrice}, 2000)
clearInterval(timer2)
timer2 = null
$("#danmu").html('')
barrageWall.init(option);//初始化弹幕墙
if (n == 4 && timer2 == null) {
timer2 = setInterval(function(){
createDM();
},2000);
}
}
if (n == 0) {
$("#fan-up").hide()
} else {
$("#fan-up").show()
}
if (n == len - 1) {
$("#fan-down").hide()
} else {
$("#fan-down").show()
}
$("#fan-up").removeClass('bounceInDown')
$("#fan-down").removeClass('bounceInUp')
setTimeout(()=>{
$("#fan-up").addClass('bounceInDown')
$("#fan-down").addClass('bounceInUp')
}, 500)
};
//touch事件绑定
box.addEventListener("touchstart", function(event) {
touchstart(event)
}, false);
box.addEventListener("touchmove", function(event) {
touchmove(event)
}, false);
box.addEventListener("touchend", function(event) {
touchend(event)
}, false);
pageUp.addEventListener("click", function (event) {
moveY = 100
touchend(event)
}, false)
pageDown.addEventListener("click", function (event) {
moveY = -100
touchend(event)
}, false)
};
pages({
wrap: 'wrap', //.wrap的id
wrap2: 'wrap2', //.wrap2的id
len: maxPageIndex, //一共有几页
n: newPageIndex //页面一打开默认在第几页？第一页就是0，第二页就是1
});
// insert();
var timer2 = setInterval(function(){
createDM();
},2000);
// 创建弹幕
function createDM(){
if (!TextContentList.length) return
var randomS=Math.floor(Math.random()*TextContentList.length);
barrageWall.upWall('', TextContentList[randomS].TextContent, '');
}
// 创建图表1
function creatEchart(Datas){
var option = {
legend: {
icon: "circle",
bottom: '20%',
left:'2%',
itemWidth: 7,
itemHeight: 7,
itemGap: 40,
textStyle:{
color:'#89A7AF',
},
data:[{
name : Datas.LineName[0]
},
{
name : Datas.LineName[1]
},
{
name : Datas.LineName[2]
}
]
},
grid: {
left: '10%',
right: '0%',
top: 60,
},
xAxis: [{
type :'value',
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false
},
splitLine: {
show: false,
}
}],
yAxis: [{
//type: 'category',
data: [''],
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#fff',
}
}
}],
series: [
{
name: Datas.LineName[0],
type:'bar',
barWidth:16,
stack: '危货种类占比',
label: {
normal: {
borderWidth: 10,
distance: 20,
align: 'center',
verticalAlign: 'middle',
borderRadius: 1,
borderColor: '#E8A61F',
backgroundColor: '#E8A61F',
show: true,
position: 'top',
formatter: '{c}',
color: '#fff'
}
},
itemStyle: {
color: '#E8A61F'
},
data:[{
value: Datas.TotalGuest[0],
itemStyle: {
normal: {
color: {
type: 'bar',
colorStops: [{
offset: 0,
color: '#E8A61F' // 0% 处的颜色
}, {
offset: 1,
color: '#E8A61F' // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
}
}
}
}]
},
{
type:'line',
barWidth:0,
markPoint: {
symbol:'triangle',
symbolRotate:'180',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#E8A61F' // 0% 处的颜色
}, {
offset: 1, color: '#E8A61F' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
symbolSize:[6,5],// 容器大小
symbolOffset:[0,-15],//位置偏移
data:[{
coord: [Datas.TotalGuest[0]/2]
}],
label: {
normal: {
show: false
},
offset: [0, 0],
}
}
},
{
name: Datas.LineName[1],
type:'bar',
barWidth:16,
stack: '危货种类占比',
itemStyle: {
color: '#E67C26'
},
label: {
normal: {
borderWidth: 10,
distance: 20,
align: 'center',
verticalAlign: 'middle',
borderRadius: 1,
borderColor: '#E67C26',
backgroundColor: '#E67C26',
show: true,
position: 'top',
formatter: '{c}',
color: '#fff'
}
},
data:[{
value: Datas.TotalGuest[1],
itemStyle: {
normal: {
color: {
type: 'bar',
colorStops: [{
offset: 0,
color: '#E67C26' // 0% 处的颜色
}, {
offset: 1,
color: '#E67C26' // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
}
}
}
}]
},
{
name:'危化品三角形',
type:'line',
barWidth:0,
markPoint: {
symbol:'triangle',
symbolRotate:'180',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#E67C26' // 0% 处的颜色
}, {
offset: 1, color: '#E67C26' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
symbolSize:[6,5],// 容器大小
symbolOffset:[0,-15],//位置偏移
data:[{
coord: [Datas.TotalGuest[0] + Datas.TotalGuest[1]/2]
}],
label: {
normal: {
show: false
},
offset: [0, 0],
}
}
},
{
name: Datas.LineName[2],
type:'bar',
barWidth:16,
stack: '危货种类占比',
itemStyle: {
color: '#0CD8A7'
},
label: {
normal: {
borderWidth: 10,
distance: 20,
align: 'center',
verticalAlign: 'middle',
borderRadius: 1,
borderColor: '#0CD8A7',
backgroundColor: '#0CD8A7',
show: true,
position: 'top',
formatter: '{c}',
color: '#fff'
}
},
data:[{
value: Datas.TotalGuest[2],
itemStyle: {
normal: {
color: {
type: 'bar',
colorStops: [{
offset: 0,
color: '#0CD8A7' // 0% 处的颜色
}, {
offset: 1,
color: '#0CD8A7' // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
}
}
}
}]
},
{
name:'其他三角形',
type:'line',
barWidth:0,
markPoint: {
symbol:'triangle',
symbolRotate:'180',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#0CD8A7' // 0% 处的颜色
}, {
offset: 1, color: '#0CD8A7' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
symbolSize:[6,5],// 容器大小
symbolOffset:[0,-15],//位置偏移
data:[{
coord: [Datas.TotalGuest[0] + Datas.TotalGuest[1] + Datas.TotalGuest[2]/2]
}],
label: {
normal: {
show: false
},
offset: [0, 0],
}
}
}
]
};
myChart1.setOption(option);
}
// 创建图表2
function creatEchart2(Datas){
var option = {
legend: {
icon: "circle",
bottom: '20%',
left:'2%',
itemWidth: 7,
itemHeight: 7,
itemGap: 40,
textStyle:{
color:'#89A7AF',
},
data:[{
name : Datas.LineName[0]
},
{
name : Datas.LineName[1]
},
{
name : Datas.LineName[2]
}
]
},
grid: {
left: '10%',
right: '0%',
top: 60,
},
xAxis: [{
type :'value',
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false
},
splitLine: {
show: false,
}
}],
yAxis: [{
//type: 'category',
data: [''],
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#fff',
}
}
}],
series: [
{
name: Datas.LineName[0],
type:'bar',
barWidth:16,
stack: '危货种类占比',
label: {
normal: {
borderWidth: 10,
distance: 20,
align: 'center',
verticalAlign: 'middle',
borderRadius: 1,
borderColor: '#E8A61F',
backgroundColor: '#E8A61F',
show: true,
position: 'top',
formatter: '{c}',
color: '#fff'
}
},
itemStyle: {
color: '#E8A61F'
},
data:[{
value: Datas.TotalGuest[0],
itemStyle: {
normal: {
color: {
type: 'bar',
colorStops: [{
offset: 0,
color: '#E8A61F' // 0% 处的颜色
}, {
offset: 1,
color: '#E8A61F' // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
}
}
}
}]
},
{
type:'line',
barWidth:0,
markPoint: {
symbol:'triangle',
symbolRotate:'180',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#E8A61F' // 0% 处的颜色
}, {
offset: 1, color: '#E8A61F' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
symbolSize:[6,5],// 容器大小
symbolOffset:[0,-15],//位置偏移
data:[{
coord: [Datas.TotalGuest[0]/2]
}],
label: {
normal: {
show: false
},
offset: [0, 0],
}
}
},
{
name: Datas.LineName[1],
type:'bar',
barWidth:16,
stack: '危货种类占比',
itemStyle: {
color: '#E67C26'
},
label: {
normal: {
borderWidth: 10,
distance: 20,
align: 'center',
verticalAlign: 'middle',
borderRadius: 1,
borderColor: '#E67C26',
backgroundColor: '#E67C26',
show: true,
position: 'top',
formatter: '{c}',
color: '#fff'
}
},
data:[{
value: Datas.TotalGuest[1],
itemStyle: {
normal: {
color: {
type: 'bar',
colorStops: [{
offset: 0,
color: '#E67C26' // 0% 处的颜色
}, {
offset: 1,
color: '#E67C26' // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
}
}
}
}]
},
{
name:'危化品三角形',
type:'line',
barWidth:0,
markPoint: {
symbol:'triangle',
symbolRotate:'180',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#E67C26' // 0% 处的颜色
}, {
offset: 1, color: '#E67C26' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
symbolSize:[6,5],// 容器大小
symbolOffset:[0,-15],//位置偏移
data:[{
coord: [Datas.TotalGuest[0] + Datas.TotalGuest[1]/2]
}],
label: {
normal: {
show: false
},
offset: [0, 0],
}
}
},
{
name: Datas.LineName[2],
type:'bar',
barWidth:16,
stack: '危货种类占比',
itemStyle: {
color: '#0CD8A7'
},
label: {
normal: {
borderWidth: 10,
distance: 20,
align: 'center',
verticalAlign: 'middle',
borderRadius: 1,
borderColor: '#0CD8A7',
backgroundColor: '#0CD8A7',
show: true,
position: 'top',
formatter: '{c}',
color: '#fff'
}
},
data:[{
value: Datas.TotalGuest[2],
itemStyle: {
normal: {
color: {
type: 'bar',
colorStops: [{
offset: 0,
color: '#0CD8A7' // 0% 处的颜色
}, {
offset: 1,
color: '#0CD8A7' // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
}
}
}
}]
},
{
name:'其他三角形',
type:'line',
barWidth:0,
markPoint: {
symbol:'triangle',
symbolRotate:'180',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#0CD8A7' // 0% 处的颜色
}, {
offset: 1, color: '#0CD8A7' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
symbolSize:[6,5],// 容器大小
symbolOffset:[0,-15],//位置偏移
data:[{
coord: [Datas.TotalGuest[0] + Datas.TotalGuest[1] + Datas.TotalGuest[2]/2]
}],
label: {
normal: {
show: false
},
offset: [0, 0],
}
}
}
]
};
myChart2.setOption(option);
}
// 展示隐藏说明
function showTk(type){
if (type == 1 ) {
$('.tanchuang').show()
} else {
$('.tanchuang').hide()
}
}
// 跳转规则页面
function goRule(){
window.location.href = 'rule.html';
}
// 跳转开红包页面
function goRed(){
var time1 = new Date(Date.parse(new Date()));
var time2 = new Date(Date.parse('2020-01-02 10:00:00'));
if (time1 > time2) {
window.location.href = 'openRedPacket.html';
} else {
layer.msg('感谢您的关注<br>请于2020-01-02 10:00:00再来打开红包~')
}
}
</script>
</body>
</html>