标签：echars vue name true 地图 userAddressName code 省市区 data
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 = this
setTimeout(() => {
let data = that.data.equipmentInfoList
for (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 = provinceAlphabet
var 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_coding
if (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
}
})
// options
this.distributionOptions = {
tooltip: { // 提示框组件
show: true, // 显示提示框组件
trigger: 'item', // 触发类型
triggerOn: 'mousemove', // 出发条件
formatter: '名称:{b}<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
标签：echars,vue,name,true,地图,userAddressName,code,省市区,data 来源： https://blog.csdn.net/weixin_42367288/article/details/120697687
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。