当前位置: 首页 > Web前端 > vue.js

3D地图的定时高亮和点击事件demo

时间:2023-03-31 19:57:04 vue.js

技术选型文章选型技术栈:vue,echarts,echarts-gl安装Vue和echarts1,安装echarts和echarts-alnpmiecharts--savenpmiecharts-gl--save2,quoteechartsandecharts-glimportechartsfrom'echarts';import'echarts-gl'Vue.prototype.$echarts=echarts3,pageimportrequire('../../node_modules/echarts/map/js/China')这个时候地图信息会在你的node_modules/echarts/map/china中初始化。echarts-gl3D地图1.新建一个option.js文件。2、配置页面代码如下(主要是位置标识和3D地图的颜色样式)//标识数据,用于标识地图上的点,为用户提供点击事件vargeoCoordMap={'黑龙江':[127.9688,45.368],'内蒙古':[110.3467,41.4899],'吉林':[125.8154,44.2584],'北京':[116.4551,40.2539],'辽宁':[123.1238,42.1216],"河北":[114.4995,38.1006],"天津":[117.4219,39.4189],"山西":[112.3352,37.9413],"陕西":[109.1162,34.2004],"甘肃":[103.5901,36.3043],"宁夏":[106.3586,38.1775],“青海”:[101.4038,36.8207],“新疆”:[87.9236,43.5883],“西藏”:[91.11,29.97],“四川”:[103.9526,30.7617],“重庆”:[108.384366,30.439702],"山East":[117.1582,36.8701],"Henan":[113.4668,34.6234],"Jiangsu":[118.8062,31.9208],"Anhui":[117.29,32.0581],"Hubei":[114.3896,30.6628],"Zhejiang":[119.5313,29.8773],"Fujian":[119.4543,25.9222],"Jiangxi":[116.0046,28.6633],"Hunan":[113.0823,28.2568],"Guizhou":[106.6992,26.7682],"Yunnan":[102.9199,25.4663],"Guangdong":[113.12244,23.009505],"Guangxi":[108.479,23.1152],"Hainan":[110.3893,19.8516],'Shanghai':[121.4648,31.2891]};varchinaDatas=[[{name:'Heilongjiang',value:100}],[{name:'InnerMongolia',value:300}],[{name:'Jilin',value:300}],[{name:'Liaoning',value:300}],[{name:'Hebei',value:300}],[{name:'Tianjin',value:300}],[{name:'Shanxi',value:300}],[{name:'Shaanxi',value:300}],[{name:'Gansu',value:300}],[{name:'Ningxia',value:300}],[{name:'青海',value:300}],[{name:'新疆',value:300}],[{name:'西藏',value:300}],[{name:'四川',value:300}],[{name:'重庆',value:300}],[{name:'山东',value:300}],[{name:'河南',value:300}],[{name:'江苏',value:300}],[{name:'安徽',value:300}],[{name:'湖北',value:300}],[{name:'浙江',value:300}],[{name:'福建',value:300}],[{name:'江西',value:300}],[{name:'湖南',value:300}],[{name:'贵州',value:300}],[{name:'广西',value:300}],[{name:'海南',value:300}],[{name:'上海',value:1300}]];//处理数据,数据格式符合echartsvarconvertData=function(data){变量res=[];对于(vari=0;i{returnval},/**标记内容格式化器,支持字符串模板和回调函数两种形式,字符串模板和回调函数返回的字符串都支持带\n的换行。**///legendHoverLink:true,regions:[{name:'山东',itemStyle:{color:'#000',opacity:1,},label:{show:true},}],//默认高度亮区},series:[{name:'light',type:'scatter3D',//识别点符号:'pin',//散点的形状。默认为圆形。coordinateSystem:'geo3D',data:convertData(chinaDatas),symbolSize:function(){return36},label:{show:false},itemStyle:{normal:{color:'#f00'}},zlevel:6,emphasis:{//当鼠标放在该区域时,是否显示名称label:{show:false},itemStyle:{color:'#000'}},},]};3.从'你的选项地址'4引入optionimport选项。创建div

5.初始化varmyChart=this.$echarts.init(document.getElementById('myChart'));6.加载配置项myChart.setOption(option);7.显示效果图,颜色可以自己配置添加定时高亮事件和点击事件1.定时器代码(如何高亮关键是改变georegions的name属性)letregions=setInterval(function(){option.geo3D.regions[0].name=option.geo3D.data[count].namemyChart.setOption(option);count++if(count===option.geo3D.data.length){count=0}},1000);2.点击事件myChart.on('click',function(params){clearInterval(regions)console.log(params)count=params.dataIndexoption.geo3D.regions[0].name=params.namemyChart.setOption(选项);});3.双击重启定时器事件myChart.getZr().on('dblclick',function(params){regions=setInterval(function(){option.geo3D.regions[0].name=option.geo3D.数据[计数].nameconsole.log(count)myChart.setOption(option);count++if(count===option.geo3D.data.length){count=0}},1000);});4.其实如果是2D的话,可以用myChart.dispatchAction({type:'highlight',//optional,seriesindex,可以用数组指定MultipleseriesseriesIndex?:number|Array,//optional,系列名,可以是一个数组指定多个系列seriesName?:string|Array,//可选,数据索引dataIndex?:number,//可选,数据名称name?:string})这个事件,不幸的是,3D不支持这些API,特别注意点击事件(click),它只能使用getZr()来点击,返回的信息只有鼠标在屏幕左侧的x和yaxes,也可以使用echartsInstance.convertFromPixel进行转换,但是转换公式和代码可能比您写出的时间更长。当然你也可以用1.0.0beta-6版本的ecahrts-gl来做这个版本,可以直接绑定事件,但是不能设置Radeon高亮。最好直接导入他的源码,将import'echarts-gl'替换为import'../node_modules/echarts-gl/dist/echarts-gl.js';作者:Xia12137817链接:https://juejin.cn/post/684490...来源:掘金版权所有归作者所有。如需商业转载,请联系作者获得授权。非商业转载请注明出处。