【Vue-Echarts】地图调用组件 echarts4.9+ bmap + vue2.X

最新推荐文章于 2024-03-30 10:00:21 发布
最新推荐文章于 2024-03-30 10:00:21 发布
阅读量809 收藏
点赞数
分类专栏： VUE 文章标签： vue echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38987146/article/details/112326819
版权

效果：根据经纬度显示各行政区需要表达数据的散点图
Echarts地图

踩坑：没有加载百度地图ak，导致仅显示title。
在vue单页应用中，百度地图的ak认证获取需放在index.html的head里，否则地图将显示不出来（此处使用的ak密匙需申请）。
index.html

<head>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=S4KKfPTez9LKGm4DtoY2BQ5527qxQ3QE"></script>
</head>

绘制echart后，可以继续调用百度API添加其他需求，如:

      let bmap = myChart.getModel().getComponent('bmap').getBMap();
      bmap.addControl(new BMap.MapTypeControl());
      bmap.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));// 左上角，添加比例尺
	  bmap.addControl(new BMap.NavigationControl());  //左上角，添加默认缩放平移控件

在这里插入图片描述
其他类似组件可参考：百度地图API

bmap.enableContinuousZoom();                              //启用地图惯性拖拽，默认禁用
bmap.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
bmap.enableScrollWheelZoom();                            //启用滚轮放大缩小
bmap.addControl(new BMap.MapTypeControl());          //添加地图类型控件
bmap.disable3DBuilding();
bmap.centerAndZoom(point, 14);
bmap.setMapStyle({style:'normal'});

VUE组件源文件：echartComponent.vue

<template>
  <div>
    <div style="width:60%;height:500px;" :id="echarts" class="echarts"  ref="echarts"></div>
  </div>
</template>

<script>
// 引入echarts
import echarts from 'echarts'
// 如果未在webpack的配置文件中设置bmap外部扩展，不要忘记引入bmap
import 'echarts/extension/bmap/bmap'

