中国地图下钻式echarts图表数据处理

首先加载全国路线图

findMap(){let _this = this,param = {}_this.chinaOpt = echarts.init(document.getElementById('chinaflag'));_this.chinaOpt.clear()_this.$store.dispatch("url", {param}).then(res=>{let res={"meta": {"msg": "success","code": 0,"success": true,"timestamp": "2020-09-03 13:45:55"},"data": {//本例数据格式"list": [["北京","保定","石家庄","邯郸","上海","深圳","保定","武汉"]]}}if(res.meta.success){axios.get('./china_full.json').then((data) => {//重置图表echarts.registerMap('china', data.data);let geoCoordName=[]//存储路线到达点res.data.list[0].map(item=>{let temp=falsefor (let index = 0; index < geoinfo.length; index++) {const districts = geoinfo[index];if(districts.name.indexOf(item)>=0){temp=truegeoCoordName.push(districts.name)break}else{for (let num = 0; num < districts.districts.length; num++) {const element = districts.districts[num];if(element.name.indexOf(item)>=0){temp=truegeoCoordName.push(districts.name)}if(temp){break}}}if(temp){break}}})let mapOptions = _this.$utils.initMapScatterOpt()var geoCoordMap = {'北京': [116.4551, 40.2539],'天津': [117.4219, 39.4189],'上海': [121.4648, 31.2891],'重庆': [106.557165, 29.563206],'河北': [114.508958, 38.066606],'河南': [113.673367, 34.748062],'云南': [102.721896, 25.047632],'辽宁': [123.445621, 41.806698],'广东': [113.5107, 23.2196],'湖南': [112.950888, 28.229114],'安徽': [117.300842, 31.887672],'山东': [117.029895, 36.677424],'江苏': [118.814345, 32.061445],'浙江': [120.16991, 30.272236],'江西': [115.904962, 28.674132],'湖北': [114.290138, 30.595623],'甘肃': [103.851217, 36.061978],'山西': [112.549248,37.857014],'陕西': [108.960062, 34.285251],'吉林': [126.572746, 43.86785],'福建': [119.319713, 26.072564],'贵州': [106.557165, 29.563206],'广东': [113.238778, 23.161621],'青海': [101.787147, 36.621234],'四川': [104.082256, 30.652565],'海南': [109.910757, 19.108187],'黑龙江': [126.655705, 45.759581],'西藏': [91.154492, 29.665953],'内蒙古': [111.670801,40.818311],'广西': [108.381781, 22.815042],'宁夏': [106.234805, 38.487468],'新疆': [87.616327, 43.800508],'香港': [114.168545, 22.36641],'澳门': [113.549978, 22.1943],'台湾': [121.098613, 23.778734]}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],value: 1});}}return res;};mapOptions.series[0].data = convertData(geoCoordName)var KMData = [];geoCoordName.map(item=>{if(item!='北京'){KMData.push(//替换名称不符规则系列[{name:'北京'}, {name:item.replace(/省|市|自治区|壮族自治区|维吾尔自治区|回族自治区|特别行政区/g, ''),value:1}])}})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 color = ['#a6c84c', '#ffa022', '#46bee9'];var series = [];[['北京', KMData]].forEach(function (item, i) {series.push({name: item[0],type: 'lines',//路线zlevel: 2,effect: {show: true,period: 10,trailLength: 0,symbol: planePath,symbolSize: 15},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]>0?(val[2]/9):0.1;},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])};})});});mapOptions.geo.zoom=1mapOptions.series=series_this.chinaOpt.setOption(mapOptions)_this.chinaOpt.on('click', function (param) {_this.chinaMapClick(param)//地图点击事件})})}})}

初始化地图路线图后点击某一区域查看当前省份地图数据

chinaMapClick(v){let _this=this;var name = v.name; //地区namevar mapCode = _this.provinces[name]; //地区的json数据  城市代号let center=[]let nameList=[]let valList=[]if (!mapCode) {return;}let temp=falsefor (let index = 0; index < geoinfo.length; index++) {const districts = geoinfo[index];if(districts.name.indexOf(name)==0){center=districts.center.split(',')//省份中心for (let num = 0; num < districts.districts.length; num++) {const element = districts.districts[num];nameList.push({//市区信息name:element.name,value:element.center.split(','),})if(Math.random()>0.5){valList.push({name:element.name,value:element.center.split(','),})}}temp=true}if(temp){break}}_this.loadMap(mapCode, name,center,nameList,valList);}

然后调用地图重新渲染点击的省份

loadMap(mapCode, name,center,nameList,valList) {let _this=this_this.chinaOpt = echarts.init(document.getElementById('chinaflag'));_this.chinaOpt.clear()axios.get('../../../../../static/json/'+mapCode+'_full.json').then((data) => {if (data) {         echarts.registerMap(name, data.data);var opt={geo: {map: name,zoom: 1, //当前视角缩放比例      },series: [{data: nameList,type: 'map',//渲染地图mapType: name,selectedMode: 'false',label: {normal: {show: true,color:'#fff'},emphasis: {show: true,color:'#fff'}},itemStyle: {normal: {areaColor: '#03035a',borderColor: '#00f9ff',shadowColor: '#092f8f', //外发光shadowBlur: 20},emphasis: {areaColor: '#03035a', //悬浮区背景}}},{name: 'Top',//地图上标记点信息type: 'scatter',coordinateSystem: 'geo',symbol: 'pin',symbolSize: [20, 20],itemStyle: {normal: {color: '#D8BC37', //标志颜色}},data: valList,},]};_this.chinaOpt.setOption(opt)} else {alert('无法加载该地图');}})}

中国地图下钻式echarts图表数据处理相关推荐

D3.js中国地图下钻
使用d3.js实现中国地图及中国地图下钻到省市区在可视化开发中,地图是很重要的一个环节,很多时候需要展现的不仅是国家地图,还需要能从国家进入到省市,看到区这样的下钻过程,今天我们就来实现这个效果. ...
JavaScript高德地图中绘制echarts图表随地图移动
JavaScript高德地图中绘制echarts图表随地图移动** 先上效果图实现方法如下: 使用高德地图"信息窗体",信息窗体AMap.InfoWindow的属性content ...
D3.js中国地图下钻 1
#使用d3.js实现中国地图及中国地图下钻到省市区在可视化开发中,地图是很重要的一个环节,很多时候需要展现的不仅是国家地图,还需要能从国家进入到省市,看到区这样的下钻过程,今天我们就来实现这个效果. ...
vue使用echarts来绘制中国地图下钻省市区县级地图
文章目录前言一.echarts 二.使用步骤 1.vue安装.引入echarts 2.使用echarts 总结前言公司需要一个中国地图点击可进入省市区县级,但是在我使用echarts绘制中国地 ...
html5 地图效果,html5 echarts图表插件炫光的分布地图动画特效
特效描述:图表插件炫光的动画分布地图动画动画特效.html5地图动画,html5 echarts图表插件代码结构 1. 引入JS 2. HTML代码 ECharts $('#documen ...
python作中国地图背景气泡图_Excel图表中制作中国地图背景气泡图的操作方法
在一些商务PPT,经常能够看见以中国或世界地图作为背景的图表,并且使用气泡图反映数据的大小,如何实现这样的气泡图.今天,学习啦小编就教大家在Excel图表中制作中国地图为背景气泡图的操作方法. Exc ...
Axure教程：可视化中国地图下钻交互设计
导读:在设置日常大屏报表设计工作中,我们会经常使用到地图下钻效果,今天作者教大家简单的使用axure软件来制作中国地图点击下钻的动效果,通过此原理可以做更细的下钻交互.一起来文中看一下吧~ 教程整体简 ...
可视化：中国地图 python/ geopandas/ echarts
(区块链现在也成了"牛夫人") 前言地图,在可视化中总是引人注目的.之前我们介绍了如何用R语言中的ggplot2画中国地图.本篇我们在python中搞定地图,主要结合我在BMW丰 ...
echarts 中国地图飞机实现demo 中国地图路线飞行 echarts飞行
先看看效果图, 如果是你的菜请往下看. html 代码 <template><div id="chineView"></div> </t ...

中国地图下钻式echarts图表数据处理

中国地图下钻式echarts图表数据处理相关推荐

最新文章

热门文章