<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<script src="js/SYSUI/SYSUI.js" type="text/javascript"></script>
<style type="text/css">
.pageModule{position: fixed;z-index: 1; width: 100%; height: 100%;}
.chartstyle{ width: 1200px; height: 500px; margin:0 auto; margin-top: 50px;}
.chartstyle .charttitle{ padding: 15px;}
.chartstyle .charttitle h2{font-weight: bold;}
.chartstyle .bgcolor{border-radius: 50%; width: 10px; height: 10px; float: left; margin-top: 5px; margin-right: 5px;}
.chartstyle .color1{background: #2A8BCC;}
.chartstyle .color2{background: #5196d7;}
.chartstyle .color4{background: -webkit-linear-gradient(top, #86fcdd, #14bc98);}
.chartamount{float: left; width: 50px;height: 300px; margin: 0px 20px;position: relative;z-index:5; background: rgba(0,0,0,0.1);}
.chartamount:before, .pillaramount:before {
top: -1em;
right: -2em;
width: 2em;
height: 100%;
background-color: rgba(160, 160, 160, .27);
-webkit-transform: skew(0deg, -45deg);
-moz-transform: skew(0deg, -45deg);
-o-transform: skew(0deg, -45deg);
-ms-transform: skew(0deg, -45deg);
transform: skew(0deg, -45deg);
}
.chartamount:after, .pillaramount:after {
top: -2em;
right: -1em;
width: 100%;
height: 2em;
background-color: rgba(160, 160, 160, .2);
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-o-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
}
.chartamount:before, .chartamount:after, .pillaramount:before, .pillaramount:after {
content: "";
position: absolute;
}
.pillaramount:before,
.pillaramount:after{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#85b5f8,endColorStr=#5196d7);
background: -ms-linear-gradient(top, #85b5f8, #5196d7);
background: -moz-linear-gradient(top,#85b5f8,#f6f6f8);
background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#85b5f8), to(#f6f6f8));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#85b5f8), to(#5196d7));
background: -webkit-linear-gradient(top, #85b5f8, #5196d7);
background: -o-linear-gradient(top, #85b5f8, #5196d7);
}
.chartamount:hover,
.chartamount:hover:before,
.chartamount:hover:after{background:rgba(0,0,0,0.2);box-shadow: 0px 4px 12px rgba(0,0,0,0.1); cursor: pointer;}
.chartamount .pillaramount{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#a3c8fc,endColorStr=#5196d7);
background: -ms-linear-gradient(top, #a3c8fc, #5196d7);
background: -moz-linear-gradient(top,#a3c8fc,#f6f6f8);
background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#a3c8fc), to(#f6f6f8));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a3c8fc), to(#5196d7));
background: -webkit-linear-gradient(top, #a3c8fc, #5196d7);
background: -o-linear-gradient(top, #a7cbfe, #5196d7);
position: absolute;
bottom: 0px;
z-index: 11;
left: 0;
width: 100%;
animation-name: example;
animation-duration:1s;
}
@keyframes example {
0% {height: 0;}
}
.chartcontent,
.chartdata{ height: 300px;position: relative;z-index:2;}
.chartamount .typename{position: absolute; bottom: -30px; width: 100%; text-align: center;}
.chartpart{position: absolute;z-index:-2; border-bottom:1px solid #DDDDDD; width: 100%;left: 0px;}
.chartTotal{ height: 100%; position: absolute;z-index:1;top:0;border-right:1px solid #DDDDDD;}
.chartmean{position: absolute;z-index: 2; left:-45px; text-align: right;width: 40px;line-height:1}
.amount{position: absolute; top:-40px; text-align: center;width:100%; z-index: 111;background: #FFFFFF; border-radius: 5px;padding: 5px;}
.chartamount .pillaramount:hover,
.chartamount .pillaramount:hover:before,
.chartamount .pillaramount:hover:after{background:#5196d7;}
.chartDiscount .chartlocation{content: "";position: absolute;width: 10px; height: 10px; border-radius: 50%;background: #2A8BCC;top:20px;z-index: -1;}
.chartlink{ color: #000000;}
.sys-chartTitle{
position: absolute;
z-index: 2;
left: -45px;
text-align: right;
line-height: 1;
}
.chartamount .chartlink .pillaramount{background: #E07360;}
.chartDiscount {position: absolute; height: auto!important;margin-left: -5px;}
.chartDiscount .chartPolyline{height: 2px; background: #2A8BCC;content: "";position: absolute; -webkit-transition: all 1.9s ease;}
.color4{background: #FF6633;}
.mousestyle{padding: 5px;border-radius: 5px;width: 150px;z-index: 9999; border-top:1px solid #DDDDDD; top:auto}
.chart-Multistage{width: 100px!important;}
.chart-Multistage .pillaramount {width: 50%;}
.chart-Multistage .pillaramount.amount2{
left: 50%;
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#86fcdd,endColorStr=#14bc98);
background: -ms-linear-gradient(top, #86fcdd, #14bc98);
background: -moz-linear-gradient(top,#86fcdd,#14bc98);
background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#86fcdd), to(#14bc98));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#86fcdd), to(#14bc98));
background: -webkit-linear-gradient(top, #86fcdd, #14bc98);
background: -o-linear-gradient(top, #86fcdd, #14bc98);
}
.chart-Multistage .pillaramount.amount2:before,
.chart-Multistage .pillaramount.amount2:after{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#86fcdd,endColorStr=#14bc98);
background: -ms-linear-gradient(top, #86fcdd, #14bc98);
background: -moz-linear-gradient(top,#86fcdd,#14bc98);
background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#86fcdd), to(#14bc98));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#86fcdd), to(#14bc98));
background: -webkit-linear-gradient(top, #86fcdd, #14bc98);
background: -o-linear-gradient(top, #86fcdd, #14bc98);
}
.coordinate0{
left: -1px;
}
.coordinate1{ right:-1px}
.coordinate1 .sys-chartTitle{ left:5px;width: 75px;}
.coordinate1 .chartmean{ left: 5px; text-align: left;}
.chart-Polyline{
float: left;
width: 90px;
height: 300px;
position: relative;
}
.chart-Polyline:hover{background: rgba(80,150,215,0.1);}
.chart-Polyline .typename{text-align: left;position: absolute;width: 100%;bottom: -30px;}
/*.zxsales{background: rgba(0,0,0,0.5); padding:5px; border-radius: 5px;color: #FFFFFF;z-index: 9999;left:50%;position: absolute; -webkit-transition: all 0.2s ease;}*/
.chartbackdrop{ height: 0;position: absolute;z-index: 1;left: 0px;bottom: 0;}
.btn-link{padding: 20px 25px; background: #0785D1; color: #FFFFFF;font-size: 16px;border-radius: 0;border:2px solid #0E85C3;position: relative;z-index: 1;overflow: hidden;}
.btn-link:before{
position: absolute;
z-index: 2;
left: 0;
top:0;
content: "";
width: 0;
heig
SYSUI自定义图表事例代码.zip （15个子文件） 
jiaoben8645 js SYSUI font 
iconfont.ttf 37KB iconfont.css 7KB iconfont.json 20KB iconfont.woff2 20KB iconfont.js 168KB
iconfont.svg 162KB iconfont.eot 34KB iconfont.woff 24KB SYSUI.js 243KB css SYSUI.css 30KB loaders.css 57KB
index2.html 9KB list.html 10KB index.html 21KB index1.html 12KB资源评论
