当前位置:首页 » 《随便一记》 » 正文

vue中使用vue-echarts引入百度地图实现数据可视化_北海的大鱼的博客

6 人参与  2022年03月09日 15:58  分类 : 《随便一记》  评论

点击全文阅读


安装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'
            }
          }]

效果:

在这里插入图片描述


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/35929.html

密钥  样式  页面  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • (此去经年无故人)南初陆南城:结局+番外精品选集起点章节+阅读即将发布预订
  • 沈凝夏叶晚怡附加完整在线阅读(归雁不栖故人枝)最近更新列表
  • 剧情人物是时初,白浩雄的玄幻言情小说《召诸神,踏万界,天命帝女逆乾坤》,由网络作家&ldquo;海鸥&rdquo;所著,情节扣人心弦,本站TXT全本,欢迎阅读!本书共计381345字,185章节,:结局+番外免费品鉴:结局+番外评价五颗星
  • 凤青禾,江明远,***枢小说(别人修仙我捡漏,卷王们破防了)最近更新(凤青禾,江明远,***枢)整本无套路阅读
  • 薛梨小说无删减+后续(曾经亲情似草芥)畅享阅读
  • 沈南栀小说(穿越时空,我要修补时空裂缝)章节目录+起点章节(沈南栀)全篇清爽版在线
  • 未婚妻被巨蟒缠身,我该吃就吃该喝就喝前言+后续_阿豪林月周然后续+番外_小说后续在线阅读_无删减免费完结_
  • 陆骁,陆本初小说(陆骁,陆本初)(癫!睁眼穿成老太太挥鞭***逆子)前传+阅读全新作品预订
  • 姐姐含冤而死后冥王另娶,我杀穿整个地府在线阅读_阎罗殿殷红别提一口气完结_小说后续在线阅读_无删减免费完结_
  • (书荒必看)毒后重生:疯王的神医小娇妻沈清歌,萧绝:+后续热血十足
  • 重生后我和太监联手灭了敌国喻辰,林雪续集(重生后我和太监联手灭了敌国)终极反转(喻辰,林雪)全篇一口气阅读
  • 我不做灵媒后,自称灵媒摆渡人的养妹害怕了内容精选_苏晓霍老阿姐无广告_小说后续在线阅读_无删减免费完结_

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1