export default {
  name: 'EchartsComp',
  props: {},
  data () {
    return {
      value: [
        {name: "黄浦区", value:40},
        {name: "徐汇区", value:34},
        {name: "长宁区", value:234},
        {name: "静安区", value:238},
        {name: "普陀区", value:134},
        {name: "虹口区", value:44},
        {name: "杨浦区", value:255},
        {name: "闵行区", value:53},
        {name: "宝山区", value:50},
        {name: "浦东新区", value:355},
        {name: "金山区", value:34},
        {name: "松江区", value:56},
        {name: "青浦区", value:51},
        {name: "奉贤区", value:60},
        {name: "崇明区", value:24},
      ],
      geoCoordMap:{
        "黄浦区": [121.490317, 31.222771],
        "徐汇区": [121.43752, 31.179973],
        "长宁区": [121.4222, 31.218123],
        "静安区": [121.448224, 31.229003],
        "普陀区": [121.392499, 31.241701],
        "虹口区": [121.491832, 31.26097],
        "杨浦区": [121.522797, 31.270755],
        "闵行区": [121.375972, 31.111658],
        "宝山区": [121.489934, 31.398896],
        "浦东新区": [121.567706, 31.245944],
        "金山区": [121.330736, 30.724697],
        "松江区": [121.223543, 31.03047],
        "青浦区": [121.113021, 31.151209],
        "奉贤区": [121.458472, 30.912345],
        "崇明区": [121.39758, 31.62278]	     
      },
    }
  },
  methods: {
    convertData() {
      let res = [];
      let data_ = this.value;
      let geoCoordMap_ = this.geoCoordMap;
      for (let i = 0; i < data_.length; i++) {
        let geoCoord = geoCoordMap_[data_[i].name];
        if (geoCoord) {
            res.push({
                name: data_[i].name,
                value: geoCoord.concat(data_[i].value)
            });
        }
      }
      return res
    },
    drawChart () {
      const vm = this
      // 初始化echarts实例
      let myChart = echarts.init(document.getElementById(this.echarts))
      let option = {
        title: {
            text: '上海各区散点图',
            subtext: '#',
            sublink: '#',
            left: 'center'
        },
        tooltip : {
            trigger: 'item'
        },
        bmap: {
            center: [121.48, 31.22],
            zoom: 10,
            roam: true,
            mapStyle: {
                styleJson: [{
                    'featureType': 'water',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'land',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#f3f3f3'
                    }
                }, {
                    'featureType': 'railway',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'highway',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#fdfdfd'
                    }
                }, {
                    'featureType': 'highway',
                    'elementType': 'labels',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'arterial',
                    'elementType': 'geometry',
                    'stylers': {
                        'color': '#fefefe'
                    }
                }, {
                    'featureType': 'arterial',
                    'elementType': 'geometry.fill',
                    'stylers': {
                        'color': '#fefefe'
                    }
                }, {
                    'featureType': 'poi',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'green',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'subway',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'manmade',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'local',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'arterial',
                    'elementType': 'labels',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'boundary',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#fefefe'
                    }
                }, {
                    'featureType': 'building',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'label',
                    'elementType': 'labels.text.fill',
                    'stylers': {
                        'color': '#999999'
                    }
                }]
            }
        },
        series : [
          {
            name: 'pm2.5',
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: this.convertData(),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            encode: {
                value: 2
            },
            label: {
                formatter: '{b}',
                position: 'right',
                show: false
            },
            itemStyle: {
                color: 'purple'
            },
            emphasis: {
                label: {
                    show: true
                }
            }
          }
        ]
      }
      // 绘制图表
      myChart.setOption(option)
    
      let bmap = myChart.getModel().getComponent('bmap').getBMap();
      bmap.addControl(new BMap.MapTypeControl());
      bmap.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));// 左上角，添加比例尺
      bmap.addControl(new BMap.NavigationControl());  //左上角，添加默认缩放平移控件
    }
  },
  computed: {
    echarts() {
      return 'echarts' + Math.random()*100000
    },
  },
  mounted() {
    this.drawChart()
  },
  created: () => {}
}
</script>
<style scoped>
</style>
Chx.zhang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
如何用Vue+Echarts制作世界地图下钻
m0_47912936的博客
06-01 2159
在疫情期间，地图对于我们掌握疫情的走势立了大功，那么怎样能够制作一个相似的地图模块呢？本文利用vue和echarts模拟了对于疫情地图的制作。 关于Vue和Echarts vue是一个轻量级的框架，他采用了MVVM的模式，也就是M(model)数据，VM 控制逻辑 和 V(view) 视图组成，相比之前的框架，vue更加的简洁，方便使用者解耦合。 之前JavaScript 代码可以看见其控制逻辑和视图是混合在一起的，不利于后期添加功能，耦合度过高。所以Vue提出了将视图，数据，控制逻辑分离的思想，在vue
vue-echarts-v3：ECharts.js（v3.x +）的Vue.js（v2.x +）组件包装
02-03
vue-echarts-v3 于 v3.x+ v2.x+组件包装 特征 轻量，高效，按需绑定事件； 支持按需导入ECharts.js图表​​和组件； 支持组件调整大小事件自动更新视图； 安装 $ npm install --save echarts vue-echarts-v3 用法...
Echarts3.0引入百度地图-简单说
热门推荐
Osborn的博客
07-25 1万+
    1. 首先是百度AK的申请 2. 下载bmap.js echarts.js bmap.js 是一个基于echart3的百度地图扩展文件，将其引入后可以在echarts.series.map.coordinateSystem 中直接使用参数’bmap’ 下载地址为：https://pan.baidu.com/s/1o8MB98I   下面针对的是Echarts3.0  下载地址为...
