Vue|vue中使用vue-echarts引入百度地图实现数据可视化 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

在页面中引入百度地图的js

这里的密钥需要在百度地图平台去申请免费的官方地址
3. 在options中进行配置，

最后访问看效果

文章图片

自定义样式这里可以在 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中使用vue-echarts引入百度地图实现数据可视化】