no message
This commit is contained in:
chenxuanThinkpad
@@ -0,0 +1,80 @@
|
||||
@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;}
|
||||
|
||||
.canvas{position:fixed; width:100%; left: 0; top: 0; height:100%; z-index: 1;}
|
||||
.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}
|
||||
h1{ color:#fff; text-align: left; font-size:40px; line-height:64px; text-align: center;}
|
||||
|
||||
.weather{ position:absolute; right:20px; top:0; line-height: 70px;}
|
||||
.weather span{color:rgba(255,255,255,.7)!important; font-size: 18px; }
|
||||
|
||||
|
||||
.mainbox{ padding:20px 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; margin-bottom: 10px;}
|
||||
.alltitle:before{ width: 90%; height: 1px; top:12px; position: absolute; content: ""; border-bottom: dashed #fff 1px; right: 0; opacity: .2;}
|
||||
.alltitle:after{ width: 8px; height:10px; top:8px; position: absolute; content: ""; border-radius:20px; right: 0; background: #0c51f9;}
|
||||
|
||||
|
||||
|
||||
.navboxall{height: calc(100% - 30px);}
|
||||
.num,.zhibiao{height: 100%; width: 50%;}
|
||||
.zb1,.zb2,.zb3{float: left; width: 33.3333%; height: 100%;}
|
||||
#zb1,#zb2,#zb3{height: calc(100% - 30px); }
|
||||
.zhibiao span{ padding-top: 20px; display: block; text-align: center; color: #fff; font-size: 16px;}
|
||||
.num{padding-right: 20px;}
|
||||
.numbt{ font-size: 24px; color: #fff; padding-top:14px;}
|
||||
.numbt span{font-size: 18px; padding-left: 10px;color: #fff; }
|
||||
.numtxt{ color: #fef000; font-size: 80px; font-family: arial; border-top: 1px solid rgba(255,255,255,.1);border-bottom: 1px solid rgba(255,255,255,.1); padding: 10px 0; margin: 18px 0; font-weight: bold; letter-spacing: 2px;}
|
||||
|
||||
.table1 th{border-bottom: 1px solid rgba(255,255,255,.2); font-size: 16px; color:rgba(255,255,255,.6); font-weight: normal; padding:10px 0 10px 0;}
|
||||
.table1 td{ font-size: 16px; color:rgba(255,255,255,.4); padding: 15px 0 0 0; }
|
||||
.table1 span{ width: 24px; height: 24px; border-radius: 53px; display: block; background: #878787; color: #fff; line-height: 24px; text-align: center;}
|
||||
|
||||
.table1 tr:nth-child(2) span{ background: #ed405d}
|
||||
.table1 tr:nth-child(3) span{ background: #f78c44}
|
||||
.table1 tr:nth-child(4) span{ background: #49bcf7}
|
||||
/*Plugin CSS*/
|
||||
.sycm ul{}
|
||||
.sycm li{ text-align: center; padding: 10px 0; position: relative;float: left;width:50%; padding: 20px 0;}
|
||||
|
||||
.sycm ul li:nth-child(odd):before{ position:absolute; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.2); right: 0; top: 30%;}
|
||||
|
||||
.sycm li h2{ font-size:24px; color: #c5ccff;}
|
||||
.sycm li span{ font-size:18px; color: #fff; opacity: .5;}
|
||||
.sycm p{ border: 1px solid rgba(255,255,255,.3);color: rgba(255,255,255,.6); text-align: center; margin: 10px; border-radius: 5px; padding: 8px ; position: relative;}
|
||||
.sycm p:before{content: ""; position: absolute; border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 8px solid rgba(255,255,255,.3); bottom: -8px; left: 49%}
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
@@ -0,0 +1,203 @@
|
||||
<!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/echarts/china.js"></script>
|
||||
<script type="text/javascript" src="js/js.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.cxselect.min.js"></script>
|
||||
<link rel="stylesheet" href="css/comon0.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="canvas">
|
||||
<iframe src="js/canvas.html" frameborder="0" style="width: 100%; height: 100%"></iframe>
|
||||
</div>
|
||||
<div class="loading">
|
||||
<div class="loadbox"> <img src="picture/loading.gif"> 页面加载中... </div>
|
||||
</div>
|
||||
<div style="overflow: hidden;background:rgba(0,0,40,0) ; position: relative; z-index: 2;">
|
||||
|
||||
<div class="mainbox">
|
||||
<ul class="clearfix">
|
||||
<li>
|
||||
<div class="boxall" style="height:350px;">
|
||||
<div class="alltitle">标题样式</div>
|
||||
<div class="navboxall" id="echart1" >
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxall" style="height:360px;">
|
||||
<div class="alltitle">标题样式</div>
|
||||
<div class="navboxall" >
|
||||
|
||||
<div class="sycm">
|
||||
<ul class="clearfix">
|
||||
<li>
|
||||
<h2>1824</h2>
|
||||
<span>当年销售额</span></li>
|
||||
<li>
|
||||
<h2>1920</h2>
|
||||
<span>当月销售额</span></li>
|
||||
<li>
|
||||
<h2>19%</h2>
|
||||
<span>利润额</span></li>
|
||||
|
||||
<li>
|
||||
<h2>1824</h2>
|
||||
<span>当年销售额</span></li>
|
||||
<li>
|
||||
<h2>1920</h2>
|
||||
<span>当月销售额</span></li>
|
||||
<li>
|
||||
<h2>19%</h2>
|
||||
<span>利润额</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<div class="boxall" style="height:100px">
|
||||
<div class="navboxall"><h1><a href="http://www.anydo.wang" style="color: white">通用大数据可视化展示平台模板</a></h1></div>
|
||||
</div>
|
||||
<div class="boxall" style="height:610px">
|
||||
|
||||
<div class="navboxall" style="overflow: hidden;height: 100%">
|
||||
<div style="width: 120%; height: 120%; position: relative; left: -10%; top: -11%;" id="echart3">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<div class="boxall" style="height:350px">
|
||||
<div class="alltitle">标题样式</div>
|
||||
<div class="navboxall">
|
||||
<table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="col">排名</th>
|
||||
<th scope="col">名称</th>
|
||||
<th scope="col">金额</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>1</span></td>
|
||||
<td>腾讯科技</td>
|
||||
<td>114万<br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>2</span></td>
|
||||
<td>百度公司</td>
|
||||
<td>923823万</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>3</span></td>
|
||||
<td>新浪</td>
|
||||
<td>1240253万</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>4</span></td>
|
||||
<td>网易</td>
|
||||
<td>1.2亿</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>5</span></td>
|
||||
<td>雅虎</td>
|
||||
<td>13423万</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>6</span></td>
|
||||
<td>雅虎</td>
|
||||
<td>13423万</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxall" style="height: 360px">
|
||||
<div class="alltitle">标题样式</div>
|
||||
<div class="navboxall">
|
||||
<table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="col">排名</th>
|
||||
<th scope="col">名称</th>
|
||||
<th scope="col">金额</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>1</span></td>
|
||||
<td>腾讯科技</td>
|
||||
<td>114万<br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>2</span></td>
|
||||
<td>百度公司</td>
|
||||
<td>923823万</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>3</span></td>
|
||||
<td>新浪</td>
|
||||
<td>1240253万</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>4</span></td>
|
||||
<td>网易</td>
|
||||
<td>1.2亿</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>5</span></td>
|
||||
<td>雅虎</td>
|
||||
<td>13423万</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>6</span></td>
|
||||
<td>雅虎</td>
|
||||
<td>13423万</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="clearfix">
|
||||
<li style="width:60%">
|
||||
<div class="boxall" style="height:300px;">
|
||||
<div class="alltitle">标题样式</div>
|
||||
<div class="navboxall " id="echart2" >
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li style="width: 40%">
|
||||
|
||||
<div class="boxall" style="height:300px">
|
||||
<div class="alltitle">标题样式</div>
|
||||
<div class="navboxall" id="echart4"></div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
$('.wrap,.adduser').liMarquee({
|
||||
direction: 'up',//身上滚动
|
||||
runshort: false,//内容不足时不滚动
|
||||
scrollamount: 20//速度
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html style="height:100%; height:100%;">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>www.husonghe.com</title>
|
||||
<style>
|
||||
|
||||
body{ margin:0; padding:0px;font-family:microsoft yahei;background:#003bc9; background: linear-gradient(to bottom right, #003bc9, #023ac2 , #021341); }
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body style="height:100%; height:100%; overflow:hidden;">
|
||||
<canvas id="canvas" width="1920" height="100%"></canvas>
|
||||
<script src="dom01/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -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}});
|
||||
+5
File diff suppressed because one or more lines are too long
@@ -0,0 +1,531 @@
|
||||
$(window).load(function () {
|
||||
$(".loading").fadeOut()
|
||||
})
|
||||
/* */
|
||||
$(function () {
|
||||
echarts_1();
|
||||
echarts_2();
|
||||
echarts_3();
|
||||
echarts_4();
|
||||
|
||||
|
||||
function echarts_1() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(document.getElementById('echart1'));
|
||||
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
series: [{
|
||||
name: '占比情况',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
center: ['50%', '50%'],
|
||||
clockwise: false,
|
||||
data: [ {
|
||||
value: 25,
|
||||
name: '公司1'
|
||||
}, {
|
||||
value: 15,
|
||||
name: '公司2'
|
||||
}, {
|
||||
value: 8,
|
||||
name: '公司3'
|
||||
}],
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.6)',
|
||||
fontSize: 14,
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//borderWidth: 1,
|
||||
//borderColor: '#ffffff',
|
||||
},
|
||||
emphasis: {
|
||||
borderWidth: 0,
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}],
|
||||
color: ['#62c98d','#2f89cf','#4cb9cf'],
|
||||
//backgroundColor: '#fff'
|
||||
};
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function echarts_2() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(document.getElementById('echart2'));
|
||||
var vdata = [
|
||||
[4, 3, 5, 9, 1, 8, 3, 7, 2, 4, 6, 4],
|
||||
[5, 5, 7, 3, 6, 8, 9, 4, 3, 7, 2, 2],
|
||||
];
|
||||
var xdata = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
||||
var ydata = ['计划数量', '销售金额'];
|
||||
var series = [];
|
||||
$.each(vdata, function (index, val) {
|
||||
var series_option = {
|
||||
name: ydata[index],
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {color: ''}
|
||||
},
|
||||
barWidth: '30',
|
||||
data: val
|
||||
};
|
||||
series.push(series_option);
|
||||
})
|
||||
option = {
|
||||
legend: {
|
||||
data: ydata,
|
||||
type: 'scroll',
|
||||
textStyle: {color: "#fff"},
|
||||
top: '0'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
"color": ["#62c98d", "#2f89cf"],
|
||||
grid: {
|
||||
top: '14%',
|
||||
left: '15',
|
||||
right: '35',
|
||||
bottom: '12%',
|
||||
containLabel: true
|
||||
},
|
||||
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
axisLabel: {textStyle: {color: "rgba(255,255,255,.6)",}},
|
||||
axisLine: {lineStyle: { color: 'rgba(255,255,255,.1)'}},
|
||||
data: xdata,
|
||||
}],
|
||||
yAxis: [{
|
||||
name: '',
|
||||
type: 'value',
|
||||
axisTick: {show: false},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#2f2a7a"
|
||||
}
|
||||
}, //x轴线
|
||||
axisLabel: {textStyle: {color: 'rgba(255,255,255,.6)'}},
|
||||
axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},
|
||||
}],
|
||||
"dataZoom": [{
|
||||
"show": true,
|
||||
"height": 12,
|
||||
"xAxisIndex": [
|
||||
0
|
||||
],
|
||||
bottom: 5,
|
||||
"start": 10,
|
||||
"end": 80,
|
||||
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
||||
handleSize: '110%',
|
||||
handleStyle: {
|
||||
color: "#d3dee5",
|
||||
},
|
||||
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
borderColor: "rgba(255,255,255,.3)"
|
||||
|
||||
}],
|
||||
series: series
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
/* */
|
||||
function echarts_3() {
|
||||
var myChart = echarts.init(document.getElementById('echart3'));
|
||||
var geoCoordMap = {
|
||||
'上海': [121.4648,31.2891],
|
||||
'东莞': [113.8953,22.901],
|
||||
'东营': [118.7073,37.5513],
|
||||
'中山': [113.4229,22.478],
|
||||
'临汾': [111.4783,36.1615],
|
||||
'临沂': [118.3118,35.2936],
|
||||
'丹东': [124.541,40.4242],
|
||||
'丽水': [119.5642,28.1854],
|
||||
'乌鲁木齐': [87.9236,43.5883],
|
||||
'佛山': [112.8955,23.1097],
|
||||
'保定': [115.0488,39.0948],
|
||||
'兰州': [103.5901,36.3043],
|
||||
'包头': [110.3467,41.4899],
|
||||
'北京': [116.4551,40.2539],
|
||||
'北海': [109.314,21.6211],
|
||||
'南京': [118.8062,31.9208],
|
||||
'南宁': [108.479,23.1152],
|
||||
'南昌': [116.0046,28.6633],
|
||||
'南通': [121.1023,32.1625],
|
||||
'厦门': [118.1689,24.6478],
|
||||
'台州': [121.1353,28.6688],
|
||||
'合肥': [117.29,32.0581],
|
||||
'呼和浩特': [111.4124,40.4901],
|
||||
'咸阳': [108.4131,34.8706],
|
||||
'哈尔滨': [127.9688,45.368],
|
||||
'唐山': [118.4766,39.6826],
|
||||
'嘉兴': [120.9155,30.6354],
|
||||
'大同': [113.7854,39.8035],
|
||||
'大连': [122.2229,39.4409],
|
||||
'天津': [117.4219,39.4189],
|
||||
'太原': [112.3352,37.9413],
|
||||
'威海': [121.9482,37.1393],
|
||||
'宁波': [121.5967,29.6466],
|
||||
'宝鸡': [107.1826,34.3433],
|
||||
'宿迁': [118.5535,33.7775],
|
||||
'常州': [119.4543,31.5582],
|
||||
'广州': [113.5107,23.2196],
|
||||
'廊坊': [116.521,39.0509],
|
||||
'延安': [109.1052,36.4252],
|
||||
'张家口': [115.1477,40.8527],
|
||||
'徐州': [117.5208,34.3268],
|
||||
'德州': [116.6858,37.2107],
|
||||
'惠州': [114.6204,23.1647],
|
||||
'成都': [103.9526,30.7617],
|
||||
'扬州': [119.4653,32.8162],
|
||||
'承德': [117.5757,41.4075],
|
||||
'拉萨': [91.1865,30.1465],
|
||||
'无锡': [120.3442,31.5527],
|
||||
'日照': [119.2786,35.5023],
|
||||
'昆明': [102.9199,25.4663],
|
||||
'杭州': [119.5313,29.8773],
|
||||
'枣庄': [117.323,34.8926],
|
||||
'柳州': [109.3799,24.9774],
|
||||
'株洲': [113.5327,27.0319],
|
||||
'武汉': [114.3896,30.6628],
|
||||
'汕头': [117.1692,23.3405],
|
||||
'江门': [112.6318,22.1484],
|
||||
'沈阳': [123.1238,42.1216],
|
||||
'沧州': [116.8286,38.2104],
|
||||
'河源': [114.917,23.9722],
|
||||
'泉州': [118.3228,25.1147],
|
||||
'泰安': [117.0264,36.0516],
|
||||
'泰州': [120.0586,32.5525],
|
||||
'济南': [117.1582,36.8701],
|
||||
'济宁': [116.8286,35.3375],
|
||||
'海口': [110.3893,19.8516],
|
||||
'淄博': [118.0371,36.6064],
|
||||
'淮安': [118.927,33.4039],
|
||||
'深圳': [114.5435,22.5439],
|
||||
'清远': [112.9175,24.3292],
|
||||
'温州': [120.498,27.8119],
|
||||
'渭南': [109.7864,35.0299],
|
||||
'湖州': [119.8608,30.7782],
|
||||
'湘潭': [112.5439,27.7075],
|
||||
'滨州': [117.8174,37.4963],
|
||||
'潍坊': [119.0918,36.524],
|
||||
'烟台': [120.7397,37.5128],
|
||||
'玉溪': [101.9312,23.8898],
|
||||
'珠海': [113.7305,22.1155],
|
||||
'盐城': [120.2234,33.5577],
|
||||
'盘锦': [121.9482,41.0449],
|
||||
'石家庄': [114.4995,38.1006],
|
||||
'福州': [119.4543,25.9222],
|
||||
'秦皇岛': [119.2126,40.0232],
|
||||
'绍兴': [120.564,29.7565],
|
||||
'聊城': [115.9167,36.4032],
|
||||
'肇庆': [112.1265,23.5822],
|
||||
'舟山': [122.2559,30.2234],
|
||||
'苏州': [120.6519,31.3989],
|
||||
'莱芜': [117.6526,36.2714],
|
||||
'菏泽': [115.6201,35.2057],
|
||||
'营口': [122.4316,40.4297],
|
||||
'葫芦岛': [120.1575,40.578],
|
||||
'衡水': [115.8838,37.7161],
|
||||
'衢州': [118.6853,28.8666],
|
||||
'西宁': [101.4038,36.8207],
|
||||
'西安': [109.1162,34.2004],
|
||||
'贵阳': [106.6992,26.7682],
|
||||
'连云港': [119.1248,34.552],
|
||||
'邢台': [114.8071,37.2821],
|
||||
'邯郸': [114.4775,36.535],
|
||||
'郑州': [113.4668,34.6234],
|
||||
'鄂尔多斯': [108.9734,39.2487],
|
||||
'重庆': [107.7539,30.1904],
|
||||
'金华': [120.0037,29.1028],
|
||||
'铜川': [109.0393,35.1947],
|
||||
'银川': [106.3586,38.1775],
|
||||
'镇江': [119.4763,31.9702],
|
||||
'长春': [125.8154,44.2584],
|
||||
'长沙': [113.0823,28.2568],
|
||||
'长治': [112.8625,36.4746],
|
||||
'阳泉': [113.4778,38.0951],
|
||||
'青岛': [120.4651,36.3373],
|
||||
'韶关': [113.7964,24.7028]
|
||||
};
|
||||
var BJData = [
|
||||
[{name:'北京'}, {name:'上海',value:95}],
|
||||
[{name:'北京'}, {name:'广州',value:90}],
|
||||
[{name:'北京'}, {name:'大连',value:80}],
|
||||
[{name:'北京'}, {name:'南宁',value:70}],
|
||||
[{name:'北京'}, {name:'南昌',value:60}],
|
||||
[{name:'北京'}, {name:'拉萨',value:50}],
|
||||
[{name:'北京'}, {name:'长春',value:40}],
|
||||
[{name:'北京'}, {name:'包头',value:30}],
|
||||
[{name:'北京'}, {name:'重庆',value:20}],
|
||||
[{name:'北京'}, {name:'常州',value:10}]
|
||||
];
|
||||
|
||||
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
|
||||
|
||||
var convertData = function (data) {
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var dataItem = data[i];
|
||||
var fromCoord = geoCoordMap[dataItem[0].name];
|
||||
var toCoord = geoCoordMap[dataItem[1].name];
|
||||
if (fromCoord && toCoord) {
|
||||
res.push([{
|
||||
coord: fromCoord
|
||||
}, {
|
||||
coord: toCoord
|
||||
}]);
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
var color = ['#fff'];
|
||||
var series = [];
|
||||
[['北京', BJData]].forEach(function (item, i) {
|
||||
series.push({
|
||||
name: item[0] + '',
|
||||
type: 'lines',
|
||||
// zlevel: 1,
|
||||
effect: {
|
||||
show: true,
|
||||
period: 6,
|
||||
trailLength: 0.7,
|
||||
color: '#fff',
|
||||
symbolSize: 3
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[i],
|
||||
width: 0,
|
||||
|
||||
curveness: 0.2
|
||||
}
|
||||
},
|
||||
data: convertData(item[1])
|
||||
},
|
||||
{
|
||||
name: item[0] ,
|
||||
type: 'lines',
|
||||
zlevel: 2,
|
||||
effect: {
|
||||
show: true,
|
||||
period: 6,
|
||||
trailLength: 0,
|
||||
symbol: planePath,
|
||||
symbolSize: 15
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[i],
|
||||
width: 1,
|
||||
opacity: 0.4,
|
||||
curveness: 0.2
|
||||
}
|
||||
},
|
||||
data: convertData(item[1])
|
||||
},
|
||||
{
|
||||
name: item[0] ,
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
zlevel: 2,
|
||||
rippleEffect: {
|
||||
brushType: 'stroke'
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
fontSize:16,
|
||||
color:'#fff',
|
||||
position: 'right',
|
||||
formatter: '{b}'
|
||||
}
|
||||
},
|
||||
symbolSize:'10',
|
||||
/**symbolSize: function (val) {
|
||||
return val[2] / 8;
|
||||
},**/
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: color[i]
|
||||
}
|
||||
},
|
||||
data: item[1].map(function (dataItem) {
|
||||
return {
|
||||
name: dataItem[1].name,
|
||||
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
|
||||
};
|
||||
})
|
||||
});
|
||||
});
|
||||
option = {
|
||||
// backgroundColor: '#404a59',
|
||||
title : {
|
||||
text: '全国发展路线图',
|
||||
subtext: '副标题，不需要主删除此行',
|
||||
left: 'center',
|
||||
top: '13%',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
geo: {
|
||||
map: 'china',
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
roam: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#2a91e2',
|
||||
borderColor: '#0165b4'
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#306de8'
|
||||
}
|
||||
}
|
||||
},
|
||||
series:series
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
function echarts_4() {
|
||||
var myChart = echarts.init(document.getElementById('echart4'));
|
||||
|
||||
option = {
|
||||
tooltip: {
|
||||
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
formatter: '{b}:<br/> 完成率{c}%'
|
||||
},
|
||||
|
||||
grid: {
|
||||
left: '0',
|
||||
right: '20',
|
||||
top:'10',
|
||||
bottom: '20',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.6)'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||||
}],
|
||||
yAxis: [{
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.6)'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,.1)'
|
||||
}
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: '完成率',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3
|
||||
}
|
||||
},
|
||||
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(98, 201, 141, 0.5)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(98, 201, 141, 0.1)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#4cb9cf',
|
||||
borderColor: 'rgba(98, 201, 141,0.27)',
|
||||
borderWidth: 12
|
||||
}
|
||||
},
|
||||
data: [91, 60, 70, 54, 80, 40, 99, 33, 80, 20, 60, 10]
|
||||
}]
|
||||
};
|
||||
/* */
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize",function(){
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
})
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 701 B |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Reference in New Issue
Block a user