TV.kanbanUI.git

			@@ -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()(256256*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()(256256*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()(256256*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>