vue echarts地图,vue echarts 世界地图

　　本文主要介绍了vue echarts5实现中国地图的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　使用电子海图5.0版本实现中国地图，电子图表在5.0版本之后，地图不能直接引入了，需要自己去下载。

　　地图文件下载地址：

　　下载地址

　　(http://datav。阿里云。com/portal/school/atlas/area _ selector # lat=30.772340792178525 LNG=103.9473258937584 zoom=9.5)

　　注意：将下载后的数据文件放置/公共目录下

　　地图类型的地图

　　模板

　　差异

　　div ref= mape charts class= map-echart /div

　　/div

　　/模板

　　脚本

　　从“电子海图”导入*作为展示

　　从" axios "导入爱可信

　　导出默认值{

　　名称：地图，

　　data() {

　　返回{

　　计时器：空，

　　系列数据：[

　　{姓名： 天津市，值：20057.34},

　　{姓名： 北京市，值：15477.48},

　　{姓名： 上海市，值：31686.1},

　　{姓名： 河北省，值：6992.6},

　　{姓名： 山东省，值：44045.49},

　　{姓名： 山西省，值：4045.49},

　　],

　　地图：空

　　}

　　},

　　已创建(){

　　},

　　已安装(){

　　这个。initmapecharts()；

　　},

　　方法：{

　　initMapEcharts() {

　　//获取地图数据

　　//将下载后的数据文件放置/公共目录下

　　axios.get(/china.json ).然后(res={

　　控制台。日志(分辨率)；

　　//使用数据注册地图

　　echarts.registerMap(中国研究数据)

　　这个. nextTick(()={

　　//初始化地图

　　this.map=echarts.init(this .$refs[mapEcharts])

　　//设置基础配置项

　　常量选项={

　　//标题

　　标题：{

　　文本：中国地图，

　　左："中间",

　　潜台词： 下载链接，

　　sublink: http://datav。阿里云。 com/tools/atlas/# lat=30.772340792178525 LNG=103.9473258937584 zoom=9.5

　　},

　　//悬浮窗

　　工具提示：{

　　触发器："项目",

　　格式化程序：函数（参数){

　　返回“${ params。name }:${ params。值 0 } "

　　}

　　},

　　//图例

　　视觉图：{

　　最低：800,

　　最高：50000,

　　文本：[高,低],

　　实时：假，

　　可计算的：真，

　　范围：{

　　颜色：[亮天蓝色,黄色,橙色]

　　}

　　},

　　//要显示的散点数据

　　系列：[

　　{

　　类型："地图",

　　地图："中国",

　　//这是要显示的数据

　　数据：this.seriesData，

　　//自定义命名映射，不设置的话，标签默认是使用矢量数据中的名字名

　　名称映射：{

　　北京市: 北京重命名，

　　天津市: 天津重命名

　　},

　　},

　　]

　　}

　　//将配置应用到地图上

　　this.map.setOption(选项)

　　//设置定时器，自动循环触发工具提示悬浮窗事件

　　this.setTimer()

　　让那个=这个；

　　//当鼠标在地图上时，停止自动工具提示事件

　　this.map.on(mouseover ，{series: 0，}，function(params) {

　　that.clearTimer()

　　})

　　//当鼠标移出地图后，再自动工具提示

　　this.map.on(mouseout ，{series: 0}，function(params) {

　　that.setTimer()

　　})

　　})

　　})

　　},

　　setTimer() {

　　//当前选中区域的下标

　　设curIndex=-1；

　　这个定时器清除时间间隔(this.timer)

　　this.timer=setInterval(()={

　　const len=this。系列数据。长度；

　　//调度操作是主动去触发展示事件，取消高亮当前的数据图形

　　this.map.dispatchAction({

　　类型：淡化，

　　seriesIndex: 0，

　　数据索引：curIndex

　　})

　　//下一个选中区域的下标

　　curIndex=(curIndex 1)% len；

　　//高亮下一个数据图形

　　this.map.dispatchAction({

　　类型：突出显示，

　　seriesIndex: 0，

　　数据索引：curIndex

　　})

　　//显示工具提示

　　this.map.dispatchAction({

　　键入：显示提示，

　　seriesIndex:0，

　　数据索引：curIndex

　　})

　　}, 1000)

　　},

　　clearTimer() {

　　这个定时器清除时间间隔(this.timer)

　　},

　　},

　　销毁前(){

　　this.clearTimer()

　　}

　　}

　　/脚本

　　风格。地图-电子地图{

　　高度：900像素

　　宽度：900像素

　　}

　　/风格

　　长狭潮道类型地图

　　模板

　　差异

　　div ref= geo echart class= geo-echart /div

　　/div

　　/模板

　　脚本

　　从“电子海图”导入*作为展示

　　从" axios "导入爱可信

　　从"电子海图"导入{颜色}

