chenxuan/visual-vue-v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
chenxuanThinkpad
2023-10-18 16:30:26 +08:00
parent 2fdae738f0
commit 730c511206
3037 changed files with 987677 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resource/html/07universal/04/css/comon0.css
+127
View File
@@ -0,0 +1,127 @@
@charset "utf-8";
/* CSS Document */
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box}
*,body{padding:0px; margin:0px;color: #222;font-family: "微软雅黑";}
body{color:#666;font-size: 16px;}
li{ list-style-type:none;}
table{}
i{ margin:0px; padding:0px; text-indent:0px;}
img{ border:none; max-width: 100%;}
a{ text-decoration:none; color:#399bff;}
a.active,a:focus{ outline:none!important; text-decoration:none;}
ol,ul,p,h1,h2,h3,h4,h5,h6{ padding:0; margin:0}
a:hover{ color:#06c; text-decoration: none!important}
.clearfix:after, .clearfix:before {
display: table;
content: " "
}
.clearfix:after {
clear: both
}
.pulll_left{float:left;}
.pulll_right{float:right;}
.loading{position:fixed; left:0; top:0; font-size:16px; z-index:100000000;width:100%; height:100%; background:#1a1a1c; text-align:center;}
.loadbox{position:absolute; width:160px;height:150px; color:rgba(255,255,255,.6); left:50%; top:50%; margin-top:-100px; margin-left:-75px;}
.loadbox img{ margin:10px auto; display:block; width:40px;}
.head{ height:105px; background: url(../images/head_bg.png) no-repeat center center; position: relative}
.head h1{ color:#fff; text-align: center; font-size:42px; line-height:90px;;}
.head h1 img{ width:1.5rem; display: inline-block; vertical-align: middle; margin-right: .2rem}
.weather{ position:absolute; right:30px; top:0; line-height: 70px;}
.weather span{color:rgba(255,255,255,.9)!important; font-size: 24px;}
.mainbox{ padding:10px 20px 0px 20px;}
.mainbox>ul{ margin-left:-.4rem; margin-right:-.4rem;}
.mainbox>ul>li{ float: left; padding: 0 .4rem}
.mainbox>ul>li{ width: 24%}
.mainbox>ul>li:nth-child(2){ width: 52%}
.boxall{ padding:15px; background: rgba(0,0,0,.2); position: relative; margin-bottom:15px;; z-index: 10;}
.alltitle{ font-size:18px; color:#fff; position: relative; padding-left: 12px;margin-bottom: 10px;}
.alltitle:before{ width: 5px; height: 20px; top:2px; position: absolute; content: ""; background: #49bcf7; border-radius:20px; left: 0; }
.navboxall{height: calc(100% - 30px);}
/*Plugin CSS*/
.wrap{ height:82%; overflow: hidden;}
.wrap li{ line-height:40px; height:40px; }
.wrap li p,.wraptit{ font-size: 0; }
.wrap li span,.wraptit span{ display: inline-block; font-size: 18px;color: rgba(255,255,255,.6); text-align: center;}
.wraptit { border-bottom: 1px dotted rgba(255,255,255,.15); padding:0 0 10px 0; margin-bottom: 10px;}
.wraptit span{font-size: 20px;color: rgba(255,255,255,.8); }
.wrap li span:nth-child(1),.wraptit span:nth-child(1){ width: 30%}
.wrap li span:nth-child(2),.wraptit span:nth-child(2){ width: 25%}
.wrap li span:nth-child(3),.wraptit span:nth-child(3){ width: 25%}
.wrap li span:nth-child(4),.wraptit span:nth-child(4){ width: 20%}
.str_wrap {
overflow:hidden;
width:100%;
position:relative;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
white-space:nowrap;
}
.str_move {
white-space:nowrap;
position:absolute;
top:0;
left:0;
cursor:move;
}
.str_move_clone {
display:inline-block;
vertical-align:top;
position:absolute;
left:100%;
top:0;
}
.str_vertical .str_move_clone {
left:0;
top:100%;
}
.str_down .str_move_clone {
left:0;
bottom:100%;
}
.str_vertical .str_move,
.str_down .str_move {
white-space:normal;
width:100%;
}
.str_static .str_move,
.no_drag .str_move,
.noStop .str_move{
cursor:inherit;
}
.str_wrap img {
max-width:none !important;
}
.sycm ul{ margin-left:-.5rem;margin-right:-.5rem; padding: .16rem 0;}
.sycm li{ float: left; width:50%; text-align: center; position: relative}
.sycm li:before{ position:absolute; content: ""; height:80%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
.sycm li:last-child:before{ width: 0;}
.sycm li h2{ font-size:46px; padding-top: 10px; color: #c7cd4f; font-weight: 700; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}
.sycm li span{ font-size:20px; color: #fff; opacity: .5;}
.jindu li{ width: 50%; float: left; height: 170px;;}
.jindu li:nth-child(odd),.jindu div:nth-child(odd){border-right:1px dotted rgba(255,255,255,.1);}
.jindu div{ width: 50%; float: left; color: #fff; text-align: center; border-top: 1px dotted rgba(255,255,255,.15); padding: 20px 0 0 0; margin: 20px 0 0 0; font-size: 24px;}
resource/html/07universal/04/images/bg.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 252 KiB

resource/html/07universal/04/images/head_bg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

resource/html/07universal/04/images/更多内容关注公众号.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

resource/html/07universal/04/index.html
+154
View File
@@ -0,0 +1,154 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WebTools-Web开发者素材</title>
<link rel="icon" href="../../img/logo.png">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="../../js/echarts/echarts.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/jquery.limarquee.js"></script>
<script type="text/javascript" src="js/jquery.cxselect.min.js"></script>
<link rel="stylesheet" href="css/comon0.css">
</head>
<body>
<div style="background:#000d4a url(images/bg.jpg) center top;">
<div class="loading">
<div class="loadbox"> <img src="picture/loading.gif"> 页面加载中... </div>
</div>
<div class="back"></div>
<div class="head">
<h1>模板4</h1>
<div class="weather"><span id="showTime"></span></div>
</div>
<script>
var t = null;
t = setTimeout(time,1000);//開始运行
function time()
{
clearTimeout(t);//清除定时器
dt = new Date();
var y=dt.getFullYear();
var mt=dt.getMonth()+1;
var day=dt.getDate();
var h=dt.getHours();//获取时
var m=dt.getMinutes();//获取分
var s=dt.getSeconds();//获取秒
document.getElementById("showTime").innerHTML = y+"年"+mt+"月"+day+"日"+h+"时"+m+"分"+s+"秒";
t = setTimeout(time,1000); //设定定时器，循环运行
}
</script>
<div class="mainbox">
<ul class="clearfix">
<li>
<div class="boxall" style="height:545px;">
<div class="navboxall" >
<div class="sycm">
<ul class="clearfix">
<li>
<h2>22864</h2>
<span>总金额</span></li>
<li>
<h2>1572</h2>
<span>数量</span></li>
</ul>
</div>
<ul class="jindu clearfix">
<div>1000</div>
<div>2000</div>
<li id="zb1"></li>
<li id="zb2"></li>
<li id="zb3"></li>
<li id="zb4"></li>
</ul>
</div>
</div>
</li>
<li>
<div class="boxall" style="height:545px">
<div class="alltitle">标题样式</div>
<div class="navboxall" id="echart4"></div>
</div>
</li>
<li>
<div class="boxall" style="height:260px">
<div class="alltitle">标题样式</div>
<div class="navboxall" id="echart1"> </div>
</div>
<div class="boxall" style="height:270px">
<div class="alltitle">标题样式</div>
<div class="navboxall" id="echart2"> </div>
</div>
</li>
</ul>
<ul class="clearfix">
<li>
<div class="boxall" style="height:390px;">
<div class="alltitle">标题样式</div>
<div class="navboxall" >
<div class="wraptit"> <span>订单号</span><span>订单金额</span><span>计划时间</span><span>当前状态</span> </div>
<div class="wrap">
<ul>
<li>
<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
</li>
<li>
<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
</li>
<li>
<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
</li>
<li>
<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
</li>
<li>
<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
</li>
<li>
<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
</li>
<li>
<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
</li>
<li>
<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
</li>
</ul>
</div>
</div>
</div>
</li>
<li style="width:38%">
<div class="boxall" style="height:390px">
<div class="alltitle">标题样式</div>
<div class="navboxall" id="echart3"></div>
</div>
</li>
<li style="width:38%">
<div class="boxall" style="height:390px">
<div class="alltitle">标题样式</div>
<div class="navboxall" id="echart5"></div>
</div>
</li>
</ul>
</div>
</div>
<script>
$(function(){
$('.wrap').liMarquee({
direction: 'up',//身上滚动
//runshort: false,//内容不足时不滚动
scrollamount: 20//速度
});
});
</script>
</body>
</html>
resource/html/07universal/04/js/jquery.cxselect.min.js
Vendored
+11
View File
@@ -0,0 +1,11 @@
/*!
* jQuery cxSelect
* @name jquery.cxselect.js
* @version 1.3.4
* #date 2013-12-18
* @author ciaoca
* @email ciaoca@gmail.com
* @site https://github.com/ciaoca/cxSelect
* @license Released under the MIT license
*/
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a(jQuery)}(function(a){a.cxSelect=function(b){var c,h,i,d={dom:{},api:{}},e=function(a){return a&&("function"==typeof HTMLElement||"object"==typeof HTMLElement)&&a instanceof HTMLElement?!0:a&&a.nodeType&&1===a.nodeType?!0:!1},f=function(a){return a&&a.length&&("function"==typeof jQuery||"object"==typeof jQuery)&&a instanceof jQuery?!0:!1},g=function(a){return Array.isArray?Array.isArray(a):"[object Array]"===Object.prototype.toString.call(a)};for(h=0,i=arguments.length;i>h;h++)f(arguments[h])?c=arguments[h]:e(arguments[h])?c=a(arguments[h]):"object"==typeof arguments[h]&&(b=arguments[h]);if(!(c.length<1))return d.init=function(){var e,d=this;if(d.dom.box=c,d.settings=a.extend({},a.cxSelect.defaults,b,{url:d.dom.box.data("url"),nodata:d.dom.box.data("nodata"),required:d.dom.box.data("required"),firstTitle:d.dom.box.data("firstTitle"),firstValue:d.dom.box.data("firstValue")}),d.settings.selects.length){for(d.selectArray=[],d.selectSum=d.settings.selects.length,e=0;e<d.selectSum&&d.dom.box.find("select."+d.settings.selects[e]);e++)d.selectArray.push(d.dom.box.find("select."+d.settings.selects[e]));d.selectSum=d.selectArray.length,d.selectSum&&("string"==typeof d.settings.url?a.getJSON(d.settings.url,function(a){d.dataJson=a,d.buildContent()}):"object"==typeof d.settings.url&&(d.dataJson=d.settings.url,d.buildContent()))}},d.getIndex=function(a){return this.settings.required?a:a-1},d.getNewOptions=function(b,c){var d,e,f,g,h;if(b)return d=this.settings.firstTitle,e=this.settings.firstValue,f=b.data("firstTitle"),g=b.data("firstValue"),h="",("string"==typeof f||"number"==typeof f||"boolean"==typeof f)&&(d=f.toString()),("string"==typeof g||"number"==typeof g||"boolean"==typeof g)&&(e=g.toString()),this.settings.required||(h='<option value="'+e+'">'+d+"</option>"),a.each(c,function(a,b){h+="string"==typeof b.v||"number"==typeof b.v||"boolean"==typeof b.v?'<option value="'+b.v+'">'+b.n+"</option>":'<option value="'+b.n+'">'+b.n+"</option>"}),h},d.buildContent=function(){var b,a=this;a.dom.box.on("change","select",function(){a.selectChange(this.className)}),b=a.getNewOptions(a.selectArray[0],a.dataJson),a.selectArray[0].html(b).prop("disabled",!1).trigger("change"),a.setDefaultValue()},d.setDefaultValue=function(a){var b,c;a=a||0,b=this,a>=b.selectSum||!b.selectArray[a]||(c=b.selectArray[a].data("value"),("string"==typeof c||"number"==typeof c||"boolean"==typeof c)&&(c=c.toString(),setTimeout(function(){b.selectArray[a].val(c).trigger("change"),a++,b.setDefaultValue(a)},1)))},d.selectChange=function(a){var b,c,d,e,f,h;for(a=a.replace(/ /g,","),a=","+a+",",b=[],h=0;h<this.selectSum;h++)b.push(this.getIndex(this.selectArray[h].get(0).selectedIndex)),"number"==typeof c&&h>c&&(this.selectArray[h].empty().prop("disabled",!0),"none"===this.settings.nodata?this.selectArray[h].css("display","none"):"hidden"===this.settings.nodata&&this.selectArray[h].css("visibility","hidden")),a.indexOf(","+this.settings.selects[h]+",")>-1&&(c=h);for(d=c+1,e=this.dataJson,h=0;d>h;h++){if("undefined"==typeof e[b[h]]||g(e[b[h]].s)===!1||!e[b[h]].s.length)return;e=e[b[h]].s}this.selectArray[d]&&(f=this.getNewOptions(this.selectArray[d],e),this.selectArray[d].html(f).prop("disabled",!1).css({display:"",visibility:""}).trigger("change"))},d.init(),this},a.cxSelect.defaults={selects:[],url:null,nodata:null,required:!1,firstTitle:"请选择",firstValue:"0"},a.fn.cxSelect=function(b,c){return this.each(function(){a.cxSelect(this,b,c)}),this}});
resource/html/07universal/04/js/jquery.js
Vendored
+5
View File
File diff suppressed because one or more lines are too long
resource/html/07universal/04/js/jquery.limarquee.js
+1309
View File
File diff suppressed because it is too large Load Diff
resource/html/07universal/04/js/js.js
+757
View File
@@ -0,0 +1,757 @@
$(window).load(function(){$(".loading").fadeOut()})
$(function () {
echarts_1();
echarts_2();
echarts_3();
echarts_4();
echarts_5();
zb1();
zb2();
zb3();
zb4();
function echarts_1() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart1'));
option = {
tooltip : {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
legend: {
right:10,
top:30,
height:140,
itemWidth:10,
itemHeight:10,
itemGap:10,
textStyle:{
color: 'rgba(255,255,255,.6)',
fontSize:12
},
orient:'vertical',
data:['图例1','图例2','图例3','图例4']
},
calculable : true,
series : [
{
name:' ',
color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9','#c96262'],
type:'pie',
radius : [30, 70],
center : ['35%', '50%'],
roseType : 'radius',
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
lableLine: {
normal: {
show: false
},
emphasis: {
show: true
}
},
data:[
{value:10, name:'图例1'},
{value:15, name:'图例2'},
{value:25, name:'图例3'},
{value:30, name:'图例4'}
]
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function echarts_2() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart2'));
option = {
tooltip : {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
legend: {
right:10,
top:30,
height:140,
itemWidth:10,
itemHeight:10,
itemGap:10,
textStyle:{
color: 'rgba(255,255,255,.6)',
fontSize:12
},
orient:'vertical',
data:['图例1','图例2','图例3','图例4']
},
calculable : true,
series : [
{
name:' ',
color: ['#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9','#c96262'],
type:'pie',
radius : [30, 70],
center : ['35%', '50%'],
roseType : 'radius',
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
lableLine: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data:[
{value:50, name:'图例1'},
{value:45, name:'图例2'},
{value:35, name:'图例3'},
{value:30, name:'图例4'}
]
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function echarts_3() {
/* */
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart3'));
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#dddc6b'
}
}
},
grid: {
left: '10',
top: '20',
right: '30',
bottom: '10',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize:16,
},
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}, {
axisPointer: {show: false},
axisLine: { show: false},
position: 'bottom',
offset: 20,
}],
yAxis: [{
type: 'value',
axisTick: {show: false},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize:16,
},
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
}
}],
series: [
{
name: '结算率',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
color: '#dddc6b',
width: 4
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(221, 220, 107, 0.4)'
}, {
offset: 0.8,
color: 'rgba(221, 220, 107, 0.1)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
}
},
itemStyle: {
normal: {
color: '#dddc6b',
borderColor: 'rgba(221, 220, 107, .1)',
borderWidth: 12
}
},
data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function echarts_4() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart4'));
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['2017年', '2018年'],
align: 'right',
right: '40%',
top:'0%',
textStyle: {
color: "#fff",
fontSize: '16',
},
itemWidth: 16,
itemHeight: 16,
itemGap: 35
},
grid: {
left: '0%',
top:'40px',
right: '0%',
bottom: '2%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 1,
type: "solid"
},
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
// rotate:50,
show: true,
splitNumber: 15,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: '16',
},
},
}],
yAxis: [{
type: 'value',
axisLabel: {
//formatter: '{value} %'
show:true,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: '16',
},
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1 )",
width: 1,
type: "solid"
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
}
}
}],
series: [{
name: '2017年',
type: 'bar',
data: [2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10],
barWidth:'15', //柱子宽度
// barGap: 1, //柱子之间间距
itemStyle: {
normal: {
color:'#2f89cf',
opacity: 1,
barBorderRadius: 5,
}
}
}, {
name: '2018年',
type: 'bar',
data: [1, 4, 5, 11, 12, 9, 5, 6, 5, 6, 3, 9],
barWidth:'15',
// barGap: 1,
itemStyle: {
normal: {
color:'#62c98d',
opacity: 1,
barBorderRadius: 5,
}
}
},
]
};
/* */
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function echarts_5() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart5'));
option = {
// backgroundColor: '#00265f',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['2017年', '2018年'],
align: 'right',
right: '40%',
top:'0%',
textStyle: {
color: "#fff",
fontSize: '16',
},
itemGap: 35
},
grid: {
left: '0%',
top:'40px',
right: '0%',
bottom: '2%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 1,
type: "solid"
},
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
// rotate:50,
show: true,
splitNumber: 15,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: '16',
},
},
}],
yAxis: [{
type: 'value',
axisLabel: {
//formatter: '{value} %'
show:true,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: '16',
},
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1 )",
width: 1,
type: "solid"
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
}
}
}],
series: [{
name: '2017年',
type: 'line',
data: [2, 6, 3, 8, 5, 8, 10, 13, 8, 5, 6, 9],
itemStyle: {
normal: {
color:'#2f89cf',
opacity: 1,
barBorderRadius: 5,
}
}
}, {
name: '2018年',
type: 'line',
data: [5, 2, 6, 4, 5, 12, 5, 17, 9, 2, 6, 3],
barWidth:'15',
// barGap: 1,
itemStyle: {
normal: {
color:'#62c98d',
opacity: 1,
barBorderRadius: 5,
}
}
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function zb1() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('zb1'));
var v1=60//结算数
var v2=40//未结算数
var v3=v1+v2//总订单数
option = {
series: [{
type: 'pie',
radius: ['60%', '70%'],
color:'#49bcf7',
label: {
normal: {
position: 'center'
}
},
data: [{
value: v1,
name: '数量结算率',
label: {
normal: {
formatter:Math.round( v1/v3*100)+ '%',
textStyle: {
fontSize: 30,
color:'#fff',
}
}
}
},
{
value: v2,
label: {
normal: {
formatter : function (params){
return '数量结算率'
},
textStyle: {
color: '#aaa',
fontSize: 16
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}]
};
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function zb2() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('zb2'));
var v1=80//结算数
var v2=20//未结算数
var v3=v1+v2//总订单数
option = {
//animation: false,
series: [{
type: 'pie',
radius: ['60%', '70%'],
color:'#49bcf7',
label: {
normal: {
position: 'center'
}
},
data: [{
value: v1,
name: '数量结算率',
label: {
normal: {
formatter:Math.round( v1/v3*100)+ '%',
textStyle: {
fontSize: 24,
color:'#fff',
}
}
}
}, {
value: v2,
label: {
normal: {
formatter : function (params){
return '数量结算率'
},
textStyle: {
color: '#aaa',
fontSize: 16
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}]
};
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function zb3() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('zb3'));
var v1=30//结算金额
var v2=70//未结算
var v3=v1+v2
option = {
series: [{
type: 'pie',
radius: ['60%', '70%'],
color:'#62c98d',
label: {
normal: {
position: 'center'
}
},
data: [{
value: v1,
name: '金额结算率',
label: {
normal: {
formatter:Math.round( v1/v3*100)+ '%',
textStyle: {
fontSize: 24,
color:'#fff',
}
}
}
}, {
value: v2,
label: {
normal: {
formatter : function (params){
return '金额结算率'
},
textStyle: {
color: '#aaa',
fontSize: 16
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}]
};
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function zb4() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('zb4'));
var v1=90//结算金额
var v2=10//未结算
var v3=v1+v2
option = {
series: [{
type: 'pie',
radius: ['60%', '70%'],
color:'#29d08a',
label: {
normal: {
position: 'center'
}
},
data: [{
value: v1,
name: '金额结算率',
label: {
normal: {
formatter:Math.round( v1/v3*100)+ '%',
textStyle: {
fontSize: 24,
color:'#fff',
}
}
}
}, {
value: v2,
label: {
normal: {
formatter : function (params){
return '金额结算率'
},
textStyle: {
color: '#aaa',
fontSize: 16
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}]
};
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
})
resource/html/07universal/04/picture/loading.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 701 B

resource/html/07universal/04/picture/更多内容关注公众号.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB