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实现江苏省疫情地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。