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

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

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

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

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

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

先看一下效果：

在vue中使用echarts和datav實現(xiàn)一個地圖功能

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

項目采用的是Vue+Echanrts+datav寫的，結構目錄如下：

在vue中使用echarts和datav實現(xiàn)一個地圖功能

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

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

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

在vue中使用echarts和datav實現(xiàn)一個地圖功能

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

在vue中使用echarts和datav實現(xiàn)一個地圖功能

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

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

其中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, // 實例化echarts
  provincesMap: cityProvincesMap.provincesMap, // 省拼音，用于查找對應json
  provincesCode: cityProvincesMap.provincesCode, // 市行政區(qū)劃，用于查找對應json
  areaMap: cityProvincesMap.areaMap, // 省行政區(qū)劃，用于數(shù)據(jù)的查找，按行政區(qū)劃查數(shù)據(jù)
  special: ["北京市", "天津市", "上海市", "重慶市", "香港", "澳門"],//直轄市和特別行政區(qū)-只有二級地圖，沒有三級地圖
  mapData: [], // 當前地圖上的地區(qū)
  option: {...mapOption.basicOption}, // map的相關配置
  deepTree: [],// 點擊地圖時push，點返回時pop
  areaName: '中國', // 當前地名
  areaCode: '000000', // 當前行政區(qū)劃
  areaLevel: 'country', // 當前級別
  }
 },
 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})
  }
  },
  // 地圖點擊
  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;
   //如果點擊的是34個省、市、自治區(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>

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

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

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

猜你還喜歡下面的內容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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