echarts结合百度地图使用--热力图

公司的项目要做一个热力图,本来想着是用百度地图直接搞定,但是完成之后,产品经理说要有一个标尺,根据颜色不同来区分热力程度,然后我就一直找插件,但是找了很久,也没有找到,于是就想到了echarts的热力图,结果一做下去,踩了好多坑。

请大家耐心的看下去,因为,这篇文章应该能解开你所有的疑惑。
我用的框架是vue-cli里面还要用到webpack所以就凭空增添了一点难度,请看分解

第一步,既然要用到百度地图肯定就要引入百度地图了,首先申请密匙,
地址:http://lbsyun.baidu.com/index.php?title=jspopular

echarts结合百度地图使用--热力图_第1张图片
image.png

然后在你的index.html引入



  
    
    
     
    
    
    

    
    official

  
  
    

引入后需要在webpack.base.conf.js里面添加

module.exports = {
...
externals: {
    "BMap": "BMap",
  },
...
}

第二步 引入echarts 关于如何引入echarts我已经在我之前的文章写过了,不会的同学可以去看下https://www.jianshu.com/p/894b7969ed12
第三步 复制echarts的例子,http://gallery.echartsjs.com/editor.html?c=xSJNKs7EX







做到这一步的时候遇到坑了,
第一个是找不到/asset/get/s/data-1464248983149-HJ1jcQNX.json这个url,404错误
第二个是$ is not defined,这两个放在一块解决

先说出现这两个错误的原因
第一个是跨域的问题,
第二个是没有安装jquery
这两个问题搞的我很烦躁,于是我就想直接把echarts demo上的文件放到本地

如何把echarts的数据放到本地?
第一步 打开echarts demo链接
[http://gallery.echartsjs.com/editor.html?c=xSJNKs7EX](http://gallery.echartsjs.com/editor.html?c=xSJNKs7EX)
第二步 先按f12点击network,点击右上角的预览,我们会看到一堆请求
第三步 找到chart-iframe点击展开,找到data-1464248983149-HJ1jcQNX.json,双击
ok,你会发现数据的json文件已经下载下来了(我是用谷歌浏览器下载的)

下载完之后把数据复制到你的项目里,我是在components下新建了一个datas文件夹,放进去,然后把名字改成baiduData.json
然后在我写的地图组件里面引入import baiduJSON from '../datas/baiduData'







把上面的敲下来本以为能看见效果了,但是 怎么还报错 (getMap的问题)
这时我找了网上很多资料说是要引入一个百度组合echarts使用的扩展插件,让在index.html引入

    

好多人都说问题解决了,但是我的还是依然报错,蛋疼
然后我去翻echarts官方文档说明http://echarts.baidu.com/changelog.html

echarts结合百度地图使用--热力图_第2张图片
image.png

点击进去
echarts结合百度地图使用--热力图_第3张图片
image.png

看了上面的引入我发现这个插件好像安装echarts的时候应该一块下载下来了,既然本地就有那我还引个锤子,直接把本地拿出来用就好了
于是本着怀疑的态度,我找了node_modules -- echarts -- extension -- bmap -- bmap.js
果然是有的,于是我在main.js里引入import 'echarts/extension/bmap/bmap';

import Vue from 'vue'
import App from './App'
import axios from 'axios'
import router from './router'
import store from './store/index'
import ElementUI from 'element-ui'
import './components/global.js'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/index.css'
import echarts from 'echarts'
import 'echarts/extension/bmap/bmap';

然后刷新页面,果然,效果出现了
虽然都是一些小问题,但是不知道还是蛮浪费时间的,所幸都解决了
效果图


效果图.png

欢迎有问题的同学留言交流

你可能感兴趣的:(echarts结合百度地图使用--热力图)