Przeglądaj źródła

大屏代码提交

miaofuhao 2 lat temu
rodzic
commit
61326df67d
3 zmienionych plików z 145 dodań i 143 usunięć
  1. 3 3
      WebChartNewest/index.html
  2. 138 135
      WebChartNewest/js/index.js
  3. 4 5
      WebChartNewest/js/newIndex.js

+ 3 - 3
WebChartNewest/index.html

@@ -55,10 +55,10 @@
55 55
 					</ul>
56 56
 					<!-- <div id="hotline" style="width: 100%;height:240px;"></div> -->
57 57
 				</div>
58
-				<!-- 重大事件预警 -->
58
+				<!-- 舆情监测 -->
59 59
 				<div class="accept_channel">
60 60
 					<div class="title_img">
61
-						<h2>重大事件预警</h2>
61
+						<h2>舆情监测</h2>
62 62
 					</div>
63 63
 					<div class="dataT">
64 64
 						当月数据
@@ -489,7 +489,7 @@
489 489
 				<img src="./image/second/X.png" alt="" class="close_icon">
490 490
 				<div class="head_name">
491 491
 					<img src="./image/second/title_right.png" class="title_left">
492
-					<h3>重大事件预警</h3>
492
+					<h3>舆情监测</h3>
493 493
 					<img src="./image/second/title_left.png" class="title_right">
494 494
 				</div>
495 495
 				<div style="position: relative;">

+ 138 - 135
WebChartNewest/js/index.js

@@ -73,16 +73,22 @@ $('.closeMap_icon').click(function () {
73 73
 })
74 74
 //
75 75
 //热搜词移入,移入内容以外关闭出现页面
