在Vue中使用Echarts地图以及数据展示

效果图如下（东营市地图）

1.地图显示

首先要获取该地区的JSON数据，网站：DATAV.GeoAtolas，逐步选择地图区域，然后复制数据到本地另存为dy.json。

直接上代码了，添加了详细备注

<template><div id="mapView" class="map-view"/>
</template>
<script>//引入地图数据import dy from '@/assets/dy'  //引入echarts以及提示框和标题组件const echarts = require('echarts/lib/echarts')require('echarts/lib/chart/bar')require('echarts/lib/component/tooltip')require('echarts/lib/component/title')require('echarts/lib/component/grid')require('echarts/lib/chart/line')require('echarts/lib/chart/pie')require('echarts/lib/chart/gauge')require('echarts/lib/chart/map')require('echarts/lib/component/visualMap')require('echarts/lib/component/legend')export default {mounted() {this.getMapInfo()  //获取地图显示的数据},methods: {async getMapInfo() {let res = await getMapData() //自己封装的请求方法this.buildMap(res.data) //有数据格式要求，下文细说},buildMap(data) {let myMap = echarts.init(document.getElementById('mapView'))  //初始化节点实例echarts.registerMap('东营', dy)   //注册可用的地图//配置项let option = {//移入地图时展示信息tooltip: {trigger: "item",backgroundColor: 'opacity',//感觉代码写的不美观。。。显示的样式根据情况而定formatter: function(params) {let obj1 = JSON.parse(JSON.stringify(params));let obj = obj1.data.emphasislet str = `<ul style='width:200px; padding: 8px 20px;background: #0b2668;border: 1px solid #123c8e'><li style='height: 20px; list-style: none; color: #198aea;font-size: 12px;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #123c8e;padding-bottom: 5px'><p>医院</p><p>接入设备数</p></li>`for (let i = 0; i < obj.length; i++) {str = str +`<li style='height: 20px; list-style: none; color: #198aea;font-size: 12px;display: flex;justify-content: space-between;align-items: center;margin: 5px 0'><p>${obj[i].name}</p><p>${obj[i].value}</p></li>`}str = str + "</ul>";return str;}},series: [{name: '东营市地图',type: 'map',mapType: '东营', // 自定义扩展图表类型，和上文注册名字的一样itemStyle: {normal: {  //正常状态label: {show: true,formatter: '{b}-{c}',   //地图上显示的数据，分别对应data中的name和valuecolor: '#fff',},areaColor: '#0a76d1'   //地图区域的颜色},emphasis: { //  鼠标移入高亮状态label: {show: true},areaColor: '#ccb213'},},aspectScale: 1,   //用于 scale 地图的长宽比zoom: 1,top: '60',data: data}],}myMap.clear()myMap.setOption(option)},}}
</script>

2.注意问题

和后端商定好你需要的数据格式，以我的项目为例。对照一下上文代码，很容易看懂。
返回数据的 name 一定要和你地图数据（dy.json）中的地区名一致！差个空格都不行！！！

暂时就想到了这么多，收工。

在Vue中使用Echarts地图以及数据展示相关推荐

Vue中使用Echarts地图实现某省市区县地图的展示功能
在移动中台运营指标分析-大屏和开发点赞民警应用开发的过程中,需要展示某市的区县地图.通过这个两个项目开发应用实践和不断研究. 效果图展示: 大致总结了一下实现的方法步骤: 1.通过阿里 ...
vue中引入高德地图Loca数据可视化
目录引言: 关键词: 正文: 一.如何安装或者引入: 二.如何引入: 三.如何使用: 四.完整代码: 五.效果图参考: 引言: 前面我的文章介绍了vue中引入高德地图实例的,详情可以去参考,由于需 ...
在Vue中使用eCharts的地图图表，及生成自定义地图数据（乡镇级）
如何在Vue中使用eCharts的地图图表,及如何生成自定义地图数据(乡镇级) 文章目录一.在Vue使用ECharts地图功能二.生成地图数据 1.安装Bigemap 程序 2.生成需要的各乡镇地 ...
vue中使用echarts实现动态数据绑定、获取后端接口数据
之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单 ...
VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
vue中使用ECharts实现中国地图配置详解（配官方配置地址）
前言: 1.实现自定义左下角的视觉映射组件(包括自定义颜色.文字.图元大小) 2.实现自定义悬浮提示框如下图所示: 实现步骤: 一.在vue中安装echarts 1.npm install echa ...
vue中使用echarts实现地图颜色渐变及自定义浮窗内容
在这篇文章里vue中使用echarts自定义浮窗内容及样式_芝士焗红薯的博客-CSDN博客,总结了echarts的一些简单用法.这篇文章,一个是在原来的自定义浮窗内容上实现了地图的颜色渐变,一个是简化 ...
vue 引入json地图_在vue2.x中使用echarts,地图或者theme引入js 文件，会有问题，地图的json文件重新注册可以...
One-line summary [问题简述] 在vue2.x中使用echarts,地图或者theme引入会有问题 import echarts from 'echarts/dist/echarts' ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...

在Vue中使用Echarts地图以及数据展示

1.地图显示

2.注意问题

在Vue中使用Echarts地图以及数据展示相关推荐

最新文章

热门文章