新增大屏模块
Administrator
parent
9059c5dff6
commit
e9d4d61c55
|
|
@ -30,7 +30,7 @@ public class PlanDataController extends BaseController {
|
|||
@ApiOperation("工单计划数字化看板")
|
||||
@GetMapping("/plan-ui")
|
||||
public String welcomeUI(Model model) {
|
||||
return "digitization/plandg";
|
||||
return "digitization/planDemo";
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,200 @@
|
|||
@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: "微软雅黑";}
|
||||
@font-face{font-family:electronicFont;src:url(../font/DS-DIGIT.TTF)}
|
||||
body{ background:#000d4a url(../image/digitization.jpg) center top; background-size:cover;color:#666;font-size: .1rem;}
|
||||
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;}
|
||||
/*谷哥滚动条样式*/
|
||||
|
||||
::-webkit-scrollbar {width:5px;height:5px;position:absolute}
|
||||
::-webkit-scrollbar-thumb {background-color:#5bc0de}
|
||||
::-webkit-scrollbar-track {background-color:#ddd}
|
||||
|
||||
/***/
|
||||
.canvas{position: absolute; width:100%; left: 0; top: 0; height: 99%; z-index: 1;}
|
||||
|
||||
.allnav{height: calc(100% - 30px);}
|
||||
.loading{position:fixed; left:0; top:0; font-size:18px; z-index:100000000;width:100%; height:100%; background:#1a1a1c; text-align:center;}
|
||||
.loadbox{position:absolute; width:160px;height:150px; color: #aaa; left:50%; top:50%; margin-top:-100px; margin-left:-75px;}
|
||||
.loadbox img{ margin:10px auto; display:block; width:40px;}
|
||||
|
||||
.copyright{ background:rgba(19,31,64,.32); border: 1px solid rgba(255,255,255,.05); line-height:.5rem; text-align: center; padding-right: 15px; bottom: 0; color:rgba(255,255,255,.7); font-size: .16rem; }
|
||||
|
||||
.head{ height:1.05rem; background: url(../image/head_bg.png) no-repeat center center; background-size: 100% 100%; position: relative; z-index: 100;}
|
||||
.head h1{ color:#fff; text-align: center; font-size: .4rem; line-height:.8rem;}
|
||||
.head h1 img{ width:1.5rem; display: inline-block; vertical-align: middle; margin-right: .2rem}
|
||||
.weather{ position:absolute; right:.3rem; top:0; line-height: .75rem;}
|
||||
.weather img{ width:.37rem; display: inline-block; vertical-align: middle;}
|
||||
.weather span{color:rgba(255,255,255,.7); font-size: .18rem; padding-right: .1rem;}
|
||||
.mainbox{ padding:.1rem .1rem 0rem .1rem;}
|
||||
.mainbox>ul{}
|
||||
.mainbox>ul>li{ float: left; padding: 0 .1rem}
|
||||
|
||||
.mainbox>ul>li{ width: 30%}
|
||||
.mainbox>ul>li:nth-child(2){ width: 40%;padding: 0}
|
||||
|
||||
.boxall{ border: 1px solid rgba(25,186,139,.17); padding:0 .2rem .4rem .15rem; background: rgba(255,255,255,.04) url(../image/line.png); background-size: 100% auto; position: relative; margin-bottom: .15rem; z-index: 10;}
|
||||
.boxall:before,
|
||||
.boxall:after{ position:absolute; width: .1rem; height: .1rem; content: ""; border-top: 2px solid #02a6b5; top: 0;}
|
||||
.boxall:before,.boxfoot:before{border-left: 2px solid #02a6b5;left: 0;}
|
||||
.boxall:after,.boxfoot:after{border-right: 2px solid #02a6b5; right: 0;}
|
||||
.alltitle{ font-size:.2rem; color:#fff; text-align: center; line-height: .5rem;}
|
||||
|
||||
.boxfoot{ position:absolute; bottom: 0; width: 100%; left: 0;}
|
||||
.boxfoot:before,
|
||||
.boxfoot:after{ position:absolute; width: .1rem; height: .1rem; content: "";border-bottom: 2px solid #02a6b5; bottom: 0;}
|
||||
|
||||
.bar{background:rgba(101,132,226,.1); padding: .15rem;}
|
||||
.barbox li,.barbox2 li{ width:50%; text-align: center; position: relative; z-index: 100;}
|
||||
.barbox:before,
|
||||
.barbox:after{ position:absolute; width: .3rem; height: .1rem; content: ""; }
|
||||
.barbox:before{border-left: 2px solid #02a6b5;left: 0;border-top: 2px solid #02a6b5; }
|
||||
.barbox:after{border-right: 2px solid #02a6b5; right: 0; bottom: 0;border-bottom: 2px solid #02a6b5; }
|
||||
|
||||
.barbox li:first-child:before{ position:absolute; content: ""; height:50%; width: 1px; background: rgba(255,255,255,.2); right: 0; top: 25%;}
|
||||
|
||||
.barbox{ border: 1px solid rgba(25,186,139,.17); position: relative;}
|
||||
.barbox li{ font-size: .7rem; color: #ffeb7b; padding: .05rem 0; font-family:electronicFont; font-weight: bold;}
|
||||
.barbox2 li{ font-size: .19rem; color:rgba(255,255,255,.7); padding-top: .1rem;}
|
||||
|
||||
.map{ position:relative; height: 7.2rem; z-index: 9;}
|
||||
.map4{ width: 200%; height:7rem; position: relative; left: -50%; top: 4%; margin-top: .2rem; z-index: 5;}
|
||||
.map1,.map2,.map3{ position:absolute; opacity: .5}
|
||||
.map1{ width:6.43rem; z-index: 2;top:.45rem; left: .7rem; animation: myfirst2 15s infinite linear;}
|
||||
.map2{ width:5.66rem; top:.85rem; left:1.2rem; z-index: 3; opacity: 0.2; animation: myfirst 10s infinite linear;}
|
||||
.map3{ width:5.18rem; top:1.07rem; left: 1.4rem; z-index: 1;}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.tabs { text-align: center; padding: .1rem 0 0 0;}
|
||||
.tabs a {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: 1px;
|
||||
padding:.05rem .2rem;
|
||||
color: #898989;
|
||||
transition: all .3s ease-out 0s;
|
||||
font-size: 14px;
|
||||
}
|
||||
.tabs li{ display:inline-block;}
|
||||
.tabs a:after {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
background-color: rgba(255,255,255,.1);
|
||||
content: '';
|
||||
margin-left:0; right:-1px; margin-top: 7px;
|
||||
|
||||
|
||||
}
|
||||
.tabs li a.active {border: 1px solid rgba(25,186,139,.17); background: rgba(255,255,255,.05); color:#fff;}
|
||||
|
||||
.tit02{ text-align:center; margin: .1rem 0; position: relative}
|
||||
.tit02 span{border: 1px solid rgba(25,186,139,.17); letter-spacing: 2px; padding: .01rem .2rem; background: rgba(255,255,255,.05); font-size: .18rem; color: #49bcf7;}
|
||||
.tit02:before,.tit02:after{ position:absolute; width:26%; height: 1px;background: rgba(25,186,139,.2); content: ""; top: .12rem;}
|
||||
.tit02:after{ right:0;}
|
||||
.tit02:before{ left:0;}
|
||||
|
||||
.wrap{ height:2.54rem; overflow: hidden;}
|
||||
.wrap li{ line-height:.42rem; height:.42rem; font-size: .18rem; text-indent: .24rem; margin-bottom: .1rem; }
|
||||
.wrap li p{border: 1px solid rgba(25,186,139,.17);color: rgba(255,255,255,.6); }
|
||||
.sy{ float:left; width: 33%; height:95%; margin-top: .25rem;}
|
||||
|
||||
|
||||
.adduser{ height:1.5rem; overflow: hidden;}
|
||||
.adduser li{height:.5rem;}
|
||||
.adduser img{ width: .40rem; border-radius: .5rem; margin-right: .1rem; display: inline-block; vertical-align: middle;}
|
||||
.adduser span{ line-height:.5rem; font-size: .18rem;color: rgba(255,255,255,.6); }
|
||||
|
||||
.sycm ul{ margin-left:-.5rem;margin-right:-.5rem; padding: .16rem 0;}
|
||||
.sycm li{ float: left; width: 33.33%; text-align: center; position: relative}
|
||||
.sycm li:before{ position:absolute; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
|
||||
.sycm li:last-child:before{ width: 0;}
|
||||
|
||||
.sycm li h2{ font-size:.3rem; color: #c5ccff;}
|
||||
.sycm li span{ font-size:.18rem; color: #fff; opacity: .5;}
|
||||
|
||||
@keyframes myfirst2
|
||||
{
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(359deg);}
|
||||
}
|
||||
|
||||
@keyframes myfirst
|
||||
{
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(-359deg);}
|
||||
}
|
||||
|
||||
|
||||
/*Plugin CSS*/
|
||||
.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;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 252 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 791 KiB After Width: | Height: | Size: 233 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
|
|
@ -0,0 +1,303 @@
|
|||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(document.getElementById('map_1'));
|
||||
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 SHData = [
|
||||
[{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 GZData = [
|
||||
[{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 = ['#a6c84c', '#ffa022', '#46bee9'];
|
||||
var series = [];
|
||||
[['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) {
|
||||
series.push({
|
||||
name: item[0] + ' Top10',
|
||||
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] + ' Top10',
|
||||
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] + ' Top10',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
zlevel: 2,
|
||||
rippleEffect: {
|
||||
brushType: 'stroke'
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
formatter: '{b}'
|
||||
}
|
||||
},
|
||||
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',
|
||||
textStyle : {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 'bottom',
|
||||
left: 'right',
|
||||
data:['北京 Top10', '上海 Top10', '广州 Top10'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
selectedMode: 'single'
|
||||
},
|
||||
geo: {
|
||||
map: 'china',
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
roam: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#323c48',
|
||||
borderColor: '#404a59'
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#2a333d'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: series
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,850 @@
|
|||
$(function () {
|
||||
var color=['#F35331','#2499F8','#3DF098','#33B734'];
|
||||
//订单完成情况螺旋图
|
||||
var yearPlanData=[];
|
||||
var yearOrderData=[];
|
||||
var differenceData=[];
|
||||
var visibityData=[];
|
||||
var xAxisData=[];
|
||||
|
||||
for(var i=0;i<12;i++)
|
||||
{
|
||||
yearPlanData.push(Math.round(Math.random()*900)+100);
|
||||
yearOrderData.push(Math.round(Math.random()*yearPlanData[i]));
|
||||
differenceData.push(yearPlanData[i]-yearOrderData[i]);
|
||||
visibityData.push(yearOrderData[i]);
|
||||
xAxisData.push((i+1).toString()+"月");
|
||||
}
|
||||
orderStatus();
|
||||
echarts_2();
|
||||
echarts_4();
|
||||
echarts_31();
|
||||
echarts_32();
|
||||
echarts_33();
|
||||
echarts_5();
|
||||
echarts_6();
|
||||
|
||||
function orderStatus() {
|
||||
|
||||
orderStatus= echarts.init(document.getElementById('orderStatus'));
|
||||
orderStatus_option={
|
||||
title :{show:false},
|
||||
tooltip : {
|
||||
trigger: 'axis',
|
||||
formatter: function (params){
|
||||
return params[0].name + '<br/>'
|
||||
+ params[0].seriesName + ' : ' + params[0].value + '<br/>'
|
||||
+ params[1].seriesName + ' : ' + params[1].value + '<br/>'
|
||||
+'完成率：'
|
||||
+ (params[0].value > 0 ? (params[1].value/params[0].value*100).toFixed(2)+'%' : '-')
|
||||
+ '<br/>'
|
||||
},
|
||||
textStyle: {
|
||||
color: '#FFF',
|
||||
fontSize:24
|
||||
}
|
||||
},
|
||||
toolbox: {show:false},
|
||||
legend:{
|
||||
top: 'top',
|
||||
textStyle: {
|
||||
color: '#B7E2FF',
|
||||
fontSize:24,
|
||||
fontFamily:'微软雅黑'
|
||||
},
|
||||
data:['计划生产','已接订单']
|
||||
},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#B7E1FF',
|
||||
fontSize:24
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#09F'
|
||||
}
|
||||
},
|
||||
axisTick:{
|
||||
lineStyle:{
|
||||
color:'#09F'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
inverse: false,
|
||||
splitArea: {show: false},
|
||||
axisLine: {show: false},
|
||||
axisTick: {show: false},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#B7E1FF',
|
||||
fontSize:24,
|
||||
fontFamily:'Arial',
|
||||
}
|
||||
},
|
||||
splitLine :{
|
||||
lineStyle:{
|
||||
color:'#09F'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 100
|
||||
},
|
||||
series : [{
|
||||
name:'计划生产',
|
||||
type:'line',
|
||||
smooth :true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
showAllSymbol : true,
|
||||
color:color[1],
|
||||
data:yearPlanData
|
||||
},
|
||||
{
|
||||
name:'已接订单',
|
||||
type:'line',
|
||||
smooth :true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
showAllSymbol : true,
|
||||
color:'#F90',
|
||||
itemStyle:{
|
||||
normal:{
|
||||
lineStyle: {
|
||||
width:2
|
||||
}
|
||||
}
|
||||
},
|
||||
data:yearOrderData
|
||||
},
|
||||
{
|
||||
name:'不可见',
|
||||
type:'bar',
|
||||
stack: '1',
|
||||
barWidth: 1,
|
||||
itemStyle:{
|
||||
normal:{
|
||||
color:'rgba(0,0,0,0)'
|
||||
},
|
||||
emphasis:{
|
||||
color:'rgba(0,0,0,0)'
|
||||
}
|
||||
},
|
||||
data:visibityData
|
||||
},
|
||||
{
|
||||
name:'变化',
|
||||
type:'bar',
|
||||
stack: '1',
|
||||
barWidth: 1,
|
||||
color:'#B7E1FF',
|
||||
data:differenceData
|
||||
}
|
||||
]
|
||||
}
|
||||
orderStatus.setOption(orderStatus_option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function echarts_2() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(document.getElementById('echart2'));
|
||||
|
||||
option = {
|
||||
// backgroundColor: '#00265f',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {type: 'shadow'}
|
||||
},
|
||||
grid: {
|
||||
left: '0%',
|
||||
top: '10px',
|
||||
right: '0%',
|
||||
bottom: '4%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽'],
|
||||
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: '12',
|
||||
},
|
||||
},
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
//formatter: '{value} %'
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: '12',
|
||||
},
|
||||
},
|
||||
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: [
|
||||
{
|
||||
|
||||
type: 'bar',
|
||||
data: [1500, 1200, 600, 200, 300, 300, 900],
|
||||
barWidth: '35%', //柱子宽度
|
||||
// barGap: 1, //柱子之间间距
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#27d08a',
|
||||
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'
|
||||
}
|
||||
},
|
||||
|
||||
grid: {
|
||||
left: '0%',
|
||||
top: '10px',
|
||||
right: '0%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽', '四川'],
|
||||
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: '12',
|
||||
},
|
||||
},
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
//formatter: '{value} %'
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: '12',
|
||||
},
|
||||
},
|
||||
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: [{
|
||||
type: 'bar',
|
||||
data: [2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10],
|
||||
barWidth: '35%', //柱子宽度
|
||||
// barGap: 1, //柱子之间间距
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#2f89cf',
|
||||
opacity: 1,
|
||||
barBorderRadius: 5,
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
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: {
|
||||
lineStyle: {
|
||||
color: '#dddc6b'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: '0%',
|
||||
data: ['安卓', 'IOS'],
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.5)',
|
||||
fontSize: '12',
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '10',
|
||||
top: '30',
|
||||
right: '10',
|
||||
bottom: '10',
|
||||
containLabel: true
|
||||
},
|
||||
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,.2)'
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']
|
||||
|
||||
}, {
|
||||
|
||||
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: 12,
|
||||
},
|
||||
},
|
||||
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,.1)'
|
||||
}
|
||||
}
|
||||
}],
|
||||
series: [
|
||||
{
|
||||
name: '安卓',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
|
||||
normal: {
|
||||
color: '#0184d5',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(1, 132, 213, 0.4)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(1, 132, 213, 0.1)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#0184d5',
|
||||
borderColor: 'rgba(221, 220, 107, .1)',
|
||||
borderWidth: 12
|
||||
}
|
||||
},
|
||||
data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4, 3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]
|
||||
|
||||
},
|
||||
{
|
||||
name: 'IOS',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
|
||||
normal: {
|
||||
color: '#00d887',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 216, 135, 0.4)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(0, 216, 135, 0.1)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#00d887',
|
||||
borderColor: 'rgba(221, 220, 107, .1)',
|
||||
borderWidth: 12
|
||||
}
|
||||
},
|
||||
data: [5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1, 4]
|
||||
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function echarts_6() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(document.getElementById('echart6'));
|
||||
|
||||
var dataStyle = {
|
||||
normal: {
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
//shadowBlur: 40,
|
||||
//shadowColor: 'rgba(40, 40, 40, 1)',
|
||||
}
|
||||
};
|
||||
var placeHolderStyle = {
|
||||
normal: {
|
||||
color: 'rgba(255,255,255,.05)',
|
||||
label: {show: false,},
|
||||
labelLine: {show: false}
|
||||
},
|
||||
emphasis: {
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}
|
||||
};
|
||||
option = {
|
||||
color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
|
||||
tooltip: {
|
||||
show: true,
|
||||
formatter: "{a} : {c} "
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
itemGap: 12,
|
||||
bottom: '3%',
|
||||
|
||||
data: ['浙江', '上海', '广东', '北京', '深圳'],
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.6)',
|
||||
}
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '浙江',
|
||||
type: 'pie',
|
||||
clockWise: false,
|
||||
center: ['50%', '42%'],
|
||||
radius: ['59%', '70%'],
|
||||
itemStyle: dataStyle,
|
||||
hoverAnimation: false,
|
||||
data: [{
|
||||
value: 80,
|
||||
name: '01'
|
||||
}, {
|
||||
value: 20,
|
||||
name: 'invisible',
|
||||
tooltip: {show: false},
|
||||
itemStyle: placeHolderStyle
|
||||
}]
|
||||
},
|
||||
{
|
||||
name: '上海',
|
||||
type: 'pie',
|
||||
clockWise: false,
|
||||
center: ['50%', '42%'],
|
||||
radius: ['49%', '60%'],
|
||||
itemStyle: dataStyle,
|
||||
hoverAnimation: false,
|
||||
data: [{
|
||||
value: 70,
|
||||
name: '02'
|
||||
}, {
|
||||
value: 30,
|
||||
name: 'invisible',
|
||||
tooltip: {show: false},
|
||||
itemStyle: placeHolderStyle
|
||||
}]
|
||||
},
|
||||
{
|
||||
name: '广东',
|
||||
type: 'pie',
|
||||
clockWise: false,
|
||||
hoverAnimation: false,
|
||||
center: ['50%', '42%'],
|
||||
radius: ['39%', '50%'],
|
||||
itemStyle: dataStyle,
|
||||
data: [{
|
||||
value: 65,
|
||||
name: '03'
|
||||
}, {
|
||||
value: 35,
|
||||
name: 'invisible',
|
||||
tooltip: {show: false},
|
||||
itemStyle: placeHolderStyle
|
||||
}]
|
||||
},
|
||||
{
|
||||
name: '北京',
|
||||
type: 'pie',
|
||||
clockWise: false,
|
||||
hoverAnimation: false,
|
||||
center: ['50%', '42%'],
|
||||
radius: ['29%', '40%'],
|
||||
itemStyle: dataStyle,
|
||||
data: [{
|
||||
value: 60,
|
||||
name: '04'
|
||||
}, {
|
||||
value: 40,
|
||||
name: 'invisible',
|
||||
tooltip: {show: false},
|
||||
itemStyle: placeHolderStyle
|
||||
}]
|
||||
},
|
||||
{
|
||||
name: '深圳',
|
||||
type: 'pie',
|
||||
clockWise: false,
|
||||
hoverAnimation: false,
|
||||
center: ['50%', '42%'],
|
||||
radius: ['20%', '30%'],
|
||||
itemStyle: dataStyle,
|
||||
data: [{
|
||||
value: 50,
|
||||
name: '05'
|
||||
}, {
|
||||
value: 50,
|
||||
name: 'invisible',
|
||||
tooltip: {show: false},
|
||||
itemStyle: placeHolderStyle
|
||||
}]
|
||||
},]
|
||||
};
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function echarts_31() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(document.getElementById('fb1'));
|
||||
option = {
|
||||
|
||||
title: [{
|
||||
text: '年龄分布',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '16'
|
||||
}
|
||||
|
||||
}],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)",
|
||||
position: function (p) { //其中p为当前鼠标的位置
|
||||
return [p[0] + 10, p[1] - 10];
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
|
||||
top: '70%',
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
data: ['0岁以下', '20-29岁', '30-39岁', '40-49岁', '50岁以上'],
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.5)',
|
||||
fontSize: '12',
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '年龄分布',
|
||||
type: 'pie',
|
||||
center: ['50%', '42%'],
|
||||
radius: ['40%', '60%'],
|
||||
color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
|
||||
label: {show: false},
|
||||
labelLine: {show: false},
|
||||
data: [
|
||||
{value: 1, name: '0岁以下'},
|
||||
{value: 4, name: '20-29岁'},
|
||||
{value: 2, name: '30-39岁'},
|
||||
{value: 2, name: '40-49岁'},
|
||||
{value: 1, name: '50岁以上'},
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function echarts_32() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(document.getElementById('fb2'));
|
||||
option = {
|
||||
|
||||
title: [{
|
||||
text: '职业分布',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '16'
|
||||
}
|
||||
|
||||
}],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)",
|
||||
position: function (p) { //其中p为当前鼠标的位置
|
||||
return [p[0] + 10, p[1] - 10];
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
|
||||
top: '70%',
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
data: ['电子商务', '教育', 'IT/互联网', '金融', '学生', '其他'],
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.5)',
|
||||
fontSize: '12',
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '年龄分布',
|
||||
type: 'pie',
|
||||
center: ['50%', '42%'],
|
||||
radius: ['40%', '60%'],
|
||||
color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
|
||||
label: {show: false},
|
||||
labelLine: {show: false},
|
||||
data: [
|
||||
{value: 5, name: '电子商务'},
|
||||
{value: 1, name: '教育'},
|
||||
{value: 6, name: 'IT/互联网'},
|
||||
{value: 2, name: '金融'},
|
||||
{value: 1, name: '学生'},
|
||||
{value: 1, name: '其他'},
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function echarts_33() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(document.getElementById('fb3'));
|
||||
option = {
|
||||
title: [{
|
||||
text: '兴趣分布',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '16'
|
||||
}
|
||||
|
||||
}],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)",
|
||||
position: function (p) { //其中p为当前鼠标的位置
|
||||
return [p[0] + 10, p[1] - 10];
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: '70%',
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
data: ['汽车', '旅游', '财经', '教育', '软件', '其他'],
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.5)',
|
||||
fontSize: '12',
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '兴趣分布',
|
||||
type: 'pie',
|
||||
center: ['50%', '42%'],
|
||||
radius: ['40%', '60%'],
|
||||
color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
|
||||
label: {show: false},
|
||||
labelLine: {show: false},
|
||||
data: [
|
||||
{value: 2, name: '汽车'},
|
||||
{value: 3, name: '旅游'},
|
||||
{value: 1, name: '财经'},
|
||||
{value: 4, name: '教育'},
|
||||
{value: 8, name: '软件'},
|
||||
{value: 1, name: '其他'},
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 701 B |
Binary file not shown.
|
After Width: | Height: | Size: 302 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -0,0 +1,124 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>index</title>
|
||||
<script type="text/javascript" src="${request.contextPath}/lib/jquery/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="${request.contextPath}/css/planDemo.css">
|
||||
<script type="text/javascript" src="${request.contextPath}/lib/echarts/echarts.min.js"></script>
|
||||
<script type="text/javascript" src="${request.contextPath}/js/mes/digitization/area_echarts.js"></script>
|
||||
</head>
|
||||
<script>
|
||||
$(window).load(function () {
|
||||
$(".loading").fadeOut()
|
||||
})
|
||||
|
||||
/****/
|
||||
$(document).ready(function () {
|
||||
var whei = $(window).width()
|
||||
$("html").css({fontSize: whei / 20})
|
||||
$(window).resize(function () {
|
||||
var whei = $(window).width()
|
||||
$("html").css({fontSize: whei / 20})
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="loading">
|
||||
<div class="loadbox"><img src="${request.contextPath}/picture/loading.gif"> 页面加载中...</div>
|
||||
</div>
|
||||
<div class="head">
|
||||
<h1>大数据可视化展板通用模板</h1>
|
||||
<div class="weather"><!--<img src="picture/weather.png"><span>多云转小雨</span>--><span id="showTime"></span></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>
|
||||
<div class="mainbox">
|
||||
<ul class="clearfix">
|
||||
<li>
|
||||
<div class="boxall" style="height: 3.2rem">
|
||||
<div class="alltitle">模块标题样式</div>
|
||||
<div class="allnav" id="orderStatus"></div>
|
||||
<div class="boxfoot"></div>
|
||||
</div>
|
||||
<div class="boxall" style="height: 3.2rem">
|
||||
<div class="alltitle">模块标题样式</div>
|
||||
<div class="allnav" id="echart2"></div>
|
||||
<div class="boxfoot"></div>
|
||||
</div>
|
||||
<div class="boxall" style="height: 3.2rem">
|
||||
<div style="height:100%; width: 100%;">
|
||||
<div class="sy" id="fb1"></div>
|
||||
<div class="sy" id="fb2"></div>
|
||||
<div class="sy" id="fb3"></div>
|
||||
</div>
|
||||
<div class="boxfoot">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="bar">
|
||||
<div class="barbox">
|
||||
<ul class="clearfix">
|
||||
<li class="pulll_left counter">12581189</li>
|
||||
<li class="pulll_left counter">3912410</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="barbox2">
|
||||
<ul class="clearfix">
|
||||
<li class="pulll_left">真香</li>
|
||||
<li class="pulll_left">真香</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map">
|
||||
<div class="map1"><img src="${request.contextPath}/picture/lbx.png"></div>
|
||||
<div class="map2"><img src="${request.contextPath}/picture/jt.png"></div>
|
||||
<div class="map3"><img src="${request.contextPath}/picture/map.png"></div>
|
||||
<div class="map4" id="map_1"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="boxall" style="height:3.4rem">
|
||||
<div class="alltitle">模块标题样式</div>
|
||||
<div class="allnav" id="echart4"></div>
|
||||
<div class="boxfoot"></div>
|
||||
</div>
|
||||
<div class="boxall" style="height: 3.2rem">
|
||||
<div class="alltitle">模块标题样式</div>
|
||||
<div class="allnav" id="echart5"></div>
|
||||
<div class="boxfoot"></div>
|
||||
</div>
|
||||
<div class="boxall" style="height: 3rem">
|
||||
<div class="alltitle">模块标题样式</div>
|
||||
<div class="allnav" id="echart6"></div>
|
||||
<div class="boxfoot"></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="back"></div>
|
||||
<script type="text/javascript" src="${request.contextPath}/js/mes/digitization/js.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue