vue Echart热力图 百度地图

最新推荐文章于 2025-04-14 09:23:49 发布
最新推荐文章于 2025-04-14 09:23:49 发布
阅读量4.1k 收藏 5
点赞数 3
分类专栏： 前端开发
本文介绍了如何在Vue项目中利用ECharts库创建百度地图热力图。首先，要在页面中引入百度地图API和ECharts库。然后，配置ECharts的option，设置地图类型为百度地图，并添加热力图层。通过这种方式，可以在地图上展示数据的分布情况。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

搬运某位兄台博客的：https://blog.csdn.net/yc_1993/article/details/52432005

页面先引入：<script src="http://api.map.baidu.com/api?v=2.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu"></script>

<template>
  <div class="heatMapDom">
    <div :class="className" :id="id" :style="{height:height,width:width}"/>
  </div>
</template>
<script>
import echarts from 'echarts/lib/echarts'
require('echarts/extension/bmap/bmap')
import option from './option'

export default {
  props: {
    className: {
      type: String,
      default: 'heatMapCss'
    },
    id: {
      type: String,
      default: 'heatMap'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '600px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.chart = echarts.init(document.getElementById(this.id))
      console.log(option, '==数据')
      this.chart.setOption(option)
    }
  }
}
</script>
<style>
.heatMapDom{
  width: 100%;
  height: 600px;
  margin: 20px auto;
}
.BMap_noprint,.anchorBL{
  display: none;
}
</style>

option值：


var geoCoordMap = {
  'p1': [113.331788, 23.121235],
  'p2': [113.332788, 23.121335],
  'p3': [113.330188, 23.122135],
  'p4': [113.33128, 23.123135],
  'p5': [113.33104, 23.120135],
  'p6': [113.3342, 23.1222135],
  'p7': [113.3333, 23.1235],
  'p8': [113.332288, 23.124435],
  'p9': [113.334588, 23.120035],
  'p10': [113.333288, 23.119935],
  'p11': [113.335688, 23.11835],
  'p12': [113.337888, 23.1210135],
  'p13': [113.330188, 23.121935],
  'p14': [113.329088, 23.120135],
  'p15': [113.333988, 23.120035],
  'p16': [113.331588, 23.122235],
  'p17': [113.331688, 23.121335],
  'p18': [113.333388, 23.124435],
  'p19': [113.334488, 23.125535],
  'p20': [113.335588, 23.123335],
  'p21': [113.331788, 23.121235],
  'p22': [113.332788, 23.121335],
  'p23': [113.330188, 23.122135],
  'p24': [113.33128, 23.123135],
  'p25': [113.33104, 23.120135],
  'p26': [113.3342, 23.1222135],
  'p27': [113.3333, 23.1235],
  'p28': [113.332288, 23.124435],
  'p29': [113.334588, 23.120035],
  'p30': [113.333288, 23.119935],
  'p31': [113.335688, 23.11835],
  'p32': [113.337888, 23.1210135],
  'p33': [113.330188, 23.121935],
  'p34': [113.329088, 23.120135],
  'p35': [113.333988, 23.120035],
  'p36': [113.331588, 23.122235],
  'p37': [113.331688, 23.121335],
  'p38': [113.333388, 23.124435],
  'p39': [113.334488, 23.125535],
  'p40': [113.335588, 23.123335]
}
var value = [
  { name: 'p1', value: 100 },
  { name: 'p2', value: 120 },
  { name: 'p3', value: 130 },
  { name: 'p4', value: 122 },
  { name: 'p5', value: 144 },
  { name: 'p6', value: 100 },
  { name: 'p7', value: 156 },
  { name: 'p8', value: 199 },
  { name: 'p9', value: 122 },
  { name: 'p10', value: 100 },
  { name: 'p11', value: 140 },
  { name: 'p12', value: 140 },
  { name: 'p13', value: 143 },
  { name: 'p14', value: 199 },
  { name: 'p15', value: 111 },
  { name: 'p16', value: 133 },
  { name: 'p17', value: 155 },
  { name: 'p18', value: 135 },
  { name: 'p19', value: 210 },
  { name: 'p20', value: 229 },
  { name: 'p21', value: 100 },
  { name: 'p22', value: 120 },
  { name: 'p23', value: 130 },
  { name: 'p24', value: 122 },
  { name: 'p25', value: 144 },
  { name: 'p26', value: 100 },
  { name: 'p27', value: 156 },
  { name: 'p28', value: 199 },
  { name: 'p29', value: 122 },
  { name: 'p30', value: 100 },
  { name: 'p31', value: 100 },
  { name: 'p32', value: 120 },
  { name: 'p33', value: 130 },
  { name: 'p34', value: 122 },
  { name: 'p35', value: 144 },
  { name: 'p36', value: 100 },
  { name: 'p37', value: 156 },
  { name: 'p38', value: 199 },
  { name: 'p39', value: 122 },
  { name: 'p40', value: 100 }
]

var convertData = function(data, n) {
  var res = []
  for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap[data[i].name]
    if (geoCoord) {
      res.push(geoCoord.concat(data[i].value + (Math.random() - 0.5) * n))
    }
  }
  return res
}
var title = 'xx洲-xx城市司机人数分布图'
var bmap = {
  center: [113.331788, 23.124235]
}
var timeline = {
  autoPlay: true,
  data: ['7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00']
}
var options = [
  {
    series: [{
      data: convertData(value, 100)
    }]
  },
  {
    series: [{
      data: convertData(value, 200)
    }]
  },
  {
    series: [{
      data: convertData(value, 300)
    }]
  },
  {
    series: [{
      data: convertData(value, 400)
    }]
  },
  {
    series: [{
      data: convertData(value, 500)
    }]
  },
  {
    series: [{
      data: convertData(value, 600)
    }]
  },
  {
    series: [{
      data: convertData(value, 900)
    }]
  },
  {
    series: [{
      data: convertData(value, 700)
    }]
  },
  {
    series: [{
      data: convertData(value, 600)
    }]
  },
  {
    series: [{
      data: convertData(value, 500)
    }]
  },
  {
    series: [{
      data: convertData(value, 300)
    }]
  }
]

export default {
  baseOption: {
    title: {
      text: title,
      left: 'center',
      top: 10,
      textStyle: {
        color: '#66b1ff',
        fontSize: 20,
        fontWeight: 'bolder'
      }
    },
    timeline: {
      bottom: 10,
      autoPlay: timeline.autoPlay,
      data: timeline.data,
      axisType: 'category',
      padding: [5, 5, 5, 5],
      playInterval: 1500,
      lineStyle: { color: 'white' },
      controlPosition: 'right',
      controlStyle: {
        color: '#ffffff',
        borderColor: '#ffffff'
      },
      label: {
        normal: {
          textStyle: {
            color: 'white',
            fontSize: 13,
            fontWeight: 'bolder'
          }
        }
      }
    },
    bmap: {
      center: bmap.center,
      zoom: 16,
      roam: true,
      mapStyle: {
        styleJson: [
          {
            'featureType': 'land', // 调整土地颜色
            'elementType': 'geometry',
            'stylers': {
              'color': '#081734'
            }
          },
          {
            'featureType': 'building', // 调整建筑物颜色
            'elementType': 'geometry',
            'stylers': {
              'color': '#04406F'
            }
          },
          {
            'featureType': 'building', // 调整建筑物标签是否可视
            'elementType': 'labels',
            'stylers': {
              'visibility': 'off'
            }
          },
          {
            'featureType': 'highway', // 调整高速道路颜色
            'elementType': 'geometry',
            'stylers': {
              'color': '#015B99'
            }
          },
          {
            'featureType': 'highway', // 调整高速名字是否可视
            'elementType': 'labels',
            'stylers': {
              'visibility': 'off'
            }
          },
          {
            'featureType': 'arterial', // 调整一些干道颜色
            'elementType': 'geometry',
            'stylers': {
              'color': '#003051'
            }
          },
          {
            'featureType': 'arterial',
            'elementType': 'labels',
            'stylers': {
              'visibility': 'off'
            }
          },
          {
            'featureType': 'green',
            'elementType': 'geometry',
            'stylers': {
              'visibility': 'off'
            }
          },
          {
            'featureType': 'water',
            'elementType': 'geometry',
            'stylers': {
              'color': '#044161'
            }
          },
          {
            'featureType': 'subway', // 调整地铁颜色
            'elementType': 'geometry.stroke',
            'stylers': {
              'color': '#003051'
            }
          },
          {
            'featureType': 'subway',
            'elementType': 'labels',
            'stylers': {
              'visibility': 'off'
            }
          },
          {
            'featureType': 'railway',
            'elementType': 'geometry',
            'stylers': {
              'visibility': 'off'
            }
          },
          {
            'featureType': 'railway',
            'elementType': 'labels',
            'stylers': {
              'visibility': 'off'
            }
          },
          {
            'featureType': 'all', // 调整所有的标签的边缘颜色
            'elementType': 'labels.text.stroke',
            'stylers': {
              'color': '#313131'
            }
          },
          {
            'featureType': 'all', // 调整所有标签的填充颜色
            'elementType': 'labels.text.fill',
            'stylers': {
              'color': '#FFFFFF'
            }
          },
          {
            'featureType': 'manmade',
            'elementType': 'geometry',
            'stylers': {
              'visibility': 'off'
            }
          },
          {
            'featureType': 'manmade',
            'elementType': 'labels',
            'stylers': {
              'visibility': 'off'
            }
          },
          {
            'featureType': 'local',
            'elementType': 'geometry',
            'stylers': {
              'visibility': 'off'
            }
          },
          {
            'featureType': 'local',
            'elementType': 'labels',
            'stylers': {
              'visibility': 'off'
            }
          },
          {
            'featureType': 'subway',
            'elementType': 'geometry',
            'stylers': {
              'lightness': -65
            }
          },
          {
            'featureType': 'railway',
            'elementType': 'all',
            'stylers': {
              'lightness': -40
            }
          },
          {
            'featureType': 'boundary',
            'elementType': 'geometry',
            'stylers': {
              'color': '#8b8787',
              'weight': '1',
              'lightness': -29
            }
          }]
      }
    },
    visualMap: {
      min: 0,
      max: 500,
      splitNumber: 5,
      inRange: {
        color: ['blue', 'green', 'yellow', 'red']
      },
      textStyle: {
        color: '#fff',
        fontWeight: 'bolder'
      },
      bottom: 10,
      left: 'right',
      right: 20
    },
    series: [{
      type: 'heatmap',
      mapType: 'world',
      coordinateSystem: 'bmap',
      blurSize: 50
    }]
  },
  options: options
}

 

Vue项目中使用Echarts绘制热力地图
OwmiObjective_C的博客
09-17 787
在上述代码中，我们首先通过document.getElementById获取容纳热力地图的div元素，然后使用echarts.init方法创建Echarts实例。在Vue项目中，我们可以使用Echarts库来绘制各种类型的图表，包括热力地图。本文将介绍如何在Vue项目中使用Echarts绘制热力地图，并提供相应的源代码示例。通过引入Echarts库并按照上述步骤进行配置，你可以在Vue项目中轻松地实现热力地图的可视化效果。通过以上步骤，我们就可以在Vue项目中使用Echarts绘制热力地图了。
Vue 中使用 echarts 热力图
mwn_cookie的博客
03-16 1689
安装 npm install echarts --save 开发组件(热力图) <template> <div id="myCalendar" :style="{width: '100%', height: '250px'}"> </div> </template> <script> import echarts from...
Vue3+Echart+百度地图 显示热力图
JustinChia的博客
01-09 1607
index.html加入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=<你的AK>"></script> .Vue文件引入echart bmap <template> <div :ref="refs.elChart" style="width: 100%;height: 800px;background-color:#ececec"&
用 Vue 3 + Mapbox 构建城市热力图组件：支持区域选择与动态渲染
最新发布
idree的博客
04-14 1035
用 Vue 3 + Mapbox 构建城市热力图组件：支持区域选择与动态渲染
Vue 使用 Echarts 显示热力地图信息
大家好，我是+V
02-05 3677
Vue 使用 Echarts 显示热力地图信息 主要是想实现到下面这个效果，然后省市地图根据后台返回的数据可以变换，地图以热力图的形式展现，鼠标移上可以显示该地区的数据信息。 为了方便维护，我把这个地图部分使用组件剥离了出来。 <template> <div style="height: 100%;overflow: hidden;"> <div id="ditu" style="width: 117%;height:117%;float: left;margin
Echart 实现热力图 调用echart里的百度地图 再进行热力图渲染 地图和热力图分开渲染
DX奥特曼的博客
04-19 2634
在应用echart实现热力图时 出现了一个疑问，可以使地图和热力图渲染分开进行么 实现一次地图显示 多次不同数据渲染 就不用每次在option加bmap进行地图显示 bmap: { center: [120.13066322374, 30.240018034923], zoom: 14, roam: true ...
在echarts中使用百度地图扩展，实现在地图上叠加显示热力图
花铛
06-17 4752
需要申请百度地图ak; //引入百度地图，echarts和百度地图扩展bmap <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=VifdHexZT4WOMrFYCQUZGorpRNjiRHer"></script> <script src="node...
echarts百度地图热力图踩坑后项目实践案例源文件
07-04
在本项目实践中，我们主要探讨了如何在ECharts 2.0中利用百度地图实现热力图，并在遇到一系列挑战后找到解决方案。ECharts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括热力图，能够清晰地展示...
Vue+Echarts+百度地图 小例子
Superman_peng的博客
08-06 2259
刚学完Echarts后，看到一些官方例子，粘贴代码下来却实现不了相应的效果，经过一番了解，发现还要引入百度地图，记录详细过程如下。 1、安装echarts（使用3.x,4.x） npm install echarts --save 通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。可以直接在项目代码中 require(‘echarts’) 得到 ECharts。 ECharts 目前暂停地图下载，所以使用百度地图作为底图，需要安装百度地图扩展 2、安装.
echarts+bmap结合可以在百度地图上展现 点图，线图，热力图 等可视化。
03-23
当ECharts与百度地图（BMap）结合时，我们可以实现地图上的数据可视化，包括点图、线图和热力图，从而为数据分析和展示带来新的维度。 首先，让我们深入了解一下ECharts。ECharts是百度开发的一个基于SVG+Canvas的...
vue+Echarts绘制中国地图的热力图
new_buff_007的博客
01-12 3820
<template> <div style="width:1500px;height:1000px"> <div id="byteVCellId" style="height:1000px"></div> </div> </template> <script> import 'echarts/map/js/china.js' import 'echarts/lib/component/title'.
vue项目中 使用到的 echarts 地图 结合 百度地图 使用
LWD_XST的博客
06-21 1079
好久没写了，今天难得勤快一会，写一个前阵子项目中使用到的小技术点 @_@ 事故的起因是，客户觉得项目样式太土，想增加一些炫酷效果，然后领导发话要在页面中增加一些统计图、地图啥的，然后就轮到 Echarts 登场了，各种统计图例应有尽有。。。可是我没用过echarts的地图啊，然后当然是各种百度。经过了一宿的研究，发现其实看似复杂的一皮，实际大佬已经都给封好了，你只需要copy就可以了，话不多说，简单说一下我的vue项目中如何最后成功让 Echarts 地图显示在我的页面中的。 既然要用到 Echarts
基于ECharts & 百度地图的热力图展示设计与实现
04-15
基于ECharts & 百度地图的热力图展示设计与实现
【数据流图】Echarts地图实例(热力图&线图&markPoint)
热门推荐
VVVVV
10-28 1万+
效果展示 需求解读 分辨率自适应 左右框内标题及内容都可动态配置 同时包括地图热力图与地图线图 出发点添加涟漪动画 markPoint根据数据不同动态展示是否高亮 热力图颜色数值范围由返回数据动态控制 难点分析 series.type为lines或effectScatter显示的前提为geo属性有值，而展示热力图却需要series.type为map，就涉及到geo与map两属性重叠与z轴level问题 线图需要准确知道起点与终点坐标，若边框、标题和边框内元素都脱离在canvas画布外会导致无法准确定
vue+echarts3.0（热力图）
reactL的博客
04-10 6089
需要引入import 'echarts/map/js/china.js' import EChart from 'vue-echarts/components/Echarts' import 'echarts/lib/component/title' import 'echarts/lib/component/legend' import 'echarts/lib/chart/heatmap' i...
Vue echarts4 热力图
weixin_44080648的博客
10-27 3441
直角坐标系下利用geo地理坐标系组件构建的热力图 下面图1为echarts官网上的一个实例，简单的利用点坐标进行热力图渲染，略显粗糙，不是很符合项目要求，图2为在echarts gallery上找到的一个热力图实例。 ...
ECharts 展示——实现热力图 + 世界地图
虎康的博客
06-14 1309
【代码】热力图 + 世界地图。
Vue 使用 Echarts 显示热力地图信息，前端架构组件Room功能详解
2401_84139711的博客
04-11 864
,pieces: [{min: 100,}, {max: 100,min: 50,}, {max: 50,min: 0,}, {value: 0,label: ‘无数据’,},],inRange: {},},geo: {label: {},normal: {},series: [{label: {normal: {},},normal: {},},}]},可以了，这样就，我的效果是出来了。“安徽省”: “340000”,
vue3百度底图热力图
09-16
要在Vue 3中实现百度地图热力图，你可以使用vue-baidu-map插件。下面是实现步骤： 1. 首先，在项目中安装vue-baidu-map插件。你可以使用以下命令进行安装： ``` npm install vue-baidu-map --save ``` 2. 在项目的入口文件中导入vue-baidu-map插件，并将其注册为Vue的全局组件。你可以在main.js文件中添加以下代码： ``` import Vue from 'vue' import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: '你的密钥' }) ``` 3. 在需要使用热力图的组件中，使用`<baidu-map>`标签，并设置对应的属性来配置地图和热力图的参数。例如，你可以设置`<baidu-map>`的属性如下： ``` <baidu-map :center="center" :zoom="zoom" :scroll-wheel-zoom="true" :map-types="mapTypes"> <baidu-heatmap :max="max" :radius="radius" :gradient="gradient"></baidu-heatmap> </baidu-map> ``` 在上述代码中，你需要根据需要设置`center`、`zoom`、`scroll-wheel-zoom`、`map-types`等属性来配置地图的中心点、缩放级别、允许滚轮缩放以及地图类型。同时，你还需要设置`<baidu-heatmap>`组件的`max`、`radius`和`gradient`属性来配置热力图的最大值、半径和渐变区间。 4. 最后，在你的组件中引入所需的地图和热力图组件： ``` import { BaiduMap, BaiduHeatmap } from 'vue-baidu-map' ``` 这样，你就可以在Vue 3中实现百度地图热力图了。记得替换密钥和其他地区的经纬度等参数，以满足你的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值