基于EChartsGeo地图数据可视化设计与实现

共17个文件

js：7个

png：6个

css：2个

版权申诉

echarts

javascript

ecmascript

169 浏览量 2022-04-15 20:47:42 上传评论收藏 2.17MB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

基于ECharts Geo地图数据可视化设计与实现.rar （17个子文件）

基于ECharts Geo地图数据可视化设计与实现

css

app.css 2KB

bootstrap.min.css 118KB

img

panel.png 23KB

bg01.png 460KB

bg03.png 331KB

header.png 97KB

bg02.png 565KB

thumb.jpg 93KB

bg04.png 285KB

index.html 32KB

echarts-3.8.5.min.js 632KB

echarts-china-cities

jiang1_su1_su1_zhou1.js 18KB

jquery-3.3.1.min.js 85KB

echarts-china-counties

jiang1su1_su1zhou1_kun1shan1shi4.js 3KB

echarts-map-world.js 144KB

echarts-china-provinces

jiangsu.js 23KB

echarts-map-china.js 59KB

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> <title>地图数据可视化</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/app.css" /> </head> <body class="bg01"> <header class="header"> <h3>地图数据可视化</h3> </header> <div class="wrapper"> <div class="container-fluid"> <div class="row fill-h"> <div class="col-lg-3 fill-h"> <div class="xpanel-wrapper xpanel-wrapper-2"> <div class="xpanel">  <div class="fill-h" id="flyMap"></div> </div> </div> <div class="xpanel-wrapper xpanel-wrapper-2"> <div class="xpanel">  <div class="fill-h" id="worldMap"></div> </div> </div> </div> <div class="col-lg-6 fill-h"> <div class="xpanel-wrapper xpanel-wrapper-1"> <div class="xpanel">  <div class="fill-h" id="scatterMap"></div> </div> </div> </div> <div class="col-lg-3 fill-h"> <div class="xpanel-wrapper xpanel-wrapper-3"> <div class="xpanel">  <div class="fill-h" id="provinceMap"></div> </div> </div> <div class="xpanel-wrapper xpanel-wrapper-3"> <div class="xpanel">  <div class="fill-h" id="cityMap"></div> </div> </div> <div class="xpanel-wrapper xpanel-wrapper-3"> <div class="xpanel">  <div class="fill-h" id="countyMap"></div> </div> </div> </div> </div> </div> </div> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/echarts-3.8.5.min.js"></script> <script type="text/javascript" src="js/echarts-map-world.js"></script> <script type="text/javascript" src="js/echarts-map-china.js"></script> <script type="text/javascript" src="js/echarts-china-provinces/jiangsu.js"></script> <script type="text/javascript" src="js/echarts-china-cities/jiang1_su1_su1_zhou1.js"></script> <script type="text/javascript" src="js/echarts-china-counties/jiang1su1_su1zhou1_kun1shan1shi4.js"></script> <script type="text/javascript"> $(function() { /******************* 地图飞线 ******************/ //初始化echarts实例 const flyMap = echarts.init(document.getElementById("flyMap")); //城市经纬度 const originName = '洛阳'; const flyGeo = { '洛阳': [112.460299, 34.62677], '西安': [108.946466, 34.347269], '兰州': [103.84044, 36.067321], '乌鲁木齐': [87.62444, 43.830763], '包头': [109.846544, 40.662929], '西宁': [101.78443, 36.623393], '银川': [106.258602, 38.487834], '成都': [104.081534, 30.655822], '重庆': [106.558434, 29.568996], '拉萨': [91.120789, 29.65005], '昆明': [102.852448, 24.873998], '贵阳': [106.636577, 26.653325], '太原': [112.534919, 37.873219], '武汉': [114.311582, 30.598467], '长沙': [112.945473, 28.234889], '南昌': [115.864589, 28.689455], '合肥': [117.233443, 31.826578], '杭州': [120.215503, 30.253087], '广州': [113.271431, 23.135336], '北京': [116.413384, 39.910925], '天津': [117.209523, 39.093668] }; //飞线数据 var flyVal = [ [{name: '洛阳'}, {name: '洛阳', value: 100}], [{name: '洛阳'}, {name: '西安', value: 35}], [{name: '洛阳'}, {name: '兰州', value: 25}], [{name: '洛阳'}, {name: '乌鲁木齐', value: 55}], [{name: '洛阳'}, {name: '包头', value: 60}], [{name: '洛阳'}, {name: '西宁', value: 45}], [{name: '洛阳'}, {name: '银川', value: 35}], [{name: '洛阳'}, {name: '成都', value: 35}], [{name: '洛阳'}, {name: '重庆', value: 40}], [{name: '洛阳'}, {name: '拉萨', value: 45}], [{name: '洛阳'}, {name: '昆明', value: 50}], [{name: '洛阳'}, {name: '贵阳', value: 55}], [{name: '洛阳'}, {name: '太原', value: 60}], [{name: '洛阳'}, {name: '武汉', value: 65}], [{name: '洛阳'}, {name: '长沙', value: 70}], [{name: '洛阳'}, {name: '南昌', value: 75}], [{name: '洛阳'}, {name: '合肥', value: 80}], [{name: '洛阳'}, {name: '杭州', value: 85}], [{name: '洛阳'}, {name: '广州', value: 90}], [{name: '洛阳'}, {name: '北京', value: 95}], [{name: '洛阳'}, {name: '天津', value: 60}], ]; //数据转换，转换后格式：[{fromName:'cityName', toName:'cityName', coords:[[lng, lat], [lng, lat]]}, {...}] const convertFlyData = function(data) { let res = []; for(let i=0;i<data.length;i++) { let dataItem = data[i]; let toCoord = flyGeo[dataItem[0].name]; let fromCoord = flyGeo[dataItem[1].name]; if(fromCoord && toCoord) { res.push({ fromName: dataItem[1].name, toName: dataItem[0].name, coords: [fromCoord, toCoord] }); } } return res; }; //报表配置 const flySeries = []; [[originName, flyVal]].forEach(function(item, i) { flySeries.push({ name: item[0], type: 'lines', zlevel: 1, symbol: ['none', 'none'], symbolSize: 0, effect: { //特效线配置 show: true, period: 5, //特效动画时间，单位s trailLength: 0.1, //特效尾迹的长度，从0到1 symbol: 'arrow', symbolSize: 5 }, lineStyle: { normal: { color: '#f19000', width: 1, opacity: 0.6, curveness: 0.2 //线的平滑度 } }, data: convertFlyData(item[1]) }, { name: item[0], type: 'effectScatter', coordinateSystem: 'geo', zlevel: 2, rippleEffect: { //涟漪特效 period: 5, //特效动画时长 scale: 4, //波纹的最大缩放比例 brushType: 'stroke' //波纹的绘制方式：stroke | fill }, label: { normal: { show: false, position: 'right', formatter: '{b}' } }, symbol: 'circle', symbolSize: function (val) { //根据某项数据值设置符号大小 return val[2] / 10; }, itemStyle: { normal: { color: '#f19000' } }, data: item[1].map(function(dataItem) { return { name: dataItem[1].name, value: flyGeo[dataItem[1].name].concat([dataItem[1].value]) }; }) }, { //与上层的点叠加 name: item[0], type: 'scatter',

评论收藏

内容反馈

版权申诉