| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244 |
- <!--********************************************************************
- * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
- *********************************************************************-->
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title data-i18n="resources.title_l_echartsEarthquake1"></title>
- <script type="text/javascript" include="papaparse,jquery" src="../js/include-web.js"></script>
- </head>
- <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
- <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
- <script type="text/javascript" include="echarts" src="../../dist/leaflet/include-leaflet.js"></script>
- <script type="text/javascript">
- var host = window.isLocal ? window.server : "https://iserver.supermap.io";
- var map, url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
- map = L.map('map', {
- center: [32.67, 109.06],
- maxZoom: 18,
- minZoom:3,
- zoom: 4
- });
- var heatMapLayer;
- L.supermap.tiledMapLayer(url).addTo(map);
- addFeature();
- function addFeature() {
- $.get("../data/chinaEarthquake.csv", function (response) {
- var dataObj = Papa.parse(response, {skipEmptyLines: true, header: true});
- var data = dataObj.data;
- //热力图点
- var heatMapPoints = {};
- //柱状图的点
- var barPoints = {};
- for (var i = 0; i < data.length; i++) {
- var date = new Date(data[i].date);
- var month = date.getMonth() + 1;
- var year = date.getFullYear();
- var point = [parseFloat(data[i].X), parseFloat(data[i].Y), parseFloat(data[i].level)];
- if (year > 2007 && year < 2018) {
- //构造热力图数据
- if (!heatMapPoints[year]) {
- heatMapPoints[year] = [point];
- } else {
- heatMapPoints[year].push(point);
- }
- //构造柱状图数据
- barPoints[year] = barPoints[year] ? barPoints[year] : {};
- if (!barPoints[year][month]) {
- barPoints[year][month] = 1;
- } else {
- ++barPoints[year][month];
- }
- }
- }
- var option = {
- baseOption: {
- animationDurationUpdate: 1000,
- animationEasingUpdate: 'quinticInOut',
- timeline: {
- axisType: 'category',
- orient: 'vertical',
- autoPlay: true,
- inverse: true,
- playInterval: 3000,
- left: null,
- right: 30,
- top: 20,
- bottom: 40,
- width: 55,
- height: null,
- label: {
- normal: {textStyle: {color: '#ddd'}},
- emphasis: {textStyle: {color: '#fff'}}
- },
- symbol: 'none',
- lineStyle: {color: '#fff'},
- checkpointStyle: {color: '#bbb', borderColor: '#777', borderWidth: 2},
- controlStyle: {
- showNextBtn: false,
- showPrevBtn: false,
- normal: {color: '#666', borderColor: '#666'},
- emphasis: {color: '#aaa', borderColor: '#aaa'}
- },
- data: ['2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017']
- },
- title: {
- subtext: resources.text_echartsEarthquake_sub_title,
- }
- },
- //options的设置
- options: []
- };
- for (var key in heatMapPoints) {
- var barData = [
- barPoints[key][1], barPoints[key][2], barPoints[key][3],
- barPoints[key][4], barPoints[key][5], barPoints[key][6], barPoints[key][7],
- barPoints[key][8], barPoints[key][9], barPoints[key][10], barPoints[key][11], barPoints[key][12]
- ];
- option.options.push({
- //热力图的配置
- title: {
- text: resources.text_l_echartsEarthquake,
- left: 'center',
- top: 30,
- textStyle: {
- color: '#fff'
- }
- },
- visualMap: {
- show: false,
- min: 0,
- max: 5,
- seriesIndex: 0,
- calculable: true,
- inRange: {
- color: ['blue', 'green', 'yellow', 'red']
- }
- },
- grid: {
- left: 50,
- bottom: '10%',
- width: '30%',
- height: '30%',
- textStyle: {
- color: "#fff"
- },
- },
- tooltip: {
- trigger: "item",
- textStyle: {
- fontSize: 12
- },
- formatter: "{b0}:{c0}"
- },
- //bar的x,y坐标
- xAxis: [{
- data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
- axisLabel: {color: '#fff'},
- axisLine: {lineStyle: {color: "#fff"}},
- name: resources.text_l_echartsEarthquake_x_coordinate
- }],
- yAxis: [{
- type: 'value',
- splitLine: {show: false},
- axisLabel: {color: '#fff'},
- axisLine: {lineStyle: {color: "#fff"}},
- name: resources.text_echartsEarthquake_sub_title
- }],
- series: [
- //heatmap
- {
- type: 'heatmap',
- coordinateSystem: "leaflet",
- data: heatMapPoints[key],
- pointSize: 10,
- blurSize: 15
- },
- //bar
- {
- type: 'bar',
- label: {show: true,
- position:'top',
- color:'#fff'
- },
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0, 0, 0, 1,
- [
- {offset: 0, color: 'red'},
- {offset: 0.5, color: 'yellow'},
- {offset: 1, color: 'red'}
- ]
- ),
- barBorderRadius: 15
- },
- emphasis: {
- color: new echarts.graphic.LinearGradient(
- 0, 0, 0, 1,
- [
- {offset: 0, color: 'red'},
- {offset: 0.7, color: 'yellow'},
- {offset: 1, color: 'red'}
- ]
- )
- }
- },
- barWidth: 20,
- barGap: 5,
- data: barData
- },
- //pie的显示
- {
- type: 'pie',
- radius: ['8%', '20%'],
- center: ['10%', '25%'],
- data: [
- {value: barData[0] + barData[1] + barData[2], name: resources.text_quarter_1},
- {value: barData[3] + barData[4] + barData[5], name: resources.text_quarter_2},
- {value: barData[6] + barData[7] + barData[8], name: resources.text_quarter_3},
- {value: barData[9] + barData[10] + barData[11], name: resources.text_quarter_4},
- ].sort(function (a, b) { return a.value - b.value; }),
- roseType: 'angle',
- label: {
- normal: {
- textStyle: {
- color: 'rgba(255, 255, 255, 0.7)'
- }
- }
- },
- labelLine: {
- normal: {
- lineStyle: {
- color: 'rgba(255, 255, 255, 0.7)'
- },
- smooth: 0.2,
- length: 10,
- length2: 20
- }
- },
- itemStyle: {
- normal: {
- color: 'orange',
- shadowBlur: 200,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- },
- animationType: 'scale',
- animationEasing: 'elasticOut',
- animationDelay: function (idx) {
- return Math.random() * 200;
- }
- }
- ]
- })
- }
- heatMapLayer = L.supermap.echartsLayer(option).addTo(map);
- });
- }
- </script>
- </body>
- </html>
|
