废话不多说先上效果图:
首先先说,echarts百度地图的渲染:
安装echart: npm install echarts@4.8 --save
安装百度地图:
npm install vue-baidu-map --save
# 在 main.js 里面
import echarts from 'echarts';
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: '你的百度地图的key'
})
申请地址:百度地图开放平台 | 百度地图API SDK | 地图开发
vue页面:
import echarts from "echarts/lib/echarts";
//百度地图
import "echarts/extension/bmap/bmap";
<div id="main" class="echartMap"></div>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option = {
backgroundColor: 'transparent',
title: {
// text: '',
// subtext: '',
// sublink: '',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
formatter: function (params, ticket, callback) {
// console.log("params:", params)
if (params.value !== undefined){
return (
"基站名称: " + params.name + "<br />" +
"BCCH: " + params.value[3] + "<br />"+
"TCH: " + params.value[4] + "<br />"+
"TCH1: " + params.value[5] + "<br />"+
"BSIC: " + params.value[6] + "<br />"+
"公里标: " + params.value[2] + "<br />"+
"纬度: " + params.value[1] + "<br />" +
"经度: " + params.value[0] + "<br />"
)
}
}
},
geo: { //地图配置
map: 'bmap',
zoom: 12,
roam: true,
center: [ 88.36715698242188, 39.135459756570164],
label:{
show: true,
offset: [1, 1000],
color: "#fff"
},
itemStyle: {
color: '#1A3F57', //地图背景色
borderColor: '#516a89', //省市边界线00fcff 516a89
borderWidth: 1
},
emphasis: {
itemStyle: {
color: '#87CEEB' //悬浮背景
},
},
backgroundColor: "#013954",
},
bmap: {
center: [ 88.36715698242188, 39.135459756570164],
zoom: 12,
roam: true,
mapStyle: {
// 定义bmap的样式
//地图不同类型的颜色设置,以及是否展示
// styleJson: []
}
},
// 散点图配置
series: [
{
// 基站塔图
type: 'effectScatter',
coordinateSystem: 'bmap',
rippleEffect : { //气泡效
brushType : 'stroke'
},
hoverAnimation: true, //气泡效果end
zlevel: 6,
symbol: 'image://' + require('../../assets/images/map/bas.png'),
symbolSize: 20,
label: {
normal: {
formatter: function (params) {