vue+echarts實(shí)現(xiàn)江蘇省疫情地圖

文章目錄

• • vue+echarts實(shí)現(xiàn)江蘇省疫情地圖
• 前言
• 一、使用步驟
• • 1.引入庫
  • 2.代碼數(shù)據(jù)
• 效果

---

前言

作為剛學(xué)習(xí)vue結(jié)合echarts寫的案例，當(dāng)前時(shí)事關(guān)注度最高的無疑是各省市疫情數(shù)據(jù)信息了，因此在學(xué)習(xí)了echarts的基本實(shí)例同時(shí)也參考了其他作者制作的疫情地圖，嗯，學(xué)習(xí)真香。搓搓小手也敲了一個(gè)江蘇省的疫情地圖展示。同時(shí)也可擴(kuò)展為其他省市，只要有json地圖數(shù)據(jù)。

---

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、使用步驟

1.引入庫

首先當(dāng)然是要下載我們的大寶貝，node.js(重要性自己查)，官網(wǎng)下載也可以，我這里也提供了官網(wǎng)地址。點(diǎn)擊跳轉(zhuǎn)下載。安裝和環(huán)境配置自己網(wǎng)上搜索。疫情數(shù)據(jù)來源：https://www.maomin.club/fy/get/ ，可免費(fèi)使用。江蘇地圖json文件和完整內(nèi)容下載：點(diǎn)擊下載，點(diǎn)個(gè)關(guān)注私聊我發(fā)送也行。

使用如下（示例）：

//首先當(dāng)然是新建項(xiàng)目了，這里不作介紹了，網(wǎng)上都是。腳手架搭建項(xiàng)目 //項(xiàng)目引入echarts npm install echarts --save //使用的vue文件中引入 import * as echarts from 'echarts';

2.代碼數(shù)據(jù)

代碼如下（示例）：

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

處理數(shù)據(jù)：

//處理數(shù)據(jù)，method方法中async init() {let _this = this;// 獲取存放地圖的dom元素let mapChartInstance = echarts.init(this.$refs.chart);//采用這種方式是有一個(gè)報(bào)錯(cuò)沒法找到指定的地圖數(shù)據(jù)，因此越過了那步直接把數(shù)據(jù)取出來賦值，當(dāng)然地圖數(shù)據(jù)如果采用其他形式，也可正常寫，不必如此var featuresCollection = { geoJSON: jiangsuMap };echarts.registerMap("JingSu", featuresCollection.geoJSON); //和下面的map保持一致// 指定圖表的配置項(xiàng)和數(shù)據(jù)let option = {// 地圖標(biāo)題title: {text: "江蘇疫情地圖",x: "center",},// 放上鼠標(biāo)后顯示的tooltip: {trigger: "item",formatter: function (e, t, n) {return "地區(qū)：" + e.name + "<br/>確診：" + e.value;},textStyle: {align: "left",},},// 設(shè)置地圖數(shù)據(jù)series: [{type: "map",map: "JingSu",// data:this.dataList,label: {show: true,color: "black",fontsize: 12,},itemStyle: {borderWidth: 0.5,},// 選中時(shí)候顯示內(nèi)容emphasis: {label: {color: "black",fontsize: 15,},itemStyle: {areaColor: "#ADFF2F",},},roam: true,},],// 視覺映射組件，根據(jù)疫情數(shù)據(jù)的不同，地圖顯示不同的顏色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，避免了圖表渲染完成后，數(shù)據(jù)還沒有請(qǐng)求處理好.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],是解析數(shù)據(jù)找到江蘇的數(shù)據(jù)在地址23位置。如果有其他省份的json數(shù)據(jù)，也可更改此處的地址，渲染出對(duì)應(yīng)的省市地圖}).catch((err) => {console.error(err);});option.series[0].data = mapDataList; //填充地圖所需要的datamapChartInstance.setOption(option);}, //mounted中調(diào)用即可mounted() {this.init();}, //export default中的dataname: "jiangSu-Map",data() {return {tableData: [],// 保存的的疫情數(shù)據(jù)summaryData: [],};}, //在export default中加入即可。 //跨域配置在vue.config.js。視個(gè)人使用創(chuàng)建項(xiàng)目方式的不同而定。 server: {host: '0.0.0.0',port: 3000,proxy: {'/api': {target: 'https://www.maomin.club', //實(shí)際請(qǐng)求地址changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}

---

效果

我的實(shí)現(xiàn)是以組件的形式展現(xiàn)。

總結(jié)

以上是生活随笔為你收集整理的vue+echarts实现江苏省疫情地图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。