| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- </head>
- <body>
- <div id="main" style="width: 800px;height: 600px;"></div>
- </body>
- <script src="js/echarts.min.js"></script>
- <script src="js/jquery.min.js"></script>
- <script type="text/javascript">
- var myChart = echarts.init(document.getElementById('main'));
- var aymap = "https://geo.datav.aliyun.com/areas_v2/bound/410500_full.json"
- var mapname = aymap
- var mapDate = [{
- name: '安阳县',
- value: [114.295989,36.231785]
- },
- {
- name: '北关区',
- value: [114.362125,36.113991]
- },
- {
- name: '滑县',
- value: [114.525642,35.581353]
- },
- {
- name: '龙安区',
- value: [114.307696,36.082559]
- },
- {
- name: '林州市123',
- value: [113.825847,36.089035]
- },
- {
- name: '内黄县',
- value: [114.907997,35.97751]
- },
- {
- name: '汤阴县',
- value: [114.364023,35.930939]
- },
- {
- name: '文峰区',
- value: [114.398996,36.104678]
- },
- {
- name: '殷都区',
- value:[114.310095,36.115555]
- },
- {
- name: '高新区',
- value:[114.310095,36.115555]
- }
- ];
- // let index = -1;
- // myChart.dispatchAction({
- // type: 'showTip',
- // seriesIndex: 0,
- // dataIndex: index + 1
- // });
- setTimeout(function() {
- mapInit()
- }, 1000);
- var mapInit = () => {
- $.getJSON(mapname, function(geoJson) {
- echarts.registerMap('hanzhou', geoJson);
- myChart.hideLoading();
- option = {
- backgroundColor: '#020933',
- geo: {
- map: 'hanzhou',
- aspectScale: 0.75, //长宽比
- zoom: 1.1,
- roam: false,
- itemStyle: {
- normal: {
- areaColor: '#013C62',
- shadowColor: '#182f68',
- shadowOffsetX: 0,
- shadowOffsetY: 25
- },
- emphasis: {
- show:false,
- borderColor: '#f8e107', //边框颜色
- areaColor: '#0a2944', //鼠标移上去的颜色
- borderWidth: 1
- }
- }
- },
- visualMap: {
- show: false,
- max: 100,
- seriesIndex: [3],
- inRange: {
- color: ['#A5DCF4', '#006edd']
- }
- },
- series: [{
- type: 'map',
- roam: true,
- label: {
- normal: {
- show: true,
- textStyle: {
- color: '#fff'
- }
- },
- emphasis: {
- show:false,
- textStyle: {
- color: '#fff'
- }
- }
- },
-
- itemStyle: {
- normal: {
- borderColor: '#2ab8ff',
- borderWidth: 1.5,
- areaColor: '#12235c'
- },
- emphasis: {
- show:false,
- borderColor: '#f8e107', //边框颜色
- areaColor: '#0a2944', //鼠标移上去的颜色
- borderWidth: 1,
- }
- },
- zoom: 1.1,
- roam: false,
- map: 'hanzhou' //使用
- // data: this.difficultData //热力图数据 不同区域 不同的底色
- },
- {
- type: 'effectScatter',
- coordinateSystem: 'geo',
- showEffectOn: 'render',
- rippleEffect: {
- period: 15,
- scale: 4,
- brushType: 'fill'
- },
- hoverAnimation: true,
- itemStyle: {
- normal: {
- color: '#f0f',
- shadowBlur: 10,
- shadowColor: '#ff0'
- }
- },
- data: mapDate
- }
-
- ]
- };
- myChart.setOption(option);
- });
- }
- </script>
- <!-- <script>
- var myChart = echarts.init(document.getElementById('main'));
- var uploadedDataURL = "format.1629790904713.json";
- var center = {
- "安阳县":[114.295989,36.231785],
- "北关区":[114.362125,36.113991],
- "滑县":[114.525642,35.581353],
- "龙安区":[114.307696,36.082559],
- "高新区":[114.310095,36.115555],
- "殷都区":[114.310095,36.115555],
- "文峰区":[114.398996,36.104678],
- "汤阴县":[114.364023,35.930939],
- "内黄县":[114.907997,35.97751],
- "林州市":[113.825847,36.089035]}
- var option = null;
- $.get(uploadedDataURL, function(json) {
- echarts.registerMap('js', json);
- option = {
- visualMap: {
- show: false,
- max: 100,
- seriesIndex: [3],
- inRange: {
- color: ['#A5DCF4', '#006edd']
- }
- },
- geo: [{
- map: 'js',
- roam: false, //是否允许缩放
- zoom: 1.1, //默认显示级别
- scaleLimit: {
- min: 0,
- max: 3
- }, //缩放级别
- itemStyle: {
- normal: {
- areaColor: '#013C62',
- shadowColor: '#013C62',
- shadowBlur: 20,
- shadowOffsetX: -5,
- shadowOffsetY: 15,
- }
- },
- tooltip: {
- show: false
- }
- }],
- series: [{
- type: 'effectScatter',
- coordinateSystem: 'geo',
- z: 5,
- data: [],
- symbolSize: 14,
- label: {
- normal: {
- show: true,
- formatter: function(params) {
- return '{fline|地点：'+ params.data.city +'}\n{tline|'+ (params.data.info || '发生xx集件') +'}';
- },
- position: 'top',
- backgroundColor: 'rgba(254,174,33,.8)',
- padding: [0, 0],
- borderRadius: 3,
- lineHeight: 32,
- color: '#f7fafb',
- rich: {
- fline: {
- padding: [0, 10, 10, 10],
- color: '#ffffff'
- },
- tline: {
- padding: [10, 10, 0, 10],
- color: '#ffffff'
- }
- }
- },
- emphasis: {
- show: true
- }
- },
- itemStyle: {
- color: '#feae21',
- }
- },
- {
- type: 'effectScatter',
- coordinateSystem: 'geo',
- z: 5,
- data: [],
- symbolSize: 14,
- label: {
- normal: {
- show: true,
- formatter: function(params) {
- return '{fline|地点：'+ params.data.city +'}\n{tline|'+ (params.data.info || '发生xx集件') +'}';
- },
- position: 'top',
- backgroundColor: 'rgba(233,63,66,.9)',
- padding: [0, 0],
- borderRadius: 3,
- lineHeight: 32,
- color: '#ffffff',
- rich: {
- fline: {
- padding: [0, 10, 10, 10],
- color: '#ffffff'
- },
- tline: {
- padding: [10, 10, 0, 10],
- color: '#ffffff'
- }
- }
- },
- emphasis: {
- show: true
- }
- },
- itemStyle: {
- color: '#e93f42',
- }
- },
- {
- type: 'effectScatter',
- coordinateSystem: 'geo',
- z: 5,
- data: [],
- symbolSize: 14,
- label: {
- normal: {
- show: true,
- formatter: function(params) {
- return '{fline|地点：'+ params.data.city +'}\n{tline|'+ (params.data.info || '发生xx集件') +'}';
- },
- position: 'top',
- backgroundColor: 'rgba(8,186,236,.9)',
- padding: [0, 0],
- borderRadius: 3,
- lineHeight: 32,
- color: '#ffffff',
- rich: {
- fline: {
- padding: [0, 10, 10, 10],
- color: '#ffffff'
- },
- tline: {
- padding: [10, 10, 0, 10],
- color: '#ffffff'
- }
- }
- },
- emphasis: {
- show: true
- }
- },
- itemStyle: {
- color: '#08baec',
- }
- },
- //地图
- {
- type: 'map',
- mapType: 'js',
- geoIndex: -1,
- zoom: 1.1, //默认显示级别
- label: {
- show: true,
- color: '#ffffff',
- emphasis: {
- color: 'white',
- show: false
- }
- },
- itemStyle: {
- normal: {
- borderColor: '#2980b9',
- borderWidth: 1,
- areaColor: '#12235c'
- },
- emphasis: {
- areaColor: '#FA8C16',
- borderWidth: 0,
- color: 'green'
- }
- },
- data: Object.keys(center).map(name => {return {
- name: name,
- value: Math.random()*100
- }})
- }
- ]
- };
- myChart.setOption(option);
- });
- // var timer = setInterval(() => {
- // //数据情况重绘，清除formatter移动效果，也可根据自身需求是否需要，删除这两行代码
- // /*option.series[seriesjson[runidx].createType-1].data = [];
- // myChart.setOption(option, true);*/
- // for(var i=0; i<3; i++){
- // option.series[i].data = [];
- // }
- // var cityIndex = Math.floor(Math.random() * 13);
- // var runidx = Math.floor(Math.random() * 3);
- // var coordCity = Object.keys(center)[cityIndex];
- // var coord = center[coordCity];
- // option.series[runidx].data = [{
- // city: coordCity,
- // value: coord
- // }];
- // // console.log(option.series[runidx].data)
- // // option.series[4].data = option.series[4].data.sort(function(a,b){
- // // return b.value-a.value;
- // // });
- // myChart.setOption(option, true);
- // }, Math.floor(Math.random() * 10000) + 3000);
- </script> -->
- </html>
|
