From 1c5748223902dc41a2cc3199b4e73086be957bde Mon Sep 17 00:00:00 2001
From: wyb <1qaz@123>
Date: 星期五, 14 五月 2021 14:44:52 +0800
Subject: [PATCH] 世界地图完成以及top10排行
---
HDMap.html | 409 ++++++++++++++++------------------------------------------
1 files changed, 112 insertions(+), 297 deletions(-)
diff --git a/HDMap.html b/HDMap.html
index 9f5647a..9328f44 100644
--- a/HDMap.html
+++ b/HDMap.html
@@ -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);//灏嗘坊鍔犲ソ鐨刵ame鍊煎湪濉厖鍒版暟缁勪竴閲�
- maparry3.push(maparry4);//灏嗘坊鍔犲ソ鐨剉alue鍊煎～鍏呭埌鏁扮粍閲�
- 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);//灏嗘坊鍔犲ソ鐨刵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);
@@ -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()*(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);
}
--
Gitblit v1.9.1