vue+echarts实现江苏省疫情地图

文章目录

- vue+echarts实现江苏省疫情地图
前言
一、使用步骤
- 1.引入库
- 2.代码数据
效果

前言

作为刚学习vue结合echarts写的案例，当前时事关注度最高的无疑是各省市疫情数据信息了，因此在学习了echarts的基本实例同时也参考了其他作者制作的疫情地图，嗯，学习真香。搓搓小手也敲了一个江苏省的疫情地图展示。同时也可扩展为其他省市，只要有json地图数据。

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用步骤

1.引入库

首先当然是要下载我们的大宝贝，node.js(重要性自己查)，官网下载也可以，我这里也提供了官网地址。点击跳转下载。安装和环境配置自己网上搜索。疫情数据来源：https://www.maomin.club/fy/get/ ，可免费使用。江苏地图json文件和完整内容下载：点击下载，点个关注私聊我发送也行。

使用如下（示例）：

//首先当然是新建项目了，这里不作介绍了，网上都是。脚手架搭建项目
//项目引入echarts
npm install echarts --save
//使用的vue文件中引入
import * as echarts from 'echarts';

2.代码数据

代码如下（示例）：

//首先要有容器存放地图
<template><div class="home"><!--    放地图的容器--><div id="main" ref="chart" style="width: 400px; height: 400px"></div></div>
</template>

处理数据：

//处理数据，method方法中async init() {let _this = this;// 获取存放地图的dom元素let mapChartInstance = echarts.init(this.$refs.chart);//采用这种方式是有一个报错没法找到指定的地图数据，因此越过了那步直接把数据取出来赋值，当然地图数据如果采用其他形式，也可正常写，不必如此var featuresCollection = { geoJSON: jiangsuMap };echarts.registerMap("JingSu", featuresCollection.geoJSON); //和下面的map保持一致// 指定图表的配置项和数据let option = {// 地图标题title: {text: "江苏疫情地图",x: "center",},// 放上鼠标后显示的tooltip: {trigger: "item",formatter: function (e, t, n) {return "地区：" + e.name + "<br/>确诊：" + e.value;},textStyle: {align: "left",},},// 设置地图数据series: [{type: "map",map: "JingSu",// data:this.dataList,label: {show: true,color: "black",fontsize: 12,},itemStyle: {borderWidth: 0.5,},// 选中时候显示内容emphasis: {label: {color: "black",fontsize: 15,},itemStyle: {areaColor: "#ADFF2F",},},roam: true,},],// 视觉映射组件，根据疫情数据的不同，地图显示不同的颜色visualMap: {type: "piecewise",min: 0,max: 1000,left: 10,showLabel: !0,text: ["高", "低"],pieces: [{ min: 1000 }, // 不指定 max，表示 max 为无限大。{ min: 100, max: 999 },{ min: 10, max: 99 },{ min: 1, max: 9 },{ value: 0 },],inRange: {color: ["#7FFFD4","#ffaa85","#ff7b69","#cc2929","#8c0d0d","#660208",],},show: !0,},};let mapDataList = await this.axios.get("/api/fy/get/") //采用了跨域的方式，vue.config.js中配置即可  采用异步方式await，避免了图表渲染完成后，数据还没有请求处理好.then((res) => {_this.summaryData = JSON.parse(res.data);let maplist = _this.summaryData.component[0].caseList[23].subList.map((item) => ({name: item.city,value: item.confirmed,}));return maplist; //caseList[23],是解析数据找到江苏的数据在地址23位置。如果有其他省份的json数据，也可更改此处的地址，渲染出对应的省市地图}).catch((err) => {console.error(err);});option.series[0].data = mapDataList; //填充地图所需要的datamapChartInstance.setOption(option);},

//mounted中调用即可mounted() {this.init();},
//export default中的dataname: "jiangSu-Map",data() {return {tableData: [],// 保存的的疫情数据summaryData: [],};},

//在export default中加入即可。
//跨域配置在vue.config.js。视个人使用创建项目方式的不同而定。
server: {host: '0.0.0.0',port: 3000,proxy: {'/api': {target: 'https://www.maomin.club',   //实际请求地址changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}

效果

我的实现是以组件的形式展现。

vue+echarts实现江苏省疫情地图相关推荐

VUE echarts绘制省级/市级地图自动轮循tooltip
效果图绘制省级地图 1.安装echarts依赖,并在main.js中准备 import echarts from "echarts" Vue.prototype.$echarts ...
用echarts实现中国疫情地图
效果图: 首先第一步进行安装echarts npm install echarts --save 然后在main.js中进行导入和添加到vue的原型上. main.js中的代码如下: import V ...
使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)，引入省份js文件
项目源码附js/json地图数据(下载项目源码后请使用Npm install 来安装相关依赖) 效果使用前请使用npm(cnpm)安装echarts,详情见官网. 本文作为笔记demo只引入5个省( ...
vue 引入json地图_使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)，引入省份js文件...
项目源码附js/json地图数据(下载项目源码后请使用Npm install 来安装相关依赖) 效果使用前请使用npm(cnpm)安装echarts,详情见官网. 本文作为笔记demo只引入5个省( ...
node联合echarts简单实现疫情地图
基本步骤: node爬取数据获取标准数据前台数据标准化展示效果展示: 利用node爬取数据爬取网站:丁香网所要使用的node第三方模块 01 superagent用于向目标网站发送请求并带 ...
[超详细]Echarts+vue+百度地图动态实现城市疫情地图
动态中国城市疫情地图的实现,主要是参照Echarts官网官方案例的方法:Examples - Apache ECharts ,但是官方给的案例数据都是静态写在Option的Data中的无法根据疫情实时 ...
【Vue】疫情实时数据及地图 Vue + Echarts + vxeTable
本期内容使用 Vue + Echarts + vxeTable 搭建前端展示界面,接口请求示例是腾讯肺炎疫情实时动态页面中的开放接口知识基础如何在 Vue 中引入 Echarts,点这里如何在 ...
【vue】vue + ECharts 实现中国地图
1.效果图: 2.实现步骤引入ECharts ECharts 官网地址:https://echarts.apache.org/zh/index.html npm install echarts -- ...
Vue 实现世界地图展示，根据国家中数量的多少区分（类似世界疫情地图）
Vue 实现世界地图由于测试数据较少,所以,空白地方较多.鼠标悬浮时展示国家和对应数量. 1.因为是根据国家进行展示,所以我们需要国家的数据,我建了一张表来存储国家的中英文,下面是对应的SQL SE ...

vue+echarts实现江苏省疫情地图

vue+echarts实现江苏省疫情地图

文章目录

前言

一、使用步骤

1.引入库

2.代码数据

效果

vue+echarts实现江苏省疫情地图相关推荐

最新文章

热门文章