From 3b2bc48576c9954f977d4fcff35c7c2f1aa1adda Mon Sep 17 00:00:00 2001
From: YL <YL@LAPTOP-SE03PLUR>
Date: 星期一, 17 五月 2021 08:41:33 +0800
Subject: [PATCH] 生产计划看板页面
---
HDMap.html | 193 +++++++++++++++++++++++------------------------
1 files changed, 94 insertions(+), 99 deletions(-)
diff --git a/HDMap.html b/HDMap.html
index a7851a6..93725fe 100644
--- a/HDMap.html
+++ b/HDMap.html
@@ -13,12 +13,12 @@
body {
background: #001123;
}
-
+
.left .shuju_box .shuju {
width: 121px;
height: 100px
}
-
+
.left,
.right {
top: 320px
@@ -27,7 +27,7 @@
</head>
<body>
-
+
<div style="text-align: center;">
<div class="shuju_box clearfix">
<div class="shuju shuju1">
@@ -88,18 +88,18 @@
</div>
</div>
</div>
-
+
<div class="map2" id="map_1" style="width: 100%;">
-
+
</div>
-
+
<div id="zzt" class="left" style="width:355px;height: 355px;">
-
+
<h2>鏌辩姸鍥惧瓨鏀惧湴鏂�</h2>
-
+
</div>
-
-
+
+
</body>
</html>
@@ -107,44 +107,39 @@
<script src="js/jquery.min.js"></script>
<script src='js/echarts.min.js'></script>
<script>
+ var ss=[];
+ var aa=[];
+ var bb=[];
$("#map_1").height($(window).height() - 0);
window.onload = function () {
//$(".shuju_box").width($(".shuju").outerWidth(true)*$(".shuju").length)
-
+
}
var countdata;
- function MapTabledata() {
- $.ajax({
- url: "http://localhost:12298/api/loaddata/MapTableData",
- dataType: "JSON",
- async: false,//浣跨敤鍚屾鐨勬柟寮�,true涓哄紓姝ユ柟寮�
- type: "Get",
- success: function (data) {
-
- console.log("鍦板浘琛ㄥご鏁版嵁" + data.data[0][0]["HValue"]);
- $("#dq").html(data.data[0][0]["HValue"] + "+");
- $("#AllCount").html(data.data[0][1]["HValue"]);
- $("#CurrentMonthReg").html(data.data[0][2]["HValue"]);
- $("#CurMonthOrder").html(data.data[0][3]["HValue"]);
- $("#CurMonthMoney").html(data.data[0][4]["HValue"] + "+");
- $("#CurMonthFileCount").html(data.data[0][5]["HValue"]);
- $("#CurMonthArea").html(data.data[0][6]["HValue"]);
-
- countdata = JSON.stringify(data.data[1]);//鍦板浘鏁版嵁
- console.log("鍦板浘鏁版嵁" + countdata);
- },
- error: function (e) {
-
- }
- })
-
+
+
+ var data=[{"name":"涓浗","value":200000},{"name":"鍗板害","value":10000},{"name":"宸磋タ","value":10000},{"name":"缇庡浗","value":10000},{"name":"寰峰浗","value":10000},{"name":"鑻卞浗","value":10000},{"name":"娉曞浗","value":10000},{"name":"瑗跨彮鐗�","value":10000},{"name":"鎰忓ぇ鍒�","value":10000},{"name":"钁¤悇鐗�","value":10000}];
+
+ countdata = data;//鍦板浘鏁版嵁
+ console.log("鍦板浘鏁版嵁" + countdata);
+ for (var j = 0; j < 3; j++) {
+ $.each(countdata, function (index, val) {
+ aa.push(val.name);
+ });
+
+ ss.push(aa);
+ aa=[];
}
+ console.log(ss);
+
+
+
var WorldMapData = {
Init: function () {
console.log("INIT" + countdata);
var data = countdata;
-
-
+
+
var option = {
backgroundColor: 'transparent',
tooltip: {
@@ -388,9 +383,9 @@
}
]
};
-
-
-
+
+
+
$.getJSON('./json/world.json', function (globalJson) {
echarts.registerMap('world', globalJson);
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
@@ -405,40 +400,40 @@
});
chart.setOption(option, true);
});
-
+
}
}
-
+
WorldMapData.Init();
-
-
+
+
$(function () {
-
-
+
+
var mychart1 = echarts.init(document.getElementById('zzt'));
aa(mychart1);
//鏍规嵁绐楀彛鐨勫ぇ灏忓彉鍔ㄥ浘琛� --- 閲嶇偣
window.onresize = function () {
myChart1.resize();
}
- MapTabledata();
+
})
function aa(mychart1) {
-
+
var years = ['2019', '2020', '2021'];
var jdData = [
- ['涓� 鍥�', '缇� 鍥�', '鍔犳嬁澶�', '淇勭綏鏂�', '涓� 楹�', '钂� 鍙�', '鍗板害灏艰タ浜�', '椹潵瑗夸簹', '鑿插緥瀹�', '鏂板姞鍧�', '娉� 鍥�', '鍗� 搴�', '瓒� 鍗�', '缂� 鐢�', '鏈� 椴�', '宸村熀鏂潶', '淇勭綏鏂�'],
- ['涓� 鍥�', '缇� 鍥�', '鍔犳嬁澶�', '淇勭綏鏂�', '涓� 楹�', '钂� 鍙�', '鍗板害灏艰タ浜�', '椹潵瑗夸簹', '鑿插緥瀹�', '鏂板姞鍧�', '娉� 鍥�', '鍗� 搴�', '瓒� 鍗�', '缂� 鐢�', '鏈� 椴�', '宸村熀鏂潶', '淇勭綏鏂�'],
- ['涓� 鍥�', '缇� 鍥�', '鍔犳嬁澶�', '淇勭綏鏂�', '涓� 楹�', '钂� 鍙�', '鍗板害灏艰タ浜�', '椹潵瑗夸簹', '鑿插緥瀹�', '鏂板姞鍧�', '娉� 鍥�', '鍗� 搴�', '瓒� 鍗�', '缂� 鐢�', '鏈� 椴�', '宸村熀鏂潶', '淇勭綏鏂�']
+ ['涓� 鍥�', '缇� 鍥�', '鍔犳嬁澶�', '淇勭綏鏂�', '涓� 楹�', '钂� 鍙�', '鍗板害灏艰タ浜�', '椹潵瑗夸簹', '鑿插緥瀹�', '鏂板姞鍧�', '娉� 鍥�', '鍗� 搴�', '瓒� 鍗�', '缂� 鐢�', '鏈� 椴�', '宸村熀鏂潶', '淇勭綏鏂�'],
+ ['涓� 鍥�', '缇� 鍥�', '鍔犳嬁澶�', '淇勭綏鏂�', '涓� 楹�', '钂� 鍙�', '鍗板害灏艰タ浜�', '椹潵瑗夸簹', '鑿插緥瀹�', '鏂板姞鍧�', '娉� 鍥�', '鍗� 搴�', '瓒� 鍗�', '缂� 鐢�', '鏈� 椴�', '宸村熀鏂潶', '淇勭綏鏂�'],
+ ['涓� 鍥�', '缇� 鍥�', '鍔犳嬁澶�', '淇勭綏鏂�', '涓� 楹�', '钂� 鍙�', '鍗板害灏艰タ浜�', '椹潵瑗夸簹', '鑿插緥瀹�', '鏂板姞鍧�', '娉� 鍥�', '鍗� 搴�', '瓒� 鍗�', '缂� 鐢�', '鏈� 椴�', '宸村熀鏂潶', '淇勭綏鏂�']
]
var data = [
- [66666, 555, 333, 233, 123, 111, 4779, 456, 567, 90, 567, 89, 123, 234, 345, 534, 567],
- [666, 555, 333, 72, 23, 111, 2133, 456, 627, 567, 123, 234, 567, 1567, 678, 757, 890],
- [6666, 777, 333, 221, 45, 1111, 35, 567, 768, 1273, 345, 567, 8920, 890, 3245, 975, 345,],
+ [66666, 555, 333, 233, 123, 111, 4779, 456, 567, 90, 567, 89, 123, 234, 345, 534, 567],
+ [666, 555, 333, 72, 23, 111, 2133, 456, 627, 567, 123, 234, 567, 1567, 678, 757, 890],
+ [6666, 777, 333, 221, 45, 1111, 35, 567, 768, 1273, 345, 567, 8920, 890, 3245, 975, 345,],
];
-
+
option = {
-
+
baseOption: {
backgroundColor: '', //鑳屾櫙棰滆壊
timeline: {
@@ -446,7 +441,7 @@
axisType: 'category',
autoPlay: true,
playInterval: 1500, //鎾斁閫熷害
-
+
left: '5%',
right: '5%',
bottom: '0%',
@@ -455,7 +450,7 @@
label: {
normal: {
textStyle: {
-
+
color: '#00E4FF',
}
},
@@ -485,7 +480,7 @@
borderColor: 'red'
}
},
-
+
},
title: {
text: '',
@@ -515,7 +510,7 @@
}
},
yAxis: [{
-
+
nameGap: 50,
offset: '37',
'type': 'category',
@@ -525,34 +520,34 @@
nameTextStyle: {
color: 'red'
},
-
-
+
+
axisLabel: {
//rotate:45,
show: false,
textStyle: {
fontSize: 32,
-
+
color: function (params, Index) { // 鏍囩鍥藉瀛椾綋棰滆壊
-
+
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//闅忔満鐢熸垚棰滆壊
-
+
var colorarrays = ['', '', '', '', '', '',
- '', '', '', '', '', '',
- '', '', '', '', '', '', ''
+ '', '', '', '', '', '',
+ '', '', '', '', '', '', ''
];
-
+
//console.log("111", Index, colorarrays[Index],params); //鎵撳嵃搴忓垪
-
+
return colorarrays[jdData[0].indexOf(params)];
},
-
-
+
+
}, //rotate:45,
interval: 50
},
axisLine: {
-
+
lineStyle: {
color: '' //Y杞撮鑹�
},
@@ -563,12 +558,12 @@
color: ''
}
},
-
+
}],
xAxis: [{
'type': 'value',
'name': '',
-
+
splitNumber: 8, //杞寸嚎涓暟
nameTextStyle: {
color: 'balck'
@@ -617,32 +612,32 @@
// build a color map as your need.
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//闅忔満鐢熸垚棰滆壊
var colorList = ['', '', '', '', '', '',
- '', '', '', '', '', '',
- '', '', '', '', '', '', ''
+ '', '', '', '', '', '',
+ '', '', '', '', '', '', ''
];
// return colorList[params.dataIndex]
-
+
//console.log("111", params.name); //鎵撳嵃搴忓垪
return colorList[jdData[0].indexOf(params.name)];
},
-
+
}
},
},
-
+
{
'name': '',
'type': 'bar',
markLine: {
-
-
+
+
label: {
normal: {
show: false
}
},
lineStyle: {
-
+
normal: {
color: 'red',
width: 3
@@ -663,34 +658,34 @@
},
itemStyle: {
normal: {
-
-
+
+
color: function (params) {
// build a color map as your need.
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//闅忔満鐢熸垚棰滆壊
var colorList = ['#84e4dd', '#7fec9d', '#ffe4b5', '#ffe4b5', '#00E4FF', '#749f83',
- '#ffe4b5', '#ffe4b5', '#84e4dd', '#ffe4b5', '#ffe4b5', '#ffe4b5',
- '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5'
+ '#ffe4b5', '#ffe4b5', '#84e4dd', '#ffe4b5', '#ffe4b5', '#ffe4b5',
+ '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5'
];
// return colorList[params.dataIndex]
-
+
// console.log("111", params.name); //鎵撳嵃搴忓垪
return colorList[jdData[0].indexOf(params.name)];
},
-
+
}
},
}
],
-
+
animationEasingUpdate: 'quinticInOut',
animationDurationUpdate: 1500, //鍔ㄧ敾鏁堟灉
},
-
+
options: []
};
for (var n = 0; n < years.length; n++) {
-
+
var res = [];
//alert(jdData.length);
for (j = 0; j < data[n].length; j++) {
@@ -698,18 +693,18 @@
name: jdData[n][j],
value: data[n][j]
});
-
+
}
-
+
res.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 6);
-
+
res.sort(function (a, b) {
return a.value - b.value;
});
-
-
+
+
var res1 = [];
var res2 = [];
//console.log(res);
@@ -733,6 +728,6 @@
}
mychart1.setOption(option);
}
-
-
+
+
</script>
\ No newline at end of file
--
Gitblit v1.9.1