echarts结合百度地图使用--热力图
公司的项目要做一个热力图，本来想着是用百度地图直接搞定，但是完成之后，产品经理说要有一个标尺，根据颜色不同来区分热力程度，然后我就一直找插件，但是找了很久，也没有找到，于是就想到了echarts的热力图，结果一做下去，踩了好多坑。
请大家耐心的看下去，因为，这篇文章应该能解开你所有的疑惑。
我用的框架是vue-cli里面还要用到webpack所以就凭空增添了一点难度，请看分解
第一步，既然要用到百度地图肯定就要引入百度地图了，首先申请密匙，
地址：http://lbsyun.baidu.com/index.php?title=jspopular
image.png
然后在你的index.html引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--引入百度地图-->
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=DDLwA2CBFGHRpxFzFx3K5KnBQtHP4hte" ></script>
<!--引入百度热力图-->
<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<script type="text/javascript" src=""></script>
<title>official</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
引入后需要在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
<template>
<!--一定要给宽高，不然会报错，container没有高度-->
<div id="chart">
echarts百度地图
</div>
</template>
<script>
export default {
data(){
return {
}
},
mounted(){
let myChart = this.$echarts.init(document.getElementById('chart'));
var uploadedDataURL = "/asset/get/s/data-1464248983149-HJ1jcQNX.json";
$.getJSON(uploadedDataURL, function (data) {
var points = [].concat.apply([], data.map(function (track) {
return track.map(function (seg) {
return seg.coord.concat([1]);
});
}));
myChart.setOption({
animation: false,
bmap: {
center: [120.13066322374, 30.240018034923],
zoom: 14,
roam: true
},
visualMap: {
show: false,
top: 'top',
min: 0,
max: 5,
seriesIndex: 0,
calculable: true,
inRange: {
color: ['blue', 'blue', 'green', 'yellow', 'red']
}
},
series: [{
type: 'heatmap',
coordinateSystem: 'bmap',
data: points,
pointSize: 5,
blurSize: 6
}]
});
var bmap = myChart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());
});
},
methods:{
}
}
</script>
<style>
#chart{
width: 100%;
height: 100%;
}
</style>
做到这一步的时候遇到坑了，
第一个是找不到/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'
<template>
<!--一定要给宽高，不然会报错，container没有高度-->
<div id="chart">
echarts百度地图
</div>
</template>
<script>
//引入json数据
import baiduJSON from '../datas/baiduData'
export default {
data(){
return {
}
},
mounted(){
let myChart = this.$echarts.init(document.getElementById('chart'));
let pointsData = baiduJSON;//其实这一步是多余的
//把数据处理成需要的格式，只是把数值都改成了1，具体项目可以根据自己实际来处理
var points = [].concat.apply([], pointsData.map(function (track) {
return track.map(function (seg) {
return seg.coord.concat([1]);
});
}));
let option;
myChart.setOption(option = {
animation: false,
bmap: {
center: [120.13066322374, 30.240018034923],
zoom: 14,
roam: true
},
visualMap: {
show: true,
top: 'top',
min: 0,
max: 5,
seriesIndex: 0,
calculable: true,
inRange: {
color: ['blue', 'blue', 'green', 'yellow', 'red']
}
},
series: [{
type: 'heatmap',
coordinateSystem: 'bmap',
data: points,
pointSize: 5,
blurSize: 6
}]
});
var bmap = myChart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());
},
methods:{
}
}
</script>
<style>
#chart{
width: 100%;
height: 100%;
}
</style>
把上面的敲下来本以为能看见效果了，但是 怎么还报错 （getMap的问题）
这时我找了网上很多资料说是要引入一个百度组合echarts使用的扩展插件，让在index.html引入
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
好多人都说问题解决了，但是我的还是依然报错，蛋疼
然后我去翻echarts官方文档说明http://echarts.baidu.com/changelog.html
image.png
点击进去
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
欢迎有问题的同学留言交流
