在vue中使用echarts和datav實(shí)現(xiàn)一個(gè)地圖功能-創(chuàng)新互聯(lián)

這篇文章給大家介紹在vue中使用echarts和datav實(shí)現(xiàn)一個(gè)地圖功能，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

岳普湖網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,岳普湖網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為岳普湖近1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個(gè)售后服務(wù)好的岳普湖做網(wǎng)站的公司定做！

隨著前端技術(shù)的飛速發(fā)展，大數(shù)據(jù)時(shí)代的來臨，我們在開發(fā)項(xiàng)目時(shí)越來越多的客戶會(huì)要求我們做一個(gè)數(shù)據(jù)展示的大屏，可以直觀的展示用戶想要的數(shù)據(jù)，同時(shí)炫酷的界面也會(huì)深受客戶的喜歡。

大屏展示其實(shí)就是一堆的圖表能夠讓人一目了然地看到該系統(tǒng)下的一些基本數(shù)據(jù)信息的匯總，也會(huì)有一些實(shí)時(shí)數(shù)據(jù)刷新，信息預(yù)警之類的。筆者在之前也做過一些大屏類的數(shù)據(jù)展示，但是由于都是一些圖表類的，覺得沒什么可說的，加之?dāng)?shù)據(jù)也都牽扯到公司，所以沒有沉淀下來什么。

最近有朋友要做一個(gè)大屏，問了自己一個(gè)問題，自己也剛好做了一個(gè)簡單的大屏數(shù)據(jù)展示，趁此機(jī)會(huì)做一個(gè)小總結(jié)。

先看一下效果：

由于數(shù)據(jù)牽扯到公司內(nèi)部信息，所以將一些復(fù)雜的切換邏輯都去掉類，但保留了一些數(shù)據(jù)間但相互聯(lián)動(dòng)。

項(xiàng)目采用的是Vue+Echanrts+datav寫的，結(jié)構(gòu)目錄如下：

由于只是一個(gè)單一頁面，數(shù)據(jù)處理也不是復(fù)雜，沒有涉及到router和vuex，從結(jié)構(gòu)目錄上看就是一個(gè)很典型的vue-cli項(xiàng)目，在之前我也講過關(guān)于vue-cli項(xiàng)目的一些操作和目錄結(jié)構(gòu)解釋，這里就不做多做說明了，在文章最后會(huì)提供該項(xiàng)目的源碼地址庫。

大屏主要的炫酷效果本人引用的是datav組件，地址：http://datav.jiaminghi.com/,這簡直就是數(shù)據(jù)可視化的一款神器，神奇之處我就不多說了，大家可以自己去它的網(wǎng)站上自行體會(huì)。它也提供了如何在vue 中使用該組件。

datav可以全局注入，也可以按需注入，本人省事就直接在main.js中進(jìn)行了全局注入。

所有的頁面代碼都放在了views文件目錄下：

其中index.vue文件為主文件入口，其他都是其子組件，組件名稱以方位的形式命名，如centerForm.vue就是中間的表單控件。

本項(xiàng)目引入了中國地圖并實(shí)現(xiàn)省市縣下鉆，最初采用的是阿里旗下的高德地圖，后來因?yàn)榉N種原因改為了百度提供的Echarts來實(shí)現(xiàn)，但兩種使用方法都保留了下來，大家可以根據(jù)自己的需求進(jìn)行選擇。

其中Echarts中國地圖的代碼如下：

<template>
 <div id="china_map_box">
 <el-button type="primary" size="mini" class="back" @click="back" v-if="deepTree.length > 1">返回</el-button>
 <div class="echarts">
  <div id="map"></div>
 </div>
 </div>
</template>

