关键词:
安装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中引入百度地图
参考技术A在index.html文件中引入百度地图但是并没有用且报错此处报错非常诡异,因为我采用动态引用的方式时并没有报该错新创建一个文件utils/baiduMap.js在百度地图组件baidumap.vue中引用 查看详情
前端框架vue——百度地图使用
参考技术A百度地图的使用需要一个专属的密钥(ak)作为路径:按步骤完成,并且激活就能获得一个密钥了,这样我们就可以开始引入地图了。先来看效果图:现在在index.html中引入script: 查看详情
vue中使用vue-echarts(代码片段)
一、先说在原生里怎么使用echarts<!--1.引入echarts文件--> <scriptsrc="echarts.min.js"></script><!--准备容器--> <divstyle="width:600px;height:400px;"id="main"></div>//基于dom,初始化echarts实例 查看详情
在vue2中使用百度或者谷歌地图
在vue项目的开发过程中,我们会需要用到地图显示功能,那么如何在vue项目中引用百度地图或者谷歌地图呢?下面是我自己在开发过程中的引用方式,如果有更好的方式,欢迎提出。一、在index.html文件的头部引入地图其中src是... 查看详情
vue+antd搭配百度地图实现搜索定位等功能(代码片段)
...功能,而原项目中又引入了百度地图,所以我就打算通过使用百度地图来实现地址搜索功能啦。本次教程可能过于啰嗦,所以这里先放上预览地址供大家预览——点我预览,也可到文末直接下载代码先自行体验。。。ps:又因为百... 查看详情
vue基于百度地图实现热力图(代码片段)
...首先要安装百度mapnpminstallvue-baidu-map--save1.2在main.js文件中引入并全局注册importBaiduMapfrom'vue-baidu-map'Vue.use(BaiduMap 查看详情
vue使用echarts图表插件/vue-echarts
参考技术Avue使用图表相关的内容可以选择Vue-ECharts也可以使用封装后的v-chart(暂不讲)Vue-ECharts安装npminstallechartsvue-echartsVue-ECharts引入Vue-ECharts使用Vue-ECharts文档Echarts文档 查看详情
vue实现百度地图(基础)
1、安装:$npminstallvue-baidu-map--save2、全局注册,在main.js中引入以下代码importBaiduMapfrom‘vue-baidu-map‘Vue.use(BaiduMap,ak:‘你申请的key‘)3、界面 <template><baidu-map:center="center":zoom="zoom"@ready="han 查看详情
vue中引入百度地图(代码片段)
1.安装:npminstallvue-baidu-map--save2.全局注册,在main.js中引入以下代码:importBaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, ak: '你申请的key')3.完整代码:<template><ba 查看详情
vue中使用百度地图实现城市定位(代码片段)
Vue项目运行环境:Vue2.0,VueCli3.0步骤一:登录百度地图开放平台在控制台---->应用管理---->我的应用下面创建一个应用。目的是获取ak步骤二:在public文件夹的index.html文件中导入百度地图,拼上你的ak步骤... 查看详情
vue中使用百度地图实现城市定位(代码片段)
Vue项目运行环境:Vue2.0,VueCli3.0步骤一:登录百度地图开放平台在控制台---->应用管理---->我的应用下面创建一个应用。目的是获取ak步骤二:在public文件夹的index.html文件中导入百度地图,拼上你的ak步骤... 查看详情
vue中使用百度地图(代码片段)
...;,externals:BMap:"BMap",4、引入importBMapfrom"BMap";5、使用varmap=newBMap.Map("map");map.centerAndZoom(newBMap.Point(this.formData.long,this.formData.lati),12);vartime,distance;varsearchComplete=function(results)if(transit.getStatus()!=BMAP_STATUS_SUCCESS)re... 查看详情
vue中使用百度地图(代码片段)
...;,externals:BMap:"BMap",4、引入importBMapfrom"BMap";5、使用varmap=newBMap.Map("map");map.centerAndZoom(newBMap.Point(this.formData.long,this.formData.lati),12);vartime,distance;varsearchComplete=function(results)if(transit.getStatus()!=BMAP_STATUS_SUCCESS)re... 查看详情
vue项目模块化引入百度地图(代码片段)
1.1.安装百度地图依赖包npmivue-baidu-map--save2.在src/main.js导入依赖包importBaiduMapfrom‘vue-baidu-map‘Vue.use(BaiduMap,ak:‘YOUR_APP_KEY‘//这个地方是官方提供的ak密钥)3.配置地图的基本信息,在我们需要的组件中引用<!--百度地图--><... 查看详情
vue-echarts的使用及编译报错解决方法(代码片段)
一、使用vue-cli快速构建vue项目,引入vue-echarts组件安装: >npmivue-echarts--save 修改webpack.config.js配置:test:/.js$/,loader:‘babel-loader‘,include:[resolve(‘src‘),resolve(‘node_modules/vue-echarts‘),reso 查看详情
vue中使用百度地图——根据输入框输入的内容,获取详细地址
知识点:在Vue.js项目中调用百度地图API,实现input框,输入地址,在百度地图上定位到准确地址,获得到经纬度参考博客: 百度地图的引用,初步了解参考博客:http://blog.csdn.net/docallen/article/details/70877925 &nbs... 查看详情
uniapp(安卓端)百度地图的使用
参考技术A公司项目中有地图展示和定位功能,使用uniapp本以为应该很是容易,应该有现成的空间,去插件市场一找,大部分的插件都是针对H5的,对于app端很少,要不就是需要花钱,这才自己动手实现。公司过去的项目使用的是... 查看详情
百度地图百度地图的使用方法和在vue中如何使用百度地图(超详细)(代码片段)
【百度地图】百度地图的使用方法和在vue中如何使用百度地图(超详细)1-介绍百度地图功能强大,本篇文章只是对百度地图JavaScriptAPI进行一个介绍~官方网址百度地图开放平台LBS:LocationBusinessServer基于定义位置... 查看详情