TV.kanbanUI.git

			@@ -93,7 +93,7 @@

			</div>

			<div id="zzt" class="left" style="width:355px;height: 355px;">
			<div id="zzt" class="left" style="width:400px;height: 400px;">

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

			@@ -138,16 +138,24 @@

			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 = [];
			}
			// 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);

			@@ -443,307 +451,114 @@
			}
			})
			function aa(mychart1) {
			console.log(maparry1)
			console.log(maparry3)
			var years = ['2019', '2020', '2021'];
			var jdData = maparry1;

			var data = maparry3;

			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()(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轴颜色
			},
			},
			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()(256256*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()(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'
			];
			// 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);
			}