From 91d0b30597f2dd174fd658e3d086c73a1bf3ce10 Mon Sep 17 00:00:00 2001
From: wyb <1qaz@123>
Date: 星期三, 12 五月 2021 18:29:21 +0800
Subject: [PATCH] 柱状图
---
HDMap.html | 339 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 338 insertions(+), 1 deletions(-)
diff --git a/HDMap.html b/HDMap.html
index 159f2d4..5b06465 100644
--- a/HDMap.html
+++ b/HDMap.html
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/dataCenterGlobal.css">
<link rel="stylesheet" type="text/css" href="./css/new30.css">
+ <script type="text/javascript" src="./js/global.js"></script>
<style>
body {
background: #001123;
@@ -16,6 +17,11 @@
.left .shuju_box .shuju {
width: 121px;
height: 100px
+ }
+
+ .left,
+ .right {
+ top: 320px
}
</style>
</head>
@@ -83,9 +89,15 @@
</div>
</div>
- <div class="map2" id="map_1" style="width: 100%;"></div>
+ <div class="map2" id="map_1" style="width: 100%;">
+ </div>
+ <div id="zzt" class="left" style="width:600px;height: 600px;border: 1px solid red;">
+
+ <h2>鏌辩姸鍥惧瓨鏀惧湴鏂�</h2>
+
+ </div>
</body>
@@ -464,10 +476,14 @@
]
};
+
+
$.getJSON('./json/world.json', function (globalJson) {
echarts.registerMap('world', globalJson);
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
var chart = echarts.init(document.getElementById('map_1'));
+ // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
+ var chart1 = echarts.init(document.getElementById('zzt'));
chart.setOption({
series: [{
type: 'map',
@@ -482,4 +498,325 @@
WorldMapData.Init();
+
+ $(function () {
+ var mychart1 = echarts.init(document.getElementById('zzt'));
+ aa(mychart1);
+ //鏍规嵁绐楀彛鐨勫ぇ灏忓彉鍔ㄥ浘琛� --- 閲嶇偣
+ window.onresize = function () {
+ myChart1.resize();
+ }
+ })
+ 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,],
+ ];
+
+ 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'
+ }
+ },
+
+ },
+ title: {
+ text: '',
+ right: '2%',
+ bottom: '8%',
+ textStyle: {
+ fontSize: 50,
+ color: 'black' //鏍囬瀛椾綋棰滆壊
+ }
+ },
+ tooltip: {
+ 'trigger': 'axis'
+ },
+ calculable: true,
+ grid: {
+ left: '8%',
+ right: '2%',
+ bottom: '6%',
+ top: '0%',
+ containLabel: true
+ },
+ label: {
+ normal: {
+ textStyle: {
+ color: 'red'
+ }
+ }
+ },
+ yAxis: [{
+
+ nameGap: 50,
+ offset: '37',
+ 'type': 'category',
+ interval: 50,
+ //inverse: ture,//鍥捐〃鍊掑彊鎴栬�呮搴忔帓鐗�
+ data: '',
+ nameTextStyle: {
+ color: 'red'
+ },
+
+
+ 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 = ['#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()*(256*256*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)];
+ },
+
+ }
+ },
+ },
+
+ {
+ '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()*(256*256*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);
+ }
+
+
</script>
\ No newline at end of file
--
Gitblit v1.9.1