1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420 |
- $(function () {
- echart_1();
- echart_2();
- echart_3();
- echart_4();
- echart_map();
- echart_5();
-
- function echart_1() {
-
- var myChart = echarts.init(document.getElementById('chart_1'));
- option = {
- tooltip: {
- trigger: 'item',
- formatter: "{a} <br/>{b} : {c}万元"
- },
- legend: {
- x: 'center',
- y: '15%',
- data: [ '张家口', '承德', '衡水','邢台', '邯郸', '保定','秦皇岛','石家庄', '唐山'],
- icon: 'circle',
- textStyle: {
- color: '#fff',
- }
- },
- calculable: true,
- series: [{
- name: '',
- type: 'pie',
-
- startAngle: 0,
-
- radius: [41, 100.75],
-
- center: ['50%', '40%'],
-
-
-
- roseType: 'area',
-
- avoidLabelOverlap: false,
- label: {
- normal: {
- show: true,
- formatter: '{c}万元'
- },
- emphasis: {
- show: true
- }
- },
- labelLine: {
- normal: {
- show: true,
- length2: 1,
- },
- emphasis: {
- show: true
- }
- },
- data: [{
- value: 900.58,
- name: '张家口',
- itemStyle: {
- normal: {
- color: '#f845f1'
- }
- }
- },
- {
- value: 1100.58,
- name: '承德',
- itemStyle: {
- normal: {
- color: '#ad46f3'
- }
- }
- },
- {
- value: 1200.58,
- name: '衡水',
- itemStyle: {
- normal: {
- color: '#5045f6'
- }
- }
- },
- {
- value: 1300.58,
- name: '邢台',
- itemStyle: {
- normal: {
- color: '#4777f5'
- }
- }
- },
- {
- value: 1400.58,
- name: '邯郸',
- itemStyle: {
- normal: {
- color: '#44aff0'
- }
- }
- },
- {
- value: 1500.58,
- name: '保定',
- itemStyle: {
- normal: {
- color: '#45dbf7'
- }
- }
- },
- {
- value: 1500.58,
- name: '秦皇岛',
- itemStyle: {
- normal: {
- color: '#f6d54a'
- }
- }
- },
- {
- value: 1600.58,
- name: '石家庄',
- itemStyle: {
- normal: {
- color: '#f69846'
- }
- }
- },
- {
- value: 1800,
- name: '唐山',
- itemStyle: {
- normal: {
- color: '#ff4343'
- }
- }
- },
- {
- value: 0,
- name: "",
- itemStyle: {
- normal: {
- color: 'transparent'
- }
- },
- label: {
- show: false
- },
- labelLine: {
- show: false
- }
- },
- {
- value: 0,
- name: "",
- itemStyle: {
- normal: {
- color: 'transparent'
- }
- },
- label: {
- show: false
- },
- labelLine: {
- show: false
- }
- },
- {
- value: 0,
- name: "",
- itemStyle: {
- normal: {
- color: 'transparent'
- }
- },
- label: {
- show: false
- },
- labelLine: {
- show: false
- }
- },
- {
- value: 0,
- name: "",
- itemStyle: {
- normal: {
- color: 'transparent'
- }
- },
- label: {
- show: false
- },
- labelLine: {
- show: false
- }
- },
- {
- value: 0,
- name: "",
- itemStyle: {
- normal: {
- color: 'transparent'
- }
- },
- label: {
- show: false
- },
- labelLine: {
- show: false
- }
- },
- {
- value: 0,
- name: "",
- itemStyle: {
- normal: {
- color: 'transparent'
- }
- },
- label: {
- show: false
- },
- labelLine: {
- show: false
- }
- },
- {
- value: 0,
- name: "",
- itemStyle: {
- normal: {
- color: 'transparent'
- }
- },
- label: {
- show: false
- },
- labelLine: {
- show: false
- }
- },
- {
- value: 0,
- name: "",
- itemStyle: {
- normal: {
- color: 'transparent'
- }
- },
- label: {
- show: false
- },
- labelLine: {
- show: false
- }
- },
- {
- value: 0,
- name: "",
- itemStyle: {
- normal: {
- color: 'transparent'
- }
- },
- label: {
- show: false
- },
- labelLine: {
- show: false
- }
- }
- ]
- }]
- };
-
-
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
- });
- }
-
- function echart_2() {
-
- var myChart = echarts.init(document.getElementById('chart_2'));
- function showProvince() {
- myChart.setOption(option = {
-
- visualMap: {
- show: false,
- min: 0,
- max: 100,
- left: 'left',
- top: 'bottom',
- text: ['高', '低'],
- calculable: true,
- inRange: {
- color: ['yellow', 'lightskyblue', 'orangered']
- }
- },
- series: [{
- type: 'map',
- mapType: 'hunan',
- roam: true,
- label: {
- normal: {
- show: true
- },
- emphasis: {
- textStyle: {
- color: '#fff'
- }
- }
- },
- itemStyle: {
- normal: {
- borderColor: '#389BB7',
- areaColor: '#fff',
- },
- emphasis: {
- areaColor: '#389BB7',
- borderWidth: 0
- }
- },
- animation: false,
- data: [{
- name: '长沙市',
- value: 100
- }, {
- name: '株洲市',
- value: 96
- }, {
- name: '湘潭市',
- value: 98
- }, {
- name: '衡阳市',
- value: 80
- }, {
- name: '邵阳市',
- value: 88
- }, {
- name: '岳阳市',
- value: 79
- }, {
- name: '常德市',
- value: 77,
- }, {
- name: '张家界市',
- value: 33
- }, {
- name: '益阳市',
- value: 69,
- }, {
- name: '郴州市',
- value: 66
- }, {
- name: '永州市',
- value: 22
- },{
- name: '娄底市',
- value: 51
- },{
- name: '湘西土家族苗族自治州',
- value: 44
- },{
- name: '怀化市',
- value: 9
- }]
- }]
- });
- }
-
- var currentIdx = 0;
- showProvince();
-
- window.addEventListener("resize", function () {
- myChart.resize();
- });
- }
-
- function echart_map() {
-
- var myChart = echarts.init(document.getElementById('chart_map'));
- var mapName = 'china'
- var data = []
- var toolTipData = [];
-
- myChart.showLoading();
- var mapFeatures = echarts.getMap(mapName).geoJson.features;
- myChart.hideLoading();
- var geoCoordMap = {
- '福州': [119.4543, 25.9222],
- '长春': [125.8154, 44.2584],
- '重庆': [107.7539, 30.1904],
- '西安': [109.1162, 34.2004],
- '成都': [103.9526, 30.7617],
- '常州': [119.4543, 31.5582],
- '北京': [116.4551, 40.2539],
- '北海': [109.314, 21.6211],
- '海口': [110.3893, 19.8516],
- '长沙': [113.019455,28.200103],
- '上海': [121.40, 31.73],
- '内蒙古': [106.82, 39.67]
- };
- var GZData = [
- [{
- name: '长沙'
- }, {
- name: '福州',
- value: 95
- }],
- [{
- name: '长沙'
- }, {
- name: '长春',
- value: 80
- }],
- [{
- name: '长沙'
- }, {
- name: '重庆',
- value: 70
- }],
- [{
- name: '长沙'
- }, {
- name: '西安',
- value: 60
- }],
- [{
- name: '长沙'
- }, {
- name: '成都',
- value: 50
- }],
- [{
- name: '长沙'
- }, {
- name: '常州',
- value: 40
- }],
- [{
- name: '长沙'
- }, {
- name: '北京',
- value: 30
- }],
- [{
- name: '长沙'
- }, {
- name: '北海',
- value: 20
- }],
- [{
- name: '长沙'
- }, {
- name: '海口',
- value: 10
- }],
- [{
- name: '长沙'
- }, {
- name: '上海',
- value: 80
- }],
- [{
- name: '长沙'
- }, {
- name: '内蒙古',
- value: 80
- }]
- ];
- var convertData = function (data) {
- var res = [];
- for (var i = 0; i < data.length; i++) {
- var dataItem = data[i];
- var fromCoord = geoCoordMap[dataItem[0].name];
- var toCoord = geoCoordMap[dataItem[1].name];
- if (fromCoord && toCoord) {
- res.push({
- fromName: dataItem[0].name,
- toName: dataItem[1].name,
- coords: [fromCoord, toCoord]
- });
- }
- }
- return res;
- };
- var color = ['#c5f80e'];
- var series = [];
- [
- ['石家庄', GZData]
- ].forEach(function (item, i) {
- series.push({
- name: item[0],
- type: 'lines',
- zlevel: 2,
- symbol: ['none', 'arrow'],
- symbolSize: 10,
- effect: {
- show: true,
- period: 6,
- trailLength: 0,
- symbol: 'arrow',
- symbolSize: 5
- },
- lineStyle: {
- normal: {
- color: color[i],
- width: 1,
- opacity: 0.6,
- curveness: 0.2
- }
- },
- data: convertData(item[1])
- }, {
- name: item[0],
- type: 'effectScatter',
- coordinateSystem: 'geo',
- zlevel: 2,
- rippleEffect: {
- brushType: 'stroke'
- },
- label: {
- normal: {
- show: true,
- position: 'right',
- formatter: '{b}'
- }
- },
- symbolSize: function (val) {
- return val[2] / 8;
- },
- itemStyle: {
- normal: {
- color: color[i]
- }
- },
- data: item[1].map(function (dataItem) {
- return {
- name: dataItem[1].name,
- value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
- };
- })
- });
- });
- option = {
- tooltip: {
- trigger: 'item'
- },
- geo: {
- map: 'china',
- label: {
- emphasis: {
- show: false
- }
- },
- roam: true,
- itemStyle: {
- normal: {
- borderColor: 'rgba(147, 235, 248, 1)',
- borderWidth: 1,
- areaColor: {
- type: 'radial',
- x: 0.5,
- y: 0.5,
- r: 0.8,
- colorStops: [{
- offset: 0,
- color: 'rgba(175,238,238, 0)'
- }, {
- offset: 1,
- color: 'rgba(47,79,79, .1)'
- }],
- globalCoord: false
- },
- shadowColor: 'rgba(128, 217, 248, 1)',
-
- shadowOffsetX: -2,
- shadowOffsetY: 2,
- shadowBlur: 10
- },
- emphasis: {
- areaColor: '#389BB7',
- borderWidth: 0
- }
- }
- },
- series: series
- };
-
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
- });
- }
-
- function echart_3() {
-
- var myChart = echarts.init(document.getElementById('chart_3'));
- myChart.clear();
- option = {
- title: {
- text: ''
- },
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data:['铁路货物','国家铁路货物','地方铁路货物','合资铁路货物','公路货物','水运货物'],
- textStyle:{
- color: '#fff'
- },
- top: '8%'
- },
- grid: {
- top: '40%',
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- color: ['#FF4949','#FFA74D','#FFEA51','#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'],
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['2012年','2013年','2014年','2015年','2016年'],
- splitLine: {
- show: false
- },
- axisLine: {
- lineStyle: {
- color: '#fff'
- }
- }
- },
- yAxis: {
- name: '亿吨公里',
- type: 'value',
- splitLine: {
- show: false
- },
- axisLine: {
- lineStyle: {
- color: '#fff'
- }
- }
- },
- series: [
- {
- name:'铁路货物',
- type:'line',
- data:[3961.88, 4233.63, 4183.14, 3633.01, 3704.47]
- },
- {
- name:'国家铁路货物',
- type:'line',
- data:[3374.76, 3364.76, 3274.76, 3371.82, 3259.87]
- },
- {
- name:'地方铁路货物',
- type:'line',
- data:[14.77, 15.17, 13.17, 14.56, 15.84]
- },
- {
- name:'合资铁路货物',
- type:'line',
- data:[686.17,847.26,895.22,865.28,886.72]
- },
- {
- name:'公路货物',
- type:'line',
- data:[6133.47, 6577.89, 7019.56,6821.48,7294.59]
- },
- {
- name:'水运货物',
- type:'line',
- data:[509.60, 862.54, 1481.77,1552.79,1333.62]
- }
- ]
- };
- myChart.setOption(option);
- }
-
- function echart_4() {
-
- var myChart = echarts.init(document.getElementById('chart_4'));
- myChart.setOption({
- series: [{
- type: 'map',
- mapType: 'hunan'
- }]
- });
- var geoCoordMap = {
- '怀化': [109.999867,27.518949],
- '吉首': [109.741528,28.332629],
- '张家界': [110.491722,29.112001],
- '常德': [111.701486,29.076683],
- '益阳': [112.348741,28.544124],
- '岳阳': [113.126486,29.382401],
- '长沙': [113.019455,28.200103],
- '株洲': [113.163141,27.8418],
- '湘潭': [112.91977,27.882141],
- '邵阳': [111.467859,27.21915],
- '娄底': [112.012438,27.745506],
- '衡阳': [112.63809,26.895225],
- '永州': [111.577632,26.460144],
- '郴州': [113.039396,25.81497]
- };
- var goData = [
- [{
- name: '张家界'
- }, {
- id: 1,
- name: '常德',
- value: 86
- }],
- [{
- name: '吉首'
- }, {
- id: 1,
- name: '常德',
- value: 86
- }],
- [{
- name: '常德'
- }, {
- id: 1,
- name: '益阳',
- value: 70
- }],
- [{
- name: '益阳'
- }, {
- id: 1,
- name: '长沙',
- value: 95
- }],
- [{
- name: '长沙'
- }, {
- id: 1,
- name: '岳阳',
- value: 70
- }],
- [{
- name: '长沙'
- }, {
- id: 1,
- name: '湘潭',
- value: 80
- }],
- [{
- name: '长沙'
- }, {
- id: 1,
- name: '株洲',
- value: 80
- }],
- [{
- name: '长沙'
- }, {
- id: 1,
- name: '衡阳',
- value: 80
- }],
- [{
- name: '衡阳'
- }, {
- id: 1,
- name: '郴州',
- value: 70
- }],
- [{
- name: '衡阳'
- }, {
- id: 1,
- name: '永州',
- value: 70
- }],
- [{
- name: '湘潭'
- }, {
- id: 1,
- name: '娄底',
- value: 60
- }],
- [{
- name: '娄底'
- }, {
- id: 1,
- name: '邵阳',
- value: 75
- }],
- [{
- name: '邵阳'
- }, {
- id: 1,
- name: '怀化',
- value: 75
- }],
- ];
-
- var backData = [
- [{
- name: '常德'
- }, {
- id: 1,
- name: '张家界',
- value: 80
- }],
- [{
- name: '常德'
- }, {
- id: 1,
- name: '吉首',
- value: 66
- }],
- [{
- name: '益阳'
- }, {
- id: 1,
- name: '常德',
- value: 86
- }],
- [{
- name: '长沙'
- }, {
- id: 1,
- name: '益阳',
- value: 70
- }],
- [{
- name: '岳阳'
- }, {
- id: 1,
- name: '长沙',
- value: 95
- }],
- [{
- name: '湘潭'
- }, {
- id: 1,
- name: '长沙',
- value: 95
- }],
- [{
- name: '株洲'
- }, {
- id: 1,
- name: '长沙',
- value: 95
- }],
- [{
- name: '衡阳'
- }, {
- id: 1,
- name: '长沙',
- value: 95
- }],
- [{
- name: '郴州'
- }, {
- id: 1,
- name: '衡阳',
- value: 80
- }],
- [{
- name: '永州'
- }, {
- id: 1,
- name: '衡阳',
- value: 80
- }],
- [{
- name: '娄底'
- }, {
- id: 1,
- name: '湘潭',
- value: 80
- }],
- [{
- name: '邵阳'
- }, {
- id: 1,
- name: '娄底',
- value: 60
- }],
- [{
- name: '怀化'
- }, {
- id: 1,
- name: '邵阳',
- value: 75
- }],
- ];
- var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
- var arcAngle = function(data) {
- var j, k;
- for (var i = 0; i < data.length; i++) {
- var dataItem = data[i];
- if (dataItem[1].id == 1) {
- j = 0.2;
- return j;
- } else if (dataItem[1].id == 2) {
- k = -0.2;
- return k;
- }
- }
- }
- var convertData = function(data) {
- var res = [];
- for (var i = 0; i < data.length; i++) {
- var dataItem = data[i];
- var fromCoord = geoCoordMap[dataItem[0].name];
- var toCoord = geoCoordMap[dataItem[1].name];
- if (dataItem[1].id == 1) {
- if (fromCoord && toCoord) {
- res.push([{
- coord: fromCoord,
- }, {
- coord: toCoord,
- value: dataItem[1].value
- }]);
- }
- } else if (dataItem[1].id == 2) {
- if (fromCoord && toCoord) {
- res.push([{
- coord: fromCoord,
- }, {
- coord: toCoord
- }]);
- }
- }
- }
- return res;
- };
- var color = ['#fff', '#FF1493', '#0000FF'];
- var series = [];
- [
- ['1', goData],
- ['2', backData]
- ].forEach(function(item, i) {
- series.push({
- name: item[0],
- type: 'lines',
- zlevel: 2,
- symbol: ['arrow', 'arrow'],
-
- effect: {
- show: true,
- period: 6,
- trailLength: 0.1,
- symbol: 'arrow',
- symbolSize: 5
- },
- lineStyle: {
- normal: {
- width: 1,
- opacity: 0.4,
- curveness: arcAngle(item[1]),
- color: '#fff'
- }
- },
- edgeLabel: {
- normal: {
- show: true,
- textStyle: {
- fontSize: 14
- },
- formatter: function(params) {
- var txt = '';
- if (params.data.speed !== undefined) {
- txt = params.data.speed;
- }
- return txt;
- },
- }
- },
- data: convertData(item[1])
- }, {
- type: 'effectScatter',
- coordinateSystem: 'geo',
- zlevel: 2,
-
- rippleEffect: {
- period: 2,
- brushType: 'stroke',
- scale: 3
- },
- label: {
- normal: {
- show: true,
- color: '#fff',
- position: 'right',
- formatter: '{b}'
- }
- },
-
- symbol: 'circle',
-
- symbolSize: function(val) {
- return val[2] / 8;
- },
- itemStyle: {
- normal: {
- show: true
- }
- },
- data: item[1].map(function(dataItem) {
- return {
- name: dataItem[1].name,
- value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
- };
- })
- });
- });
- option = {
- title: {
- text: '',
- subtext: '',
- left: 'center',
- textStyle: {
- color: '#fff'
- }
- },
- tooltip: {
- trigger: 'item',
- formatter: '{b}'
- },
-
- visualMap: {
- show: false,
- min: 0,
- max: 100,
- color: ['#31A031','#31A031']
- },
-
- geo: {
- map: 'hunan',
-
- zoom: 1,
-
- label: {
- normal: {
- show: false,
- textStyle: {
- color: '#fff'
- }
- },
- emphasis: {
- textStyle: {
- color: '#fff'
- }
- }
- },
-
- roam: true,
- itemStyle: {
- normal: {
-
- borderColor: 'rgba(147, 235, 248, 1)',
- borderWidth: 1,
- areaColor: {
- type: 'radial',
- x: 0.5,
- y: 0.5,
- r: 0.8,
- colorStops: [{
- offset: 0,
- color: 'rgba(175,238,238, 0)'
- }, {
- offset: 1,
- color: 'rgba( 47,79,79, .2)'
- }],
- globalCoord: false
- },
- shadowColor: 'rgba(128, 217, 248, 1)',
-
- shadowOffsetX: -2,
- shadowOffsetY: 2,
- shadowBlur: 10
- },
- emphasis: {
- areaColor: '#389BB7',
- borderWidth: 0
- }
- }
- },
- series: series
- };
- myChart.setOption(option);
- }
-
- function echart_5() {
-
- var myChart = echarts.init(document.getElementById('chart_5'));
- function showProvince() {
- var geoCoordMap = {
- '长沙黄花国际机场': [113.226512,28.192929],
- '张家界荷花机场': [110.454598,29.107223],
- '常德桃花源机场': [111.651508,28.921516],
- '永州零陵机场': [111.622869,26.340994],
- '怀化芷江机场': [109.714784,27.44615],
- };
- var data = [{
- name: '长沙黄花国际机场',
- value: 100
- },
- {
- name: '张家界荷花机场',
- value: 100
- },
- {
- name: '常德桃花源机场',
- value: 100
- },
- {
- name: '永州零陵机场',
- value: 100
- },
- {
- name: '怀化芷江机场',
- value: 100
- }
- ];
- var max = 480,
- min = 9;
- var maxSize4Pin = 100,
- minSize4Pin = 20;
- var convertData = function (data) {
- var res = [];
- for (var i = 0; i < data.length; i++) {
- var geoCoord = geoCoordMap[data[i].name];
- if (geoCoord) {
- res.push({
- name: data[i].name,
- value: geoCoord.concat(data[i].value)
- });
- }
- }
- return res;
- };
- myChart.setOption(option = {
- title: {
- top: 20,
- text: '',
- subtext: '',
- x: 'center',
- textStyle: {
- color: '#ccc'
- }
- },
- legend: {
- orient: 'vertical',
- y: 'bottom',
- x: 'right',
- data: ['pm2.5'],
- textStyle: {
- color: '#fff'
- }
- },
- visualMap: {
- show: false,
- min: 0,
- max: 500,
- left: 'left',
- top: 'bottom',
- text: ['高', '低'],
- calculable: true,
- seriesIndex: [1],
- inRange: {
- }
- },
- geo: {
- show: true,
- map:'hunan',
- mapType: 'hunan',
- label: {
- normal: {
- },
-
- emphasis: {
- textStyle: {
- color: '#fff'
- }
- }
- },
-
- roam: true,
- itemStyle: {
- normal: {
-
- borderColor: 'rgba(147, 235, 248, 1)',
- borderWidth: 1,
- areaColor: {
- type: 'radial',
- x: 0.5,
- y: 0.5,
- r: 0.8,
- colorStops: [{
- offset: 0,
- color: 'rgba(175,238,238, 0)'
- }, {
- offset: 1,
- color: 'rgba( 47,79,79, .2)'
- }],
- globalCoord: false
- },
- shadowColor: 'rgba(128, 217, 248, 1)',
- shadowOffsetX: -2,
- shadowOffsetY: 2,
- shadowBlur: 10
- },
- emphasis: {
- areaColor: '#389BB7',
- borderWidth: 0
- }
- }
- },
- series: [{
- name: 'light',
- type: 'map',
- coordinateSystem: 'geo',
- data: convertData(data),
- itemStyle: {
- normal: {
- color: '#F4E925'
- }
- }
- },
- {
- name: '点',
- type: 'scatter',
- coordinateSystem: 'geo',
- symbol: 'pin',
- symbolSize: function(val) {
- var a = (maxSize4Pin - minSize4Pin) / (max - min);
- var b = minSize4Pin - a * min;
- b = maxSize4Pin - a * max;
- return a * val[2] + b;
- },
- label: {
- normal: {
-
-
-
-
-
- }
- },
- itemStyle: {
- normal: {
- color: '#F62157',
- }
- },
- zlevel: 6,
- data: convertData(data),
- },
- {
- name: 'light',
- type: 'map',
- mapType: 'hunan',
- geoIndex: 0,
- aspectScale: 0.75,
- showLegendSymbol: false,
- label: {
- normal: {
- show: false
- },
- emphasis: {
- show: false,
- textStyle: {
- color: '#fff'
- }
- }
- },
- roam: true,
- itemStyle: {
- normal: {
- areaColor: '#031525',
- borderColor: '#FFFFFF',
- },
- emphasis: {
- areaColor: '#2B91B7'
- }
- },
- animation: false,
- data: data
- },
- {
- name: ' ',
- type: 'effectScatter',
- coordinateSystem: 'geo',
- data: convertData(data.sort(function (a, b) {
- return b.value - a.value;
- }).slice(0, 5)),
- symbolSize: function (val) {
- return val[2] / 10;
- },
- showEffectOn: 'render',
- rippleEffect: {
- brushType: 'stroke'
- },
- hoverAnimation: true,
- label: {
- normal: {
- formatter: '{b}',
- position: 'right',
- show: true
- }
- },
- itemStyle: {
- normal: {
- color: '#05C3F9',
- shadowBlur: 10,
- shadowColor: '#05C3F9'
- }
- },
- zlevel: 1
- },
- ]
- });
- }
- showProvince();
-
-
- window.addEventListener("resize", function () {
- myChart.resize();
- });
- }
-
- $('#chart_map').click(function(){
- window.location.href = './page/index.html';
- });
- $('.t_btn2').click(function(){
- window.location.href = "./page/index.html?id=2";
- });
- $('.t_btn3').click(function(){
- window.location.href = "./page/index.html?id=3";
- });
- $('.t_btn4').click(function(){
- window.location.href = "./page/index.html?id=4";
- });
- $('.t_btn5').click(function(){
- window.location.href = "./page/index.html?id=5";
- });
- $('.t_btn6').click(function(){
- window.location.href = "./page/index.html?id=6";
- });
- $('.t_btn7').click(function(){
- window.location.href = "./page/index.html?id=7";
- });
- $('.t_btn8').click(function(){
- window.location.href = "./page/index.html?id=8";
- });
- $('.t_btn9').click(function(){
- window.location.href = "./page/index.html?id=9";
- });
- });
|