<script>

 import {getChinaJson, getProvinceJSON, getCityJSON} from "../api/get-json";
 import {cityProvincesMap} from '../config/cityProvincesMap'
 import {mapOption} from '../config/mapOption'


 export default {
 name: "china",
 components: {},
 data() {
  return {
  chart: null, // 實(shí)例化echarts
  provincesMap: cityProvincesMap.provincesMap, // 省拼音，用于查找對應(yīng)json
  provincesCode: cityProvincesMap.provincesCode, // 市行政區(qū)劃，用于查找對應(yīng)json
  areaMap: cityProvincesMap.areaMap, // 省行政區(qū)劃，用于數(shù)據(jù)的查找，按行政區(qū)劃查數(shù)據(jù)
  special: ["北京市", "天津市", "上海市", "重慶市", "香港", "澳門"],//直轄市和特別行政區(qū)-只有二級地圖，沒有三級地圖
  mapData: [], // 當(dāng)前地圖上的地區(qū)
  option: {...mapOption.basicOption}, // map的相關(guān)配置
  deepTree: [],// 點(diǎn)擊地圖時(shí)push，點(diǎn)返回時(shí)pop
  areaName: '中國', // 當(dāng)前地名
  areaCode: '000000', // 當(dāng)前行政區(qū)劃
  areaLevel: 'country', // 當(dāng)前級別
  }
 },
 mounted() {
  this.$nextTick(() => {
  this.initEcharts();
  this.chart.on('click', this.echartsMapClick);
  });
 },
 methods: {
  // 初次加載繪制地圖
  initEcharts() {
  //地圖容器
  this.chart = this.$echarts.init(document.getElementById('map'));
  if (this.areaCode === '000000') {
   this.requestGetChinaJson();
  } else {
   this.requestGetProvinceJSON({areaName: this.areaName, areaCode: this.areaCode})
  }
  },
  // 地圖點(diǎn)擊
  echartsMapClick(params) {
  // console.log(params);
  this.areaName = params.areaName;
  if (params.name in this.provincesMap) {
   this.areaCode = params.data.areaCode;
   this.areaLevel = params.data.areaLevel;
   //如果點(diǎn)擊的是34個(gè)省、市、自治區(qū)，繪制選中地區(qū)的二級地圖
   this.requestGetProvinceJSON(params.data);
  } else if (params.seriesName in this.provincesMap) {
   //如果是【直轄市/特別行政區(qū)】只有二級下鉆
   if (this.special.indexOf(params.seriesName) >= 0) {
   return;
   } else {
   this.areaCode = this.areaMap[params.name];
   this.areaLevel = params.data.areaLevel;
   //顯示縣級地圖
   this.requestGetCityJSON(params.data)
   }
  } else {
   return;
  }
  this.$emit('map-change', params.data);
  },
  //繪制全國地圖
  requestGetChinaJson() {
  getChinaJson().then(res => {
   let arr = [];
   for (let i = 0; i < res.features.length; i++) {
   let obj = {
    name: res.features[i].properties.name,
    areaName: res.features[i].properties.name,
    areaCode: res.features[i].id,
    areaLevel: 'province',
    value: Math.round(Math.random()),
   };
   arr.push(obj)
   }
   this.mapData = arr;
   this.deepTree.push({
   mapData: arr,
   params: {name: 'china', areaName: 'china', areaLevel: 'country', areaCode: '000000'}
   });
   //注冊地圖
   this.$echarts.registerMap('china', res);
   //繪制地圖
   this.renderMap('china', arr);
  });
  },
  // 加載省級地圖
  requestGetProvinceJSON(params) {
  getProvinceJSON(params.areaCode).then(res => {
   this.$echarts.registerMap(params.areaName, res);
   let arr = [];
   for (let i = 0; i < res.features.length; i++) {
   let obj = {
    name: res.features[i].properties.name,
    areaName: res.features[i].properties.name,
    areaCode: res.features[i].id,
    areaLevel: 'city',
    value: Math.round(Math.random()),
   };
   arr.push(obj)
   }
   this.mapData = arr;
   this.deepTree.push({
   mapData: arr,
   params: params,
   });
   this.renderMap(params.areaName, arr);
  });
  },
  // 加載市級地圖
  requestGetCityJSON(params) {
  this.areaLevel = params.areaLevel;
  getCityJSON(params.areaCode).then(res => {
   this.$echarts.registerMap(params.areaName, res);
   let arr = [];
   for (let i = 0; i < res.features.length; i++) {
   let obj = {
    name: res.features[i].properties.name,
    areaName: res.features[i].properties.areaName,
    areaCode: res.features[i].id,
    areaLevel: 'districts',
    value: Math.round(Math.random()),
   };
   arr.push(obj)
   }
   this.mapData = arr;
   this.deepTree.push({mapData: arr, params: params});
   this.renderMap(params.areaName, arr);
  })
  },
  renderMap(map, data) {
  this.option.series = [
   {
   name: map,
   mapType: map,
   ...mapOption.seriesOption,
   data: data
   }
  ];
  //渲染地圖
  this.chart.setOption(this.option);
  },
  // 返回
  back() {
  // console.log(this.deepTree);
  if (this.deepTree.length > 1) {
   this.deepTree.pop();
   let areaName = this.deepTree[this.deepTree.length - 1].params.areaName;
   let mapData = this.deepTree[this.deepTree.length - 1].mapData;
   this.$emit('back-change', this.deepTree[this.deepTree.length - 1].params);
   this.renderMap(areaName, mapData);
  }
  }
 }
 }

</script>

<style lang="scss" scoped>
 #china_map_box {
 display: flex;
 width: 100%;
 height: 100%;
 position: relative;
 .echarts {
  width: 0;
  flex: 1;
  background-size: 100% 100%;
  #map {
  height: 100%;
  }
 }
 .back {
  position: absolute;
  top: .8rem;
  right: .5rem;
  z-index: 999;
  padding-left: .12rem;
  padding-right: .12rem;

 }
 }

</style>

當(dāng)前題目：在vue中使用echarts和datav實(shí)現(xiàn)一個(gè)地圖功能-創(chuàng)新互聯(lián)
標(biāo)題來源：http://muchs.cn/article38/dscipp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、微信公眾號、營銷型網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、網(wǎng)站營銷、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)