From 48145f6a1693f5bd26ad2e355b45d99702f1a6e5 Mon Sep 17 00:00:00 2001
From: YL <YL@LAPTOP-SE03PLUR>
Date: 星期一, 17 五月 2021 08:46:09 +0800
Subject: [PATCH] Merge branch 'master' of http://101.37.171.70:10101/r/TV.kanbanUI
---
HDMap.html | 517 +++++++++++++++++++--------------------------------------
1 files changed, 175 insertions(+), 342 deletions(-)
diff --git a/HDMap.html b/HDMap.html
index 93725fe..b7ee00c 100644
--- a/HDMap.html
+++ b/HDMap.html
@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
+ <title>涓栫晫鍦板浘</title>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/dataCenterGlobal.css">
<link rel="stylesheet" type="text/css" href="./css/new30.css">
@@ -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;">
-
+
+ <div id="zzt" class="left" style="width:400px;height: 400px;">
+
<h2>鏌辩姸鍥惧瓨鏀惧湴鏂�</h2>
-
+
</div>
-
-
+
+
</body>
</html>
@@ -107,39 +107,72 @@
<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;
-
-
- 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 maparry1 = [];
+ var maparry2 = [];
+ var maparry3 = [];
+ var maparry4 = [];
+
+
+
+ $.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 = data.data[1];//鍦板浘鏁版嵁
+ console.log("鍦板浘鏁版嵁" + countdata);
+ // for (var j = 0; j < 3; j++) {
+ // $.each(data.data[1], function (index, val) {
+ // maparry2.push(val.name);
+ // maparry4.push(val.value + Math.random() * 100);
+ // });
+ // maparry1.push(maparry2);//灏嗘坊鍔犲ソ鐨刵ame鍊煎湪濉厖鍒版暟缁勪竴閲�
+ // maparry3.push(maparry4);//灏嗘坊鍔犲ソ鐨剉alue鍊煎～鍏呭埌鏁扮粍閲�
+ // maparry2 = [];
+ // maparry4 = [];
+ // }
+ $.each(data.data[1], function (index, val) {
+ maparry2.push(val.name);
+ maparry4.push(val.value);
+
+
+ });
+ maparry1.push(maparry2);//灏嗘坊鍔犲ソ鐨刵ame鍊煎湪濉厖鍒版暟缁勪竴閲�
+ maparry3.push(maparry4);//灏嗘坊鍔犲ソ鐨剉alue鍊煎～鍏呭埌鏁扮粍閲�
+ // console.log("zhuzhuang" + maparry1);
+ // console.log("zhuzhuang2" + maparry3);
+
+ },
+ error: function (e) {
+
+ }
+ })
+
+
var WorldMapData = {
Init: function () {
- console.log("INIT" + countdata);
+ // console.log("INIT" + countdata);
+
var data = countdata;
-
-
+
+
var option = {
backgroundColor: 'transparent',
tooltip: {
@@ -383,15 +416,15 @@
}
]
};
-
-
-
+
+
+
$.getJSON('./json/world.json', function (globalJson) {
echarts.registerMap('world', globalJson);
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
var chart = echarts.init(document.getElementById('map_1'));
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
- var chart1 = echarts.init(document.getElementById('zzt'));
+ // var chart1 = echarts.init(document.getElementById('zzt'));
chart.setOption({
series: [{
type: 'map',
@@ -400,334 +433,134 @@
});
chart.setOption(option, true);
});
-
+
}
}
-
+
WorldMapData.Init();
-
-
+
+
$(function () {
-
-
+
+
var mychart1 = echarts.init(document.getElementById('zzt'));
aa(mychart1);
//鏍规嵁绐楀彛鐨勫ぇ灏忓彉鍔ㄥ浘琛� --- 閲嶇偣
window.onresize = function () {
myChart1.resize();
}
-
})
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,],
- ];
-
+ console.log(maparry1[0])
+ console.log(maparry3[0])
+ var data1 = maparry1[0];
+ var data2 = maparry3[0];
option = {
-
- baseOption: {
- backgroundColor: '', //鑳屾櫙棰滆壊
- timeline: {
- data: years,
- axisType: 'category',
- autoPlay: true,
- playInterval: 1500, //鎾斁閫熷害
-
- left: '5%',
- right: '5%',
- bottom: '0%',
- width: '90%',
- // height: null,
- label: {
- normal: {
- textStyle: {
-
- color: '#00E4FF',
- }
- },
- emphasis: {
- textStyle: {
- color: '#00E4FF'
- }
- }
- },
- symbolSize: 10,
- lineStyle: {
- color: '#red'
- },
- checkpointStyle: {
- borderColor: '#red',
- borderWidth: 2
- },
- controlStyle: {
- showNextBtn: false,
- showPrevBtn: false,
- normal: {
- color: '#ff8800',
- borderColor: '#ff8800'
- },
- emphasis: {
- color: 'red',
- borderColor: 'red'
- }
- },
-
+ backgroundColor: '',
+ title: {
+ text: "鍥介檯瀹㈡埛TOP10",
+ left: "5%",
+ top: "8%",
+ textStyle: {
+ color: '#c4f5ff',
+ fontSize: '20',
+ fontWeight: "normal"
},
- title: {
- text: '',
- right: '2%',
- bottom: '8%',
- textStyle: {
- fontSize: 50,
- color: '#00E4FF' //鏍囬瀛椾綋棰滆壊
+ },
+ grid: { //鍥捐〃璺濈涓婁笅宸﹀彸鐨勮窛绂�
+ top: '15%',
+ bottom: '10%',
+ right: '30%',
+ left: '5%',
+ containLabel: true
+ },
+ tooltip: { //鎻愮ず
+ trigger: "axis",
+ },
+ xAxis: {
+ type: 'value',
+ show: false,
+ splitLine: {
+ show: false,
+ lineStyle: {
+ type: 'dashed',
+ color: '#7F9BAE'
}
},
- tooltip: {
- 'trigger': 'axis'
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#7F9BAE'
+ }
},
- calculable: true,
- grid: {
- left: '8%',
- right: '2%',
- bottom: '6%',
- top: '0%',
- containLabel: true
+ axisTick: {
+ show: false
},
+ axisLabel: {
+ show: true,
+ color: '#fff',
+ fontSize: 14
+ }
+ },
+ yAxis: {
+ type: 'category',
+ triggerEvent: true,
+ show: true,
+ inverse: true, //鏄惁鍙嶈浆
+ boundaryGap: true,
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#7F9BAE'
+ }
+ },
+ splitLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ interval: 0,
+ color: '#fff',
+ align: 'right',
+ margin: 10,
+ fontSize: 16,
+ },
+ data: data1,
+ },
+ series: [{
+ name: '',
+ type: 'bar',
+ barWidth: 10,
+ yAxisIndex: 0,
+ data: data2,
label: {
normal: {
+ show: true,
+ position: 'right',
textStyle: {
- color: 'red'
+ color: '#ffffff',
+ fontSize: '16',
}
}
},
- yAxis: [{
-
- nameGap: 50,
- offset: '37',
- 'type': 'category',
- interval: 50,
- //inverse: ture,//鍥捐〃鍊掑彊鎴栬�呮搴忔帓鐗�
- data: '',
- nameTextStyle: {
- color: 'red'
+ itemStyle: {
+ barBorderRadius: 10,
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+ offset: 0,
+ color: 'rgba(67, 211, 244,0.2)'
},
-
-
- 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杞撮鑹�
- },
- },
- splitLine: {
- show: false,
- lineStyle: {
- color: ''
- }
- },
-
- }],
- xAxis: [{
- 'type': 'value',
- 'name': '',
-
- splitNumber: 8, //杞寸嚎涓暟
- nameTextStyle: {
- color: 'balck'
- },
- axisLine: {
- lineStyle: {
- color: '' //X杞撮鑹�
- }
- },
- axisLabel: {
- formatter: '{value} '
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#fedd8b'
- }
- },
- }],
- series: [{
- 'name': '',
- 'type': 'bar',
- markLine: {
- label: {
- normal: {
- show: false
- }
- },
- lineStyle: {
- normal: {
- color: 'red',
- width: 3
- }
- },
- },
- label: {
- normal: {
- show: true,
- position: 'right', //鏁板�兼樉绀哄湪鍙充晶
- formatter: '{c}'
- }
- },
- 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 = ['', '', '', '', '', '',
- '', '', '', '', '', '',
- '', '', '', '', '', '', ''
- ];
- // return colorList[params.dataIndex]
-
- //console.log("111", params.name); //鎵撳嵃搴忓垪
- return colorList[jdData[0].indexOf(params.name)];
- },
-
- }
- },
+ {
+ offset: 1,
+ color: "rgba(67, 211, 244,1)"
+ }
+ ])
},
-
- {
- 'name': '',
- 'type': 'bar',
- markLine: {
-
-
- label: {
- normal: {
- show: false
- }
- },
- lineStyle: {
-
- normal: {
- color: 'red',
- width: 3
- }
- },
- },
- barWidth: '40%',
- barGap: '-100%',
- label: {
- normal: {
- show: true,
- fontSize: 8, //鏍囩鍥藉瀛椾綋澶у皬
- position: 'left', //鏁板�兼樉绀哄湪鍙充晶
- formatter: function (p) {
- return p.name;
- }
- }
- },
- 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'
- ];
- // 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++) {
- res.push({
- 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);
- for (t = 0; t < res.length; t++) {
- res1[t] = res[t].name;
- res2[t] = res[t].value;
- }
- option.options.push({
- title: {
- text: years[n] + '骞�'
- },
- yAxis: {
- data: res1,
- },
- series: [{
- data: res2
- }, {
- data: res2
- }]
- });
- }
mychart1.setOption(option);
}
-
-
+
+
</script>
\ No newline at end of file
--
Gitblit v1.9.1