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>
  1. 在页面中引入百度地图的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引入百度地图实现数据可视化的主要内容,如果未能解决你的问题,请参考以下文章

使用vue-echarts,需要按需引入

vue使用ECharts图表插件/Vue-ECharts

Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信

vue中使用vue-echarts

Vue+Antd搭配百度地图实现搜索定位等功能

vue基于百度地图实现热力图