這篇文章給大家介紹在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í)越來越多的客戶會要求我們做一個(gè)數(shù)據(jù)展示的大屏,可以直觀的展示用戶想要的數(shù)據(jù),同時(shí)炫酷的界面也會深受客戶的喜歡。
大屏展示其實(shí)就是一堆的圖表能夠讓人一目了然地看到該系統(tǒng)下的一些基本數(shù)據(jù)信息的匯總,也會有一些實(shí)時(shí)數(shù)據(jù)刷新,信息預(yù)警之類的。筆者在之前也做過一些大屏類的數(shù)據(jù)展示,但是由于都是一些圖表類的,覺得沒什么可說的,加之?dāng)?shù)據(jù)也都牽扯到公司,所以沒有沉淀下來什么。
最近有朋友要做一個(gè)大屏,問了自己一個(gè)問題,自己也剛好做了一個(gè)簡單的大屏數(shù)據(jù)展示,趁此機(jī)會做一個(gè)小總結(jié)。
先看一下效果:
由于數(shù)據(jù)牽扯到公司內(nèi)部信息,所以將一些復(fù)雜的切換邏輯都去掉類,但保留了一些數(shù)據(jù)間但相互聯(lián)動。
項(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)解釋,這里就不做多做說明了,在文章最后會提供該項(xiàng)目的源碼地址庫。
大屏主要的炫酷效果本人引用的是datav組件,地址:http://datav.jiaminghi.com/,這簡直就是數(shù)據(jù)可視化的一款神器,神奇之處我就不多說了,大家可以自己去它的網(wǎng)站上自行體會。它也提供了如何在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://bm7419.com/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)請盡快告知,我們將會在第一時(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)
猜你還喜歡下面的內(nèi)容