76
-document.addEventListener('mousemove', (e) => {
77
-	let t = document.getElementById('keyword'); // 最外层元素
78
-	let l = document.getElementById('hotline3');
79
-	if (!e.path.includes(t)) {
80
-		$('.keyWrap').css('display', 'none')
81
-	}
82
-	if (!e.path.includes(l)) {
83
-		$('.lineB').css('display', 'none')
84
-	}
85
-})
76
+//document.addEventListener('mousemove', (e) => {
77
+//	let t = document.getElementById('keyword'); // 最外层元素
78
+//	let l = document.getElementById('hotline3');
79
+//	if (!e.path.includes(t)) {
80
+//		$('.keyWrap').css('display', 'none')
81
+//	}
82
+//	if (!e.path.includes(l)) {
83
+//		$('.lineB').css('display', 'none')
84
+//	}
85
+//})
86
+$("#keyword").mouseleave(function(){
87
+    $('.keyWrap').css('display', 'none')
88
+ });
89
+ $("#hotline3").mouseleave(function(){
90
+    $('.lineB').css('display', 'none')
91
+ });
86 92
 function getHotlineAccept() {
87 93
 	new doAjax({
88 94
 		url: huayi.config.callcenter_url + "/InfoNew/GetSourceCountBy",
@@ -469,8 +475,8 @@ function getHotThings() {
469 475
 		},
470 476
 		callBack: function (res) {
471 477
 			res.forEach(function (v, n) {
472
-				// if(v.name!='中毒'&&v.name!='地震'){
473
-				nameData.push(v.name);
478
+				// if(v.name!='中毒'&&v.name!='地震'){ str.replace(/[0-9]+/g,"")
479
+				nameData.push(v.name.replace(/[0-9]+/g,""));
474 480
 				conNum.push(v.count)
475 481
 				secData.push({
476 482
 					level: v.name,
@@ -481,7 +487,7 @@ function getHotThings() {
481 487
 			for (var i = 0; i < secData.length; i++) {
482 488
 				maxNum.push(Math.max.apply(null, conNum) + 200);
483 489
 			}
484
-			hotThingsChart('hotThings', nameData, conNum, maxNum)
490
+			hotThingsChart('hotThings', nameData, conNum, maxNum,-30)
485 491
 		}
486 492
 	});
487 493
 }
@@ -748,121 +754,121 @@ function getworkOrder() {
748 754
 	});
749 755
 }
750 756
 
751
-function hotThingsChart(dom, data, count, count1) {
757
+function hotThingsChart(dom, data, count, count1,rotate=0) {
752 758
 	let hotThings = echarts.init(document.getElementById(dom));
753 759
 	window.onresize = function () {
754 760
 		hotThings.resize()
755 761
 	}
756 762
 	option = {
757
-		"textStyle": {
758
-			"color": "#c0c3cd",
759
-			"fontSize": 11
763
+		textStyle: {
764
+			color: "#c0c3cd",
765
+			fontSize: 11
760 766
 		},
761 767
 		grid: {
762 768
 			top: '25%',
763
-			bottom: '15%'
769
+			bottom: '30%'
764 770
 		},
765
-		"xAxis": {
766
-			"nameTextStyle": {
767
-				"color": "#c0c3cd",
768
-				"padding": [0, 0, -10, 0],
769
-				"fontSize": 11
771
+		xAxis: {
772
+			nameTextStyle: {
773
+				color: "#c0c3cd",
774
+				padding: [0, 0, -10, 0],
775
+				fontSize: 11
770 776
 			},
771
-			"axisLabel": {
772
-				"color": "#c0c3cd",
773
-				"fontSize": 11,
774
-				"interval": 0,
777
+			axisLabel: {
778
+				color: "#c0c3cd",
779
+				fontSize: 11,
780
+				rotate: rotate,
775 781
 			},
776
-			"axisTick": {
777
-				"lineStyle": {
778
-					"color": "#8398c4",
779
-					"width": 1
782
+			axisTick: {
783
+				lineStyle: {
784
+					color: "#8398c4",
785
+					width: 1
780 786
 				},
781
-				"show": false
787
+				show: false
782 788
 			},
783
-			"minorTick": {
784
-				"length": 8
789
+			minorTick: {
790
+				length: 8
785 791
 			},
786
-			"splitLine": {
787
-				"show": false
792
+			splitLine: {
793
+				show: false
788 794
 			},
789
-			"axisLine": {
790
-				"lineStyle": {
791
-					"color": "#8398c4",
792
-					"width": 1,
793
-					"type": "solid"
795
+			axisLine: {
796
+				lineStyle: {
797
+					color: "#8398c4",
798
+					width: 1,
799
+					type: "solid"
794 800
 				},
795
-				"show": true
801
+				show: true
796 802
 			},
797
-			"data": data,
798
-			"type": "category"
803
+			data: data,
804
+			type: "category"
799 805
 		},
800
-		"yAxis": {
801
-			"nameTextStyle": {
802
-				"color": "#c0c3cd",
803
-				"padding": [0, 0, 10, -5],
804
-				"fontSize": 11
806
+		yAxis: {
807
+			nameTextStyle: {
808
+				color: "#c0c3cd",
809
+				padding: [0, 0, 10, -5],
810
+				fontSize: 11
805 811
 			},
806
-			"axisLabel": {
807
-				"color": "#c0c3cd",
808
-				"fontSize": 11
812
+			axisLabel: {
813
+				color: "#c0c3cd",
814
+				fontSize: 11
809 815
 			},
810
-			"axisTick": {
811
-				"lineStyle": {
812
-					"color": "#8398c4",
813
-					"width": 1
816
+			axisTick: {
817
+				lineStyle: {
818
+					color: "#8398c4",
819
+					width: 1
814 820
 				},
815
-				"show": true
821
+				show: true
816 822
 			},
817
-			"splitLine": {
818
-				"show": true,
819
-				"lineStyle": {
820
-					"color": "#8398c4",
821
-					"type": "dashed"
823
+			splitLine: {
824
+				show: true,
825
+				lineStyle: {
826
+					color: "#8398c4",
827
+					type: "dashed"
822 828
 				}
823 829
 			},
824
-			"axisLine": {
825
-				"lineStyle": {
826
-					"color": "#8398c4",
827
-					"width": 1,
828
-					"type": "solid"
830
+			axisLine: {
831
+				lineStyle: {
832
+					color: "#8398c4",
833
+					width: 1,
834
+					type: "solid"
829 835
 				},
830
-				"show": true,
836
+				show: true,
831 837
 				// "symbol":['none', 'arrow'],
832
-				"symbol": ['none', 'path://M5, 20 L5, 5 L8, 8 L5, 2 L2, 8 L5, 5 L5.3, 6 L5.3,                  20'],
833
-				'symbolOffset': 5,
834
-				'symbolSize': [35, 38],
838
+				symbol: ['none', 'path://M5, 20 L5, 5 L8, 8 L5, 2 L2, 8 L5, 5 L5.3, 6 L5.3,                  20'],
839
+				symbolOffset: 5,
840
+				symbolSize: [35, 38],
835 841
 			},
836
-			"name": "条"
842
+			name: "条"
837 843
 		},
838
-		"series": [{
839
-			"data": count,
840
-			"type": "bar",
841
-			"barMaxWidth": "auto",
842
-			"barWidth": 15,
843
-			"itemStyle": {
844
-				"color": {
845
-					"x": 0,
846
-					"y": 0,
847
-					"x2": 0,
848
-					"y2": 1,
849
-					"type": "linear",
850
-					"global": false,
851
-					"colorStops": [{
852
-						"offset": 0,
853
-						"color": "#ff4519"
844
+		series: [{
845
+			data: count,
846
+			type: "bar",
847
+			barMaxWidth: "auto",
848
+			barWidth: 15,
849
+			itemStyle: {
850
+				color: {
851
+					x: 0,
852
+					y: 0,
853
+					x2: 0,
854
+					y2: 1,
855
+					type: "linear",
856
+					global: false,
857
+					colorStops: [{
858
+						offset: 0,
859
+						color: "#ff4519"
854 860
 					}, {
855
-						"offset": 1,
856
-						"color": "#fff500"
861
+						offset: 1,
862
+						color: "#fff500"
857 863
 					}]
858 864
 				},
859 865
 				barBorderRadius: [30, 30, 0, 0]
860 866
 			},
861
-			"label": {
862
-				"show": true,
863
-				"position": "top",
864
-				"distance": 10,
865
-				"color": "#fff"
867
+			label: {
868
+				show: true,
869
+				position: "top",
870
+				distance: 10,
871
+				color: "#fff"
866 872
 			},
867 873
 			emphasis: {
868 874
 				itemStyle: {
@@ -881,51 +887,51 @@ function hotThingsChart(dom, data, count, count1) {
881 887
 				}
882 888
 			},
883 889
 		}, {
884
-			"data": [1, 1, 1, 1, 1, 1],
885
-			"type": "pictorialBar",
886
-			"barMaxWidth": "20",
887
-			"symbol": "none",
890
+			data: [1, 1, 1, 1, 1, 1],
891
+			type: "pictorialBar",
892
+			barMaxWidth: "20",
893
+			symbol: "none",
888 894
 		},
889 895
 		{
890 896
 			// "data": [1500, 1148, 756, 1395, 1750, 1148],
891
-			"type": "pictorialBar",
892
-			"barMaxWidth": "20",
893
-			"symbolPosition": "end",
894
-			"symbol": "none",
895
-			"symbolOffset": [0, "-50%"],
896
-			"symbolSize": [30, 12],
897
-			"zlevel": 1
897
+			type: "pictorialBar",
898
+			barMaxWidth: "20",
899
+			symbolPosition: "end",
900
+			symbol: "none",
901
+			symbolOffset: [0, "-50%"],
902
+			symbolSize: [30, 12],
903
+			zlevel: 1
898 904
 		},
899 905
 		{
900
-			"data": count1,
901
-			"type": "bar",
902
-			"barMaxWidth": "auto",
903
-			"barWidth": 15,
904
-			"barGap": "-100%",
905
-			"itemStyle": {
906
-				"color": '#234caf'
906
+			data: count1,
907
+			type: "bar",
908
+			barMaxWidth: "auto",
909
+			barWidth: 15,
910
+			barGap: "-100%",
911
+			itemStyle: {
912
+				color: '#234caf'
907 913
 			},
908
-			"zlevel": -1
914
+			zlevel: -1
909 915
 		}, {
910
-			"data": [1, 1, 1, 1, 1, 1],
911
-			"type": "pictorialBar",
912
-			"barMaxWidth": "20",
913
-			"symbol": "none",
914
-			"symbolOffset": [0, "50%"],
915
-			"symbolSize": [30, 15],
916
-			"zlevel": -2
916
+			data: [1, 1, 1, 1, 1, 1],
917
+			type: "pictorialBar",
918
+			barMaxWidth: "20",
919
+			symbol: "none",
920
+			symbolOffset: [0, "50%"],
921
+			symbolSize: [30, 15],
922
+			zlevel: -2
917 923
 		}, {
918
-			"data": count1,
919
-			"type": "pictorialBar",
920
-			"barMaxWidth": "20",
921
-			"symbolPosition": "end",
922
-			"symbol": "circle",
923
-			"symbolOffset": [0, "-60%"],
924
-			"symbolSize": [15, 12],
925
-			"itemStyle": {
926
-				"color": '#234caf'
924
+			data: count1,
925
+			type: "pictorialBar",
926
+			barMaxWidth: "20",
927
+			symbolPosition: "end",
928
+			symbol: "circle",
929
+			symbolOffset: [0, "-60%"],
930
+			symbolSize: [15, 12],
931
+			itemStyle: {
932
+				color: '#234caf'
927 933
 			},
928
-			"zlevel": -1
934
+			zlevel: -1
929 935
 		},
930 936
 		]
931 937
 	}
@@ -1844,7 +1850,6 @@ $('.accept_channel').click(function (e) {
1844 1850
 		done: function (value) {
1845 1851
 			new doAjax({
1846 1852
 				url: huayi.config.callcenter_url + "/InfoNew/Majorevents",
1847
-				// url: "http://192.168.8.9:1042/InfoNew/Majorevents",
1848 1853
 				Type: 'get',
1849 1854
 				data: {
1850 1855
 					stime: value && value.split(' ~ ')[0],
@@ -1866,7 +1871,6 @@ $('.accept_channel').click(function (e) {
1866 1871
 	});
1867 1872
 	new doAjax({
1868 1873
 		url: huayi.config.callcenter_url + "/InfoNew/Majorevents",
1869
-		// url: "http://192.168.8.9:1042/InfoNew/Majorevents",
1870 1874
 		Type: 'get',
1871 1875
 		data: {
1872 1876
 			stime: $('#date2').val() && $('#date2').val().split(' ~ ')[0],
@@ -1876,10 +1880,9 @@ $('.accept_channel').click(function (e) {
1876 1880
 			let eventsData = []
1877 1881
 			res.forEach(function (v, n) {
1878 1882
 				eventsData.push({
1879
-					level: v.name,
1883
+					level: v.name.replace(/[0-9]+/g,""),
1880 1884
 					landArea: v.count
1881 1885
 				})
1882
-				// }
1883 1886
 			})
1884 1887
 			getHonelineChart2(eventsData, 'events')
1885 1888
 		}

+ 4 - 5
WebChartNewest/js/newIndex.js

@@ -459,8 +459,7 @@ function getHotThings() {
459 459
 		},
460 460
 		callBack: function (res) {
461 461
 			res.forEach(function (v, n) {
462
-				// if(v.name!='中毒'&&v.name!='地震'){
463
-				nameData.push(v.name);
462
+				nameData.push(v.name.replace(/[0-9]+/g,""));
464 463
 				conNum.push(v.count)
465 464
 				secData.push({
466 465
 					level: v.name,
@@ -468,6 +467,7 @@ function getHotThings() {
468 467
 				})
469 468
 				// }
470 469
 			})
470
+			console.log(nameData)
471 471
 			for (var i = 0; i < secData.length; i++) {
472 472
 				maxNum.push(Math.max.apply(null, conNum) + 200);
473 473
 			}
@@ -617,6 +617,7 @@ function hotThingsChart(dom, data, count, count1) {
617 617
 			"axisLabel": {
618 618
 				"color": "#c0c3cd",
619 619
 				"fontSize": 11,
620
+				"rotate": -45,
620 621
 				"interval": 0,
621 622
 			},
622 623
 			"axisTick": {
@@ -1627,7 +1628,6 @@ $('.accept_channel').click(function (e) {
1627 1628
 		done: function(value) {
1628 1629
 			new doAjax({
1629 1630
 				url: huayi.config.callcenter_url + "/InfoNew/Majorevents",
1630
-				// url: "http://192.168.8.9:1042/InfoNew/Majorevents",
1631 1631
 				Type: 'get',
1632 1632
 				data: {
1633 1633
 					stime: value && value.split(' ~ ')[0],
@@ -1649,7 +1649,6 @@ $('.accept_channel').click(function (e) {
1649 1649
 	});
1650 1650
 	new doAjax({
1651 1651
 		url: huayi.config.callcenter_url + "/InfoNew/Majorevents",
1652
-		// url: "http://192.168.8.9:1042/InfoNew/Majorevents",
1653 1652
 		Type: 'get',
1654 1653
 		data: {
1655 1654
 			stime: $('#date2').val() && $('#date2').val().split(' ~ ')[0],
@@ -1659,7 +1658,7 @@ $('.accept_channel').click(function (e) {
1659 1658
 			let eventsData = []
1660 1659
 			res.forEach(function (v, n) {
1661 1660
 				eventsData.push({
1662
-					level: v.name,
1661
+					level: v.name.replace(/[0-9]+/g,""),
1663 1662
 					landArea: v.count
1664 1663
 				})
1665 1664
 				// }