TV.kanbanUI.git

			@@ -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">
			@@ -33,7 +33,7 @@
			<div class="shuju shuju1">
			<div class="shuju_cont">
			<div class="shuju_item">
			<h2>130+</h2>
			<h2 id="dq"></h2>
			<p>服务国家和地区</p>
			</div>
			</div>
			@@ -41,7 +41,7 @@
			<div class="shuju shuju2">
			<div class="shuju_cont">
			<div class="shuju_item">
			<h2 class="AllCount">191765</h2>
			<h2 class="AllCount" id="AllCount"></h2>
			<p>全球注册客户(人)</p>
			</div>
			</div>
			@@ -49,7 +49,7 @@
			<div class="shuju shuju3">
			<div class="shuju_cont">
			<div class="shuju_item">
			<h2 class="CurrentMonthReg">8265</h2>
			<h2 class="CurrentMonthReg" id="CurrentMonthReg"></h2>
			<p>全球新增客户(人)</p>
			</div>
			</div>
			@@ -57,7 +57,7 @@
			<div class="shuju shuju4">
			<div class="shuju_cont">
			<div class="shuju_item">
			<h2 class="CurMonthOrder">16185</h2>
			<h2 class="CurMonthOrder" id="CurMonthOrder"></h2>
			<p>全球下单客户(人)</p>
			</div>
			</div>
			@@ -65,7 +65,7 @@
			<div class="shuju shuju2">
			<div class="shuju_cont">
			<div class="shuju_item">
			<h2 class="CurMonthMoney">120+</h2>
			<h2 class="CurMonthMoney" id="CurMonthMoney"></h2>
			<p>全球销售额(RMB)</p>
			</div>
			</div>
			@@ -73,7 +73,7 @@
			<div class="shuju shuju3">
			<div class="shuju_cont">
			<div class="shuju_item">
			<h2 class="CurMonthFileCount">69410</h2>
			<h2 class="CurMonthFileCount" id="CurMonthFileCount"></h2>
			<p>全球文件(款)</p>
			</div>
			</div>
			@@ -81,7 +81,7 @@
			<div class="shuju shuju4">
			<div class="shuju_cont">
			<div class="shuju_item">
			<h2 class="CurMonthArea">85002</h2>
			<h2 class="CurMonthArea" id="CurMonthArea"></h2>
			<p>全球面积(㎡)</p>
			</div>
			</div>
			@@ -93,7 +93,7 @@

			</div>

			<div id="zzt" class="left" style="width:600px;height: 600px;border: 1px solid red;">
			<div id="zzt" class="left" style="width:400px;height: 400px;">

			<h2>柱状图存放地方</h2>

			@@ -110,126 +110,67 @@
			$("#map_1").height($(window).height() - 0);
			window.onload = function () {
			//$(".shuju_box").width($(".shuju").outerWidth(true)*$(".shuju").length)

			}
			var countdata;
			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);//将添加好的name值在填充到数组一里
			// maparry3.push(maparry4);//将添加好的value值填充到数组里
			// maparry2 = [];
			// maparry4 = [];
			// }
			$.each(data.data[1], function (index, val) {
			maparry2.push(val.name);
			maparry4.push(val.value);


			});
			maparry1.push(maparry2);//将添加好的name值在填充到数组一里
			maparry3.push(maparry4);//将添加好的value值填充到数组里
			// console.log("zhuzhuang" + maparry1);
			// console.log("zhuzhuang2" + maparry3);

			},
			error: function (e) {

			}
			})


			var WorldMapData = {
			Init: function () {
			var data = [
			{ name: '刚果民主共和国', value: 5 },
			{ name: '法国', value: 882 },
			{ name: '香港', value: 34 },
			{ name: '意大利 ', value: 2118 },
			{ name: '新西兰 ', value: 270 },
			{ name: '新加坡 ', value: 126 },
			{ name: '西班牙', value: 971 },
			{ name: '瑞士 ', value: 602 },
			{ name: '阿尔巴尼亚', value: 15 },
			{ name: '智利', value: 57 },
			{ name: '中国', value: 999 },
			{ name: '刚果', value: 1 },
			{ name: '丹麦', value: 314 },
			{ name: '格陵兰岛', value: 1 },
			{ name: '匈牙利', value: 1060 },
			{ name: '日本', value: 619 },
			{ name: '韩国', value: 232 },
			{ name: '马其顿共和国', value: 6 },
			{ name: '毛里求斯', value: 1 },
			{ name: '乌干达', value: 1 },
			{ name: '乌克兰', value: 256 },
			{ name: '比利时', value: 431 },
			{ name: '波斯尼亚和黑塞哥维那', value: 4 },
			{ name: '多米尼加共和国', value: 4 },
			{ name: '德国', value: 2231 },
			{ name: '危地马拉', value: 1 },
			{ name: '以色列', value: 162 },
			{ name: '哈萨克斯坦', value: 3 },
			{ name: '科威特', value: 2 },
			{ name: '老挝', value: 3 },
			{ name: '瑞典', value: 268 },
			{ name: '奥地利', value: 626 },
			{ name: '孟加拉国', value: 3 },
			{ name: '保加利亚', value: 300 },
			{ name: '捷克共和国', value: 1789 },
			{ name: '厄瓜多尔', value: 8 },
			{ name: '爱沙尼亚', value: 15 },
			{ name: '爱尔兰', value: 75 },
			{ name: '乔丹', value: 8 },
			{ name: '立陶宛', value: 164 },
			{ name: '马耳他', value: 8 },
			{ name: '罗马尼亚', value: 90 },
			{ name: '塞尔维亚共和国', value: 57 },
			{ name: '斯洛伐克', value: 284 },
			{ name: '英国', value: 1581 },
			{ name: '乌拉圭', value: 3 },
			{ name: '文莱', value: 4 },
			{ name: '哥伦比亚', value: 2 },
			{ name: '加纳', value: 13 },
			{ name: '伊拉克', value: 1 },
			{ name: '牙买加', value: 1 },
			{ name: '列支敦士登', value: 10 },
			{ name: '墨西哥', value: 462 },
			{ name: '摩洛哥', value: 3 },
			{ name: '挪威', value: 173 },
			{ name: '秘鲁', value: 18 },
			{ name: '波兰', value: 2230 },
			{ name: '波多黎各', value: 1 },
			{ name: '泰国', value: 764 },
			{ name: '土耳其', value: 170 },
			{ name: '阿根廷', value: 144 },
			{ name: '澳大利亚', value: 846 },
			{ name: '埃及', value: 10 },
			{ name: '希腊', value: 287 },
			{ name: '印度', value: 108 },
			{ name: '拉脱维亚', value: 47 },
			{ name: '卢森堡', value: 3 },
			{ name: '菲律宾', value: 55 },
			{ name: '葡萄牙', value: 394 },
			{ name: '卡塔尔', value: 1 },
			{ name: '沙特阿拉伯', value: 7 },
			{ name: '塞内加尔', value: 2 },
			{ name: '南非', value: 158 },
			{ name: '斯里兰卡', value: 17 },
			{ name: '阿拉伯联合酋长国', value: 13 },
			{ name: '美国', value: 5302 },
			{ name: '亚美尼亚', value: 5 },
			{ name: '巴西', value: 645 },
			{ name: '加那利群岛', value: 3 },
			{ name: '哥斯达黎加', value: 3 },
			{ name: '芬兰', value: 157 },
			{ name: '冰岛', value: 10 },
			{ name: '黎巴嫩', value: 2 },
			{ name: '马来西亚', value: 79 },
			{ name: '巴基斯坦', value: 9 },
			{ name: '斯洛文尼亚', value: 414 },
			{ name: '台湾', value: 166 },
			{ name: '委内瑞拉', value: 6 },
			{ name: '津巴布韦', value: 1 },
			{ name: '白俄罗斯', value: 102 },
			{ name: '喀麦隆', value: 9 },
			{ name: '加拿大', value: 1072 },
			{ name: '克罗地亚', value: 82 },
			{ name: '格鲁吉亚', value: 10 },
			{ name: '印度尼西亚', value: 213 },
			{ name: '伊朗', value: 4 },
			{ name: '肯尼亚', value: 2 },
			{ name: '荷兰', value: 718 },
			{ name: '尼日利亚', value: 25 },
			{ name: '俄罗斯', value: 258 },
			{ name: '越南', value: 118 },
			{ name: '阿尔及利亚', value: 2 },
			{ name: '毛里塔尼亚', value: 2 },
			{ name: '马里', value: 2 },
			{ name: '尼日尔', value: 2 },
			{ name: '苏丹', value: 2 },
			{ name: '利比亚', value: 2 },
			{ name: '安哥拉', value: 2 },
			{ name: '玻利维亚', value: 2 },
			{ name: '巴拉圭', value: 2 },
			{ name: '纳米比亚', value: 2 },
			{ name: '乍得', value: 2 },
			{ name: '埃塞俄比亚', value: 2 },
			{ name: '中非', value: 2 },
			];
			// console.log("INIT" + countdata);

			var data = countdata;


			var option = {
			@@ -249,7 +190,7 @@
			max: 500,
			realtime: false,
			calculable: false,
			color: ['#00E4FF', '#ffe4b5', '#ffe4b5']
			color: ['#00E4FF', '#00E4FF', '#ffe4b5']
			},
			series: [{
			name: '消费金额',
			@@ -483,7 +424,7 @@
			// 基于准备好的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',
			@@ -500,6 +441,8 @@


			$(function () {


			var mychart1 = echarts.init(document.getElementById('zzt'));
			aa(mychart1);
			//根据窗口的大小变动图表 --- 重点
			@@ -508,313 +451,114 @@
			}
			})
			function aa(mychart1) {

			var years = ['2016', '2017', '2018'];
			var jdData = [
			['香港同胞', '澳门同胞', '台湾同胞', '日本', '韩国', '蒙古', '印度尼西亚', '马来西亚', '菲律宾', '新加坡', '泰国', '印度', '越南', '缅甸', '朝鲜', '巴基斯坦', '其它'],
			['香港同胞', '澳门同胞', '台湾同胞', '日本', '韩国', '蒙古', '印度尼西亚', '马来西亚', '菲律宾', '新加坡', '泰国', '印度', '越南', '缅甸', '朝鲜', '巴基斯坦', '其它'],
			['香港同胞', '澳门同胞', '台湾同胞', '日本', '韩国', '蒙古', '印度尼西亚', '马来西亚', '菲律宾', '新加坡', '泰国', '印度', '越南', '缅甸', '朝鲜', '巴基斯坦', '其它']
			]
			var data = [
			[13.2, 1.11, 13.6, 9284, 64138, 2237, 4779, 48877, 2371, 36224, 12956, 2499, 4778, 594, 717, 534, 16487],
			[15.26, 1.31, 16.68, 10331, 91580, 1909, 40469, 67490, 1765, 36982, 15371, 3643, 2871, 762, 962, 757, 34414],
			[14.23, 1.31, 21.13, 10873, 94964, 2966, 129748, 59827, 8519, 38344, 18495, 3531, 1369, 544, 2005, 975, 33855,],
			];

			console.log(maparry1[0])
			console.log(maparry3[0])
			var data1 = maparry1[0];
			var data2 = maparry3[0];
			option = {

			baseOption: {
			backgroundColor: '#2c343c', //背景颜色
			timeline: {
			data: years,
			axisType: 'category',
			autoPlay: true,
			playInterval: 1500, //播放速度

			left: '5%',
			right: '5%',
			bottom: '0%',
			width: '90%',
			// height: null,
			label: {
			normal: {
			textStyle: {

			color: 'red',
			}
			},
			emphasis: {
			textStyle: {
			color: 'red'
			}
			}
			},
			symbolSize: 10,
			lineStyle: {
			color: '#red'
			},
			checkpointStyle: {
			borderColor: '#red',
			borderWidth: 2
			},
			controlStyle: {
			showNextBtn: true,
			showPrevBtn: true,
			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: 'black' //标题字体颜色
			},
			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()(256256*256-1)).toString(16);//随机生成颜色

			var colorarrays = ['#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd', '#749f83',
			'#ca8622', '#bda29a', '#a8d8ea', '#aa96da', '#fcbad3', '#ffffd2',
			'#f38181', '#fce38a', '#eaffd0', '#95e1d3', '#e3fdfd', '#749f83', '#ca8622'
			];

			//console.log("111", Index, colorarrays[Index],params); //打印序列

			return colorarrays[jdData[0].indexOf(params)];
			},


			}, //rotate:45,
			interval: 50
			},
			axisLine: {

			lineStyle: {
			color: 'balck' //Y轴颜色
			},
			},
			splitLine: {
			show: false,
			lineStyle: {
			color: 'balck'
			}
			},

			}],
			xAxis: [{
			'type': 'value',
			'name': '',

			splitNumber: 8, //轴线个数
			nameTextStyle: {
			color: 'balck'
			},
			axisLine: {
			lineStyle: {
			color: '#ffa597' //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()(256256*256-1)).toString(16);//随机生成颜色
			var colorList = ['#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd', '#749f83',
			'#ca8622', '#bda29a', '#a8d8ea', '#aa96da', '#fcbad3', '#ffffd2',
			'#f38181', '#fce38a', '#eaffd0', '#95e1d3', '#e3fdfd', '#749f83', '#ca8622'
			];
			// 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: '50%',
			barGap: '-100%',
			label: {
			normal: {
			show: true,
			fontSize: 16, //标签国家字体大小
			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()(256256*256-1)).toString(16);//随机生成颜色
			var colorList = ['#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd', '#749f83',
			'#ca8622', '#bda29a', '#a8d8ea', '#aa96da', '#fcbad3', '#ffffd2',
			'#f38181', '#fce38a', '#eaffd0', '#95e1d3', '#e3fdfd', '#749f83', '#ca8622'
			];
			// 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);
			}