公司的項目要做一個熱力圖备蚓，本來想著是用百度地圖直接搞定饮焦，但是完成之后恩商，產(chǎn)品經(jīng)理說要有一個標(biāo)尺旺坠，根據(jù)顏色不同來區(qū)分熱力程度谚鄙，然后我就一直找插件熙宇，但是找了很久朦乏，也沒有找到找颓，于是就想到了echarts的熱力圖岳颇，結(jié)果一做下去照捡，踩了好多坑。
請大家耐心的看下去话侧，因為栗精，這篇文章應(yīng)該能解開你所有的疑惑。
我用的框架是vue-cli里面還要用到webpack所以就憑空增添了一點難度瞻鹏，請看分解
第一步悲立，既然要用到百度地圖肯定就要引入百度地圖了，首先申請密匙新博，
地址：http://lbsyun.baidu.com/index.php?title=jspopular
然后在你的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 關(guān)于如何引入echarts我已經(jīng)在我之前的文章寫過了级历，不會的同學(xué)可以去看下http://www.reibang.com/p/894b7969ed12
第三步 復(fù)制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嚼贡，這兩個放在一塊解決
先說出現(xiàn)這兩個錯誤的原因
第一個是跨域的問題，
第二個是沒有安裝jquery
這兩個問題搞的我很煩躁同诫，于是我就想直接把echarts demo上的文件放到本地
如何把echarts的數(shù)據(jù)放到本地粤策？
第一步 打開echarts demo鏈接
[http://gallery.echartsjs.com/editor.html?c=xSJNKs7EX](http://gallery.echartsjs.com/editor.html?c=xSJNKs7EX)
第二步 先按f12點擊network，點擊右上角的預(yù)覽误窖，我們會看到一堆請求
第三步 找到chart-iframe點擊展開叮盘，找到data-1464248983149-HJ1jcQNX.json,雙擊
ok，你會發(fā)現(xiàn)數(shù)據(jù)的json文件已經(jīng)下載下來了（我是用谷歌瀏覽器下載的）
下載完之后把數(shù)據(jù)復(fù)制到你的項目里霹俺，我是在components下新建了一個datas文件夾柔吼，放進(jìn)去，然后把名字改成baiduData.json
然后在我寫的地圖組件里面引入import baiduJSON from '../datas/baiduData'
<template>
<!--一定要給寬高丙唧，不然會報錯愈魏，container沒有高度-->
<div id="chart">
echarts百度地圖
</div>
</template>
<script>
//引入json數(shù)據(jù)
import baiduJSON from '../datas/baiduData'
export default {
data(){
return {
}
},
mounted(){
let myChart = this.$echarts.init(document.getElementById('chart'));
let pointsData = baiduJSON;//其實這一步是多余的
//把數(shù)據(jù)處理成需要的格式，只是把數(shù)值都改成了1，具體項目可以根據(jù)自己實際來處理
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的問題）
這時我找了網(wǎng)上很多資料說是要引入一個百度組合echarts使用的擴(kuò)展插件溪厘，讓在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
點擊進(jìn)去
看了上面的引入我發(fā)現(xiàn)這個插件好像安裝echarts的時候應(yīng)該一塊下載下來了畸悬，既然本地就有那我還引個錘子，直接把本地拿出來用就好了
于是本著懷疑的態(tài)度珊佣，我找了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';
然后刷新頁面，果然彩扔，效果出現(xiàn)了
雖然都是一些小問題，但是不知道還是蠻浪費時間的僻爽，所幸都解決了
效果圖
歡迎有問題的同學(xué)留言交流