使用 Echarts 插件完成中国旅游地图
weixin_62897746的博客
12-06 2263
设置一个标签，标签设置宽高，否则不显示 引入中国地图的数据 初始化echarts实例，并挂载到dom中 注册中国地图，必须在geo或map中 this.$echarts.registerMap("china", geoJson); 编写配置项，把配置项添加到实例中（简写） 配置项： 背景色 geo：图层（zoom），长宽比例，样式（itemStyle)：地图区域的颜色，阴影，阴影偏移量，特点区域的样式(region)：南海诸岛 series：......
推荐开源项目：Vue-Echarts-BMap - 强大的Vue.js与百度地图集成库
gitblog_00097的博客
03-30 400
推荐开源项目：Vue-Echarts-BMap - 强大的Vue.js与百度地图集成库 项目地址:https://gitcode.com/ZRenu/vue-echats-bmap Vue-Echarts-BMap 是一个基于 Vue.js 的组件库，它将流行的 ECharts 数据可视化库和百度地图（BMap）API 结合在一起，为开发者提供了一种便捷的方式来在Web应用中创建交互式的地图数据可...
Echarts世界地图汉化及其数据包
刻痕
11-25 2278
Echarts世界地图是英文的 ，显示汉化常规有两个办法： 1.使用汉化后的地图数据 【推荐】 2.添加nameMap映射对象 1.使用汉化后的地图数据【推荐】 汉化包下载地址：mrz8 链接：https://pan.baidu.com/s/1E6aF4Hrra20uni7l7cm-lQ 提取码：mrz8 英文包下载地址：icub 链接：https://pan.baidu.com/s/1MJjxrrETNOrGhw5d9d4z5g 提取码：icub 2.添加nameMap映射对象： 下载地址：x6se 链接
echarts，world.js绘制世界地图，数据显示颜色区域，tooltip提示框通过formatter分别显示多个数值
唐策的博客
07-19 1万+
示意图 一、引入 <div id="main" style="width: 1200px;height:600px;border:1px solid #ccc"></div> <script src="echarts.min.js"></script> <script src="world.js"></script> ...
vue-echarts-Vue.js的ECharts组件。-Vue.js开发
05-27
Vue-ECharts Vue.js的ECharts组件。 版中文版基于ECharts v4.1.0 +，并依赖于Vue.js v2.2.6 +。 安装npm（推荐）$ npm inst Vue-ECharts Vue.js的ECharts组件。 版中文版基于ECharts v4.1.0 +，并依赖于Vue.js v...
vue-echarts：Vue.js的Apache ECharts（孵化）组件
02-06
Vue-ECharts Vue.js的Apache ECharts（孵化）组件。基于 v4.1.0 +上并依赖于 v2.2.6 +。安装npm（推荐） $ npm install echarts vue-echartsCDN 在您HTML文件中包括echarts和vue-echarts ，如下所示： < script ...
Vue-ECharts 是 ECharts 的 Vue.js 组件-javascript
06-21
Vue-ECharts 是 ECharts 的 Vue.js 组件
Vue + Echarts 实现中国地图多级钻取功能.zip
08-01
本文为 Vue 2.x + Echarts 5.x 实现中国地图多级钻取功能（基本版 未做过多功能拓展和样式优化 便于二次开发）。（更多说明移步：https://blog.csdn.net/ZYS10000/article/details/119298354）
在vue中使用vue-echarts-v3的实例代码
12-01
npm install --save echarts vue-echarts-v3 二、用法 用 vue-cli 搭建的项目，打开 build 文件夹中的 webpack.base.conf.js 文件 1、webpack 1.x 修改成如下 { test: /\.js$/, loader: 'babel', include: [ ...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
vue-基于Vue2.0+ECharts封装的图表组件.zip
最新发布
05-04
vue vue_基于Vue2.0+ECharts封装的图表组件
vue-echarts组件
04-21
封装了vue的echarts的组件，只需要往组件中传进echarts的数据即可完成图表的配置，已进行了图表响应式处理。
vue-echarts可视化模板
06-04
vue的可视化模板，echarts的使用以及适配页面
ECharts之类型map(省级，地级市)附（世界地图、中国、省份、地级市地图Json文件）...
03-14 2595
ECharts之类型map(省级，地级市) 一、效果： 1.广东地图 2.深圳地图 二、项目结构： 1.广东地图 2.深圳地图 三、项目介绍： 1.广东地图： 地图包含三个模块，①广东地图图表是用geo，不是series因为只作为背景（可捕捉点击地级市事件）。②地图上的条形图是根据坐标地位的③左下角的条形图是根据grid来定位的。 2.深圳市地图：（与广东...
bmap+echarts 百度地图绘制散点图
前端劝退工程师
03-11 4164
效果图 一，引入插件 <script type="text/javascript" src="echarts.min.js"></script> <script type="text/javascript" src="bmap.js"></script>/ <script type="text/javascript" src="http...
echarts+bmap
coolsunxu的博客
06-30 887
echarts+bmap
vue-echarts绘制世界地图
03-19
vue-echarts是一个基于Vue.js的图表库，它提供了丰富的图表组件，包括绘制世界地图的功能。使用vue-echarts可以轻松地在Vue.js项目中绘制各种类型的图表，包括世界地图。 要使用vue-echarts绘制世界地图，首先需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值