echars地圖

監控大屏的一個模塊

定義地圖位置大小

<div id="mapChart" class="mapChart"></div>#mapChart {width: 1000px;height: 600px;}data() {return {myChart: '',distributionOptions: '',seriesList: [],old_click: '' //判斷是否重復點擊用于返回地圖首頁}},props: {data: [Array, Object]},

安裝echars,配置地圖,
定義三組數據,用于echars地圖的展示省市區

var provinces = ['310000', '130000', '140000', '150000', '210000', '220000', '230000', '320000', '330000', '340000', '350000', '360000', '370000', '410000', '420000', '430000', '440000', '450000', '460000', '510000', '520000', '530000', '540000', '610000', '620000', '630000', '640000', '650000', '110000', '120000', '500000', '810000', '820000', '710000'] var provincesText = ['上海', '河北省', '山西省', '內蒙古自治區', '遼寧省', '吉林省', '黑龍江省', '江蘇省', '浙江省', '安徽省', '福建省', '江西省', '山東省', '河南省', '湖北省', '湖南省', '廣東省', '廣西省', '海南省', '四川省', '貴州省', '云南省', '西藏自治區', '陜西省', '甘肅省', '青海省', '寧夏回族自治區', '新疆維吾爾自治區', '北京市', '天津市', '重慶市', '香港', '澳門', '臺灣省'] var provincesName = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan']

這三組數據也可以后端配置,這三組數據拿的原文鏈接里的內容 , 配數組的時候位置要對應

mounted() {let that = thissetTimeout(() => {let data = that.data.equipmentInfoListfor (let i = 0; i < data.length; i++) {that.seriesList.push({'name': data[i].name,'value': [data[i].longitude, data[i].latitude],'address': data[i].addressname})}// 我這個是后端請求,下邊是 echars地圖json文件的獲取地址// http://datav.aliyun.com/tools/atlas/index.html#&lat=32.287132632616384&lng=101.1181640625&zoom=4//這個網站獲取數據 有三種處理 前端自己請求 下載到項目 后端請求// 后邊拼接的這個 +full 省市需要加 到了區縣 就不用加了 很坑 需要做兼容getamapData({ 'code': 省市區代號(山東 370000) + '_full' }).then(s => {if (s.code === 200) {//這個如果不是后端傳的 是自己配置的三個數組 直接寫 china 顯示全國地圖,顯示省區的地圖 傳你配置的三個數組中的值//我這個一是后端傳的 二是加賬戶權限的,所以傳的多,//第二個參數傳 獲取的json數據that.init(數據組(add_coding: "370000",fenBuAddresses: null,pinyin:"shandongsheng",userAddressName: "山東省), JSON.parse(s.data))} else {this.$message({showClose: true,message: '數據維護中...',type: 'warning'})}})}, 500)}, //methods//顯示各省地圖getProvinceMapOpt(provinceAlphabet, name,textname) {this.old_click = provinceAlphabetvar deviceList//根據所有地區設備數據進行篩選 選擇點擊地區的if(textname === 1){deviceList = this.seriesList}else{deviceList = this.changeSeriesList(textname)}getamapData({ 'code': provinceAlphabet + '_full' }).then(s => {if (s.code === 200) {echarts.registerMap(name, JSON.parse(s.data))this.changeOptions(name, deviceList)this.myChart.setOption(this.distributionOptions, true)} else {this.getProvinceMapOpt(100000, that.data.fenBuAddress.userAddressName)this.$message({showClose: true,message: '當前地區暫無權限',type: 'warning'})}})},// 瀏覽器窗口大小改變時，重新加載圖表以自適應resizeCharts: _debounce(function() {echarts.init(document.getElementById('mapChart')).resize()}, 500),// 初始化地圖數據init(data,JsonList) {echarts.registerMap(data.userAddressName, JsonList)this.changeOptions(data.userAddressName, this.seriesList)this.myChart = echarts.init(document.getElementById('mapChart'))this.myChart.setOption(this.distributionOptions)// 下面就是創建了一個點擊事件，目的是點擊省份子區域的時候可以切換到省份地圖this.myChart.on('click', chinaParam => {let idx = data.fenBuAddresses.findIndex((itm) => itm.userAddressName === chinaParam.name)if (idx === -1) {this.getProvinceMapOpt(data.add_coding, data.userAddressName,data.userAddressName)this.$message({showClose: true,message: '當前地區暫無權限',type: 'warning'})} else {let code = data.fenBuAddresses[idx].add_codingif (this.old_click === code) {this.getProvinceMapOpt(data.add_coding, data.userAddressName,1) // 返回全國地圖 由 1 判斷顯示所有設備地址數據} else {this.getProvinceMapOpt(code, data.fenBuAddresses[idx].pinyin,data.fenBuAddresses[idx].userAddressName)}}})window.onresize = function() {this.myChart.resizeCharts()}},//changeOptions(name, datalist) {// 經緯度數據const seriesList = [{data: datalist}]// 圖標const series = seriesList.map(v => {return {type: 'scatter', //配置顯示方式為用戶自定義coordinateSystem: 'geo',roam : false,//禁止拖拽data: v.data}})// optionsthis.distributionOptions = {tooltip: { // 提示框組件show: true, // 顯示提示框組件trigger: 'item', // 觸發類型triggerOn: 'mousemove', // 出發條件formatter: '名稱:<br/>坐標:{c}'},series, // 數據geo: {map: name || 'china', // 引入地圖 省份或者 國家layoutCenter: ['50%', '50%'], //設置后left/right/top/bottom等屬性無效layoutSize: '45%',roam: true, //開啟鼠標縮放和漫zoom: 2,label: {normal: {//靜態的時候展示樣式show: true, //是否顯示地圖省份得名稱textStyle: {color: '#fff',fontSize: 10,fontFamily: 'Arial'}},emphasis: { // 高亮狀態下的樣式//動態展示的樣式color: '#fff'}},itemStyle: { // 地圖區域的多邊形 圖形樣式。normal: {borderColor: '#07919e', // 邊框顏色areaColor: '#1c2f59', // 區域顏色textStyle: { // 文字顏色color: '#fff'},shadowBlur: 10, // 圖形陰影的模糊大小shadowOffsetX: 10 // 陰影水平方向上的偏移距離。},emphasis: {areaColor: '#1c2f59',color: '#fff'}}}}}

這里是原文鏈接 https://www.cnblogs.com/wjw1014/p/13529371.html

總結

以上是生活随笔為你收集整理的vue + echars地图 省市区 + 添加点标记的全部內容，希望文章能夠幫你解決所遇到的問題。

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