　　导出默认值{

　　名称："地理位置",

　　data() {

　　返回{

　　计时器：空，

　　系列数据：[

　　{姓名： 天津市，值：20057.34},

　　{姓名： 北京市，值：15477.48},

　　{姓名： 上海市，值：31686.1},

　　{姓名： 河北省，值：6992.6},

　　{姓名： 山东省，值：44045.49},

　　{姓名： 山西省，值：4045.49},

　　],

　　地图：空

　　}

　　},

　　已创建(){

　　},

　　已安装(){

　　这个。initgeoecharts()；

　　},

　　方法：{

　　initGeoEcharts() {

　　axios.get(/china.json ).然后(res={

　　echarts.registerMap(中国研究数据)

　　这个. nextTick(()={

　　const map=echarts.init(this .$refs[geoEcharts]，null，{renderer:svg})

　　常量选项={

　　标题：{

　　文本：中国地图，

　　左："中间",

　　潜台词： 下载链接，

　　sublink: http://datav。阿里云。 com/tools/atlas/# lat=30.772340792178525 LNG=103.9473258937584 zoom=9.5

　　},

　　//悬浮窗

　　工具提示：{

　　触发器："项目",

　　格式化程序：函数（参数){

　　console.log(2222，params)；

　　返回“${ params。name }:${ params。值 0 } "

　　}

　　},

　　//图例

　　视觉图：{

　　最低：800,

　　最高：50000,

　　文本：[高,低],

　　实时：假，

　　可计算的：真，

　　范围：{

　　颜色：[亮天蓝色,黄色,橙色]

　　}

　　},

　　地理位置：{

　　地图："中国",

　　缩放：1,

　　漫游："移动",

　　名称映射：{

　　新疆维吾尔自治区: 新疆，

　　西藏自治区: 西藏，

　　甘肃省: 甘肃，

　　宁夏回族自治区: 宁夏，

　　广西壮族自治区: 广西，

　　内蒙古自治区: 内蒙古，

　　香港特别行政区: 香港，

　　澳门特别行政区: 澳门

　　},

　　标签:{

　　秀：真的，

　　颜色：黑色，

　　位置："内部",

　　距离：0,

　　fontSize: 10，

　　旋转：45度

　　},

　　//所有地图的区域颜色

　　项目样式：{

　　areaColor: rgba(0，60，153，0.8)，

　　边框颜色： #02c0ff

　　},

　　重点：{

　　项目样式：{

　　areaColor: rgba(0，60，153，0.5)，

　　阴影颜色： rgba(0，0，0，0.8)，

　　暗影模糊：5,

　　阴影消除率：5

　　}

　　},

　　//为某些区域做一些特殊的样式

　　//地区：[{

　　//名称：广东省，

　　//项目样式：{

　　//areaColor:黄色，

　　//颜色：黑色，

　　//borderColor:粉红色

　　//}

　　//}]

　　},

　　//数据

　　系列：[

　　{

　　类型：“散点图”，

　　坐标系统：“地理”，

　　数据：[

　　{名称：江苏省，值：[120.15，31.99，9]}，//值为，经纬度，数据

　　{名称：湖北省，值：[111，31.89，15477]}，

　　{名称：四川省，值：[102.15，31.89，31686]}，

　　{名称：浙江省，值：[120.15，29.89，6992]}，

　　{名称：山东省，值：[118.15，36.9，44045]}

　　],

　　符号大小：4

　　},

　　{

　　类型：“行”，

　　坐标系统：“地理”，

　　数据：[

　　{坐标：[[121.15，38]，[111，31.89]，[100.15，31.89]，[121.15，29.89]，[105.15，30.89]]}

　　],

　　折线：真，//是折线吗？

　　线型：{

　　颜色：{

　　类型：“径向”，

　　x: 0.5，

　　y: 0.5，

　　r: 0.5，

　　色彩停止点：[{

　　偏移量：0，颜色：“红色”//0%处的颜色

　　}, {

　　偏移量：1，颜色：“蓝色”/100%时的颜色

　　}],

　　Global: false，//默认值为false

　　阴影颜色： rgba(0，0，0，0.5)，

　　暗影模糊：10，

　　弯曲度：1

　　},

　　不透明度：0.3，

　　宽度：2，

　　},

　　//线条特效的配置

　　效果：{

　　秀：真的，

　　周期：5，//特效动画的时间，以秒为单位。

　　TrailLength: 1，//特效尾迹长度[0，1]的值越大，尾迹越长越重。

　　//symbol: image:// require( @/echartsmap/money . png )，//自定义动画图标

　　SymbolSize: 15，//图标大小

　　颜色：红色

　　}

　　}

　　]

　　}

　　map.setOption(选项)

　　})

　　})

　　}

　　},

　　}

　　/脚本

　　风格。geo-echart{

　　高度：900px

　　宽度：900px

　　}

　　/风格

　　这就是本文关于vue echarts5实现中国地图的示例代码。更多关于vue echarts5中国地图的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。