vue中使用vue-echarts引入百度地图实现数据可视化
Posted 北海的大鱼
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中使用vue-echarts引入百度地图实现数据可视化相关的知识,希望对你有一定的参考价值。
安装v-charts
npm安装
$ npm install echarts vue-echarts
在使用v-chart前必须安装echarts
在main.js中进行注册
import ECharts from 'vue-echarts'
Vue.component('v-chart', ECharts)
在页面进行使用
1.页面中使用v-chart
<template>
<v-chart :options="options" />
</template>
- 在页面中引入百度地图的js
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>
这里的密钥需要在百度地图平台去申请 免费的 官方地址
3. 在options中进行配置,
<script>
// 引入百度地图的扩展
import 'echarts/extension/bmap/bmap'
export default {
data () {
return {
options: {
}
}
},
mounted () {
/* eslint-disable */
this.options = {
bmap: {
key: '你的密钥',
center: [104.114129, 37.550339],
zoom: 5,
roam: false,
mapStyle: { }
}
}
}
}
</script>
最后访问看效果
自定义样式
这里可以在 mapStyle: { }中贴入自己想设置的样式
注意:如果mapStyle样式不生效,打开package.json查看echarts版本是否是4.7版本
贴一个mapStyle中样式样例:
styleJson: [{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'land',
'elementType': 'all',
'stylers': {
'color': '#f3f3f3'
}
}, {
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'color': '#fdfdfd'
}
}, {
'featureType': 'highway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'poi',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'green',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'subway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'local',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'building',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'label',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#999999'
}
}]
效果:
以上是关于vue中使用vue-echarts引入百度地图实现数据可视化的主要内容,如果未能解决你的问题,请参考以下文章