vue+echarts 地图携带参数下钻【demo一】
相关必要文件已上传个人GIT代码库，自行下载https://gitee.com/lemon-design/EchartsMap.git个人鼓捣了快一周了明日续更
·
相关必要文件已上传个人GIT代码库，自行下载
https://gitee.com/lemon-design/EchartsMap.git
个人鼓捣了快一周了
本文地图下钻部分通过watch监控返回数据,进而进行地图渲染
附上代码
<template>
<div class="backgroundImg">
<div class="line"></div>
<el-row>
<el-col :span="24" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
<div id="map"
style="width: 96.5%;height:730px;margin-left: 20px;margin-right: 10px;margin-bottom: 20px"></div>
</el-col>
</el-row>
</div>
</template>
<script>
var echarts = require('echarts')
export default {
name: 'industry-distribution',
data: function() {
return {
industryCode: '',
industryCodeOptions: [],
coData: [],
dataProvince: [],
dataCity: [],
mapLoading: true,
multipleSelection: [],
mapOfIndustry: {
backgroundColor: '#040C3D',
title: {
text: '',
subtext: '',
top: '30',
left: 'center',
textStyle: {
color: '#fff'
},
subtextStyle: {
color: '#ccc',
fontSize: 13,
fontWeight: 'normal',
fontFamily: 'Microsoft YaHei'
}
},
tooltip: {
trigger: 'item',
formatter: '{b}',
formatter: function(params) {
return params.name + '</br>'
+ '区域公司总数: ' + params.value
}
},
//左侧小导航图标
visualMap: {
show: true,
x: 'right',
y: 'bottom',
splitList: [
{
start: 500
}, {
start: 400,
end: 500
},
{
start: 300,
end: 400
},
{
start: 200,
end: 300
},
{
start: 100,
end: 200
},
{
start: 0,
end: 100
}
],
textStyle: {
color: '#ffffff'
},
color: ['#5b2546', '#7d4269', '#564bab', '#335bae']
},
/* dataRange: {
show: true,
min: 0,
max: 200000,
x: 'left',
y: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
color: ['#0000FF', '#00BFFF', '#87CEEB']
},*/
series: [{
name: '',
type: 'map',
mapType: 'china',
itemStyle: {
normal: {
label: {
show: false
}
},
emphasis: {
label: {
show: true
}
}
},
data: [
{ name: '辽宁', value: 1555 },
{ name: '黑龙江', value: 1555 },
{ name: '吉林', value: 1555 }
]
}],
animationDuration: 1000,
animationEasing: 'cubicOut',
animationDurationUpdate: 1000
},
provinceId: '',
provinceName: '',
cityId: '',
areaId: '',
provinceIdTemp: '',
cityIdTemp: '',
areaIdTemp: '',
mapFlag1: '',
mapFlag2: '',
mapFlag3: '',
mapData1: [],
mapData2: [],
mapData3: []
}
},
mounted() {
this.industrySelect()
},
beforeMount() {
},
watch: {
mapFlag1: function(newmapFlag1, oldmapFlag1) {
this.mapFlag1 = newmapFlag1
},
mapFlag2: function(newmapFlag2, oldmapFlag2) {
this.mapFlag2 = newmapFlag2
},
mapFlag3: function(newmapFlag3, oldmapFlag3) {
this.mapFlag3 = newmapFlag3
},
coData: function(newcoData, oldcoData) {
var d = []
for (var i in newcoData) {
d.push({
name: newcoData[i].name,
value: newcoData[i].value
})
}
this.renderMap(this.mapFlag1, 0, 0, d)
this.showTableData()
this.loading = false
this.provinceIdTemp = this.provinceId
this.cityIdTemp = this.cityId
this.areaIdTemp = this.areaId
},
dataProvince: function(newValue, oldValue) {
var d = []
for (var i in newValue) {
d.push({
name: newValue[i].name,
value: newValue[i].value
})
}
this.renderMap(this.mapFlag2, 0, 0, d)
this.showTableData()
this.loading = false
this.provinceIdTemp = this.provinceId
this.cityIdTemp = this.cityId
this.areaIdTemp = this.areaId
},
dataCity: function(newdataCity, olddataCity) {
var d = []
for (var i in newdataCity) {
d.push({
name: newdataCity[i].name,
value: newdataCity[i].value
})
}
this.renderMap(this.mapFlag3, 0, 0, d)
this.showTableData()
this.loading = false
this.provinceIdTemp = this.provinceId
this.cityIdTemp = this.cityId
this.areaIdTemp = this.areaId
this.provinceId = ''
this.cityId = ''
this.areaId = ''
}
},
methods: {
/**
*查询行业code
*/
industrySelect() {
selectAllIndustry().then(response => {
var optionIndustry = []
for (let i = 0; i < response.data.data.length; i++) {
optionIndustry.push({
value: response.data.data[i].id,
label: response.data.data[i].industryName
})
}
this.industryCodeOptions = optionIndustry
this.industryCode = 1
this.HIndustryDistributionNum(0, 0)
this.mapCH()
// this.showTableData()
})
},
/**
* 通过行业ID、省编号、市编号、区编号查询区域公司总数
*/
HIndustryDistributionNum(tmp, val) {
var industry = this.industryCode
if (tmp === 1) {
this.provinceId = val
} else if (tmp === 2) {
this.cityId = val
} else if (tmp === 0) {
}
var params = {
industryId: industry,
provinceId: this.provinceId,
cityId: this.cityId,
areaId: this.areaId
}
HIndustryDistributionNum(params).then(res => {
// this.coData = res.data.data.coData
if (this.provinceId === '' && this.cityId === '') {
this.coData = res.data.data.coData
} else if (this.provinceId !== '' && this.cityId === '') {
this.dataProvince = res.data.data.coData
// this.renderMap(provinces[provinceId], this.dataProvince)
} else if (this.provinceId !== '' && this.cityId !== '') {
this.dataCity = res.data.data.coData
}
})
},
/**
* 地图下钻
*/
mapCH() {
let that = this
var mapChart = echarts.init(document.getElementById('map'), 'dark')
var geoCoordMap = { '江西公司': [117.121225, 36.66466], '大连公司': [121.03, 38.7] }
var dataX = [{ name: '江西公司', value: 190 }, { name: '大连公司', value: 158 }]
//直辖市和特别行政区-只有二级地图，没有三级地图
var special = ['北京', '天津', '上海', '重庆', '香港', '澳门']
var mapdata = []
var mappointdata = []
//绘制全国地图
that.axios.get('static/map/china.json').then(res => {
var data = res.data
var d = []
for (var i = 0; i < data.features.length; i++) {
d.push({
name: data.features[i].properties.name
})
}
var point = []
this.mapData1 = data
for (var i = 0; i < dataX.length; i++) {
var geoCoord = geoCoordMap[dataX[i].name]
if (geoCoord) {
point.push({
name: dataX[i].name,
value: geoCoord
})
}
}
mappointdata = point
mapdata = d
that.mapFlag1 = '中国'
// 查全国数据
// that.HIndustryDistributionNum(0, 4)
//注册地图
echarts.registerMap('中国', data)
//绘制地图
that.renderMap('中国', d, mappointdata, this.coData)
}).catch(err => {
console.log('全国地图加载错误：------------------------')
console.log(err)
})
//地图点击事件
mapChart.on('click', function(params) {
if (params.name in provinces) {
//如果点击的是34个省、市、自治区，绘制选中地区的二级地图
that.axios.get('static/map/provinces/' + provinces[params.name] + '.json').then(res => {
var data = res.data
var d = []
for (var i = 0; i < data.features.length; i++) {
d.push({
name: data.features[i].properties.name
})
}
this.mapData1 = data
that.mapFlag2 = params.name
this.provinceId = provinces[params.name]
that.HIndustryDistributionNum(1, this.provinceId)
//注册地图
echarts.registerMap(params.name, data)
//绘制地图
// that.renderMap(params.name, d, mappointdata, b)
}).catch(err => {
console.log('省下钻错误：------------------------')
console.log('map', err)
})
}
else if (params.seriesName in provinces) {
//如果是【直辖市/特别行政区】只有二级下钻
if (special.indexOf(params.seriesName) >= 0) {
that.axios.get('static/map/china.json').then(res => {
that.provinceId = ''
var data = res.data
var d = []
for (var i = 0; i < data.features.length; i++) {
d.push({
name: data.features[i].properties.name
})
}
var point = []
for (var i = 0; i < dataX.length; i++) {
var geoCoord = geoCoordMap[dataX[i].name]
if (geoCoord) {
point.push({
name: dataX[i].name,
value: geoCoord
})
}
}
mappointdata = point
that.HIndustryDistributionNum(0, 4)
//注册地图
echarts.registerMap('中国', data)
//绘制地图
that.renderMap('中国', d, mappointdata, this.coData)
}).catch(err => {
console.log('市返回全国错误：------------------------')
console.log(err)
})
}
else {
//显示县级地图
that.axios.get('static/map/city/' + cityMap[params.name] + '.json').then(res => {
var data = res.data
var d = []
for (var i = 0; i < data.features.length; i++) {
d.push({
name: data.features[i].properties.name,
value: data.features[i].properties.value
})
}
this.mapData2 = data
this.cityId = cityMap[params.name]
that.mapFlag3 = params.name
that.HIndustryDistributionNum(2, this.cityId)
//注册地图
echarts.registerMap(params.name, data)
//绘制地图
// that.renderMap(params.name, d, mappointdata, c)
}).catch(err => {
console.log('市下钻错误：------------------------')
console.log('map', err)
})
}
}
else {
// renderMap('中国', mapdata)
//绘制全国地图
that.axios.get('static/map/china.json').then(res => {
var data = res.data
var d = []
for (var i = 0; i < data.features.length; i++) {
d.push({
name: data.features[i].properties.name
})
}
var point = []
for (var i = 0; i < dataX.length; i++) {
var geoCoord = geoCoordMap[dataX[i].name]
if (geoCoord) {
point.push({
name: dataX[i].name,
value: geoCoord
})
}
}
mappointdata = point
mapdata = d
that.HIndustryDistributionNum(0, 4)
//注册地图
echarts.registerMap('中国', data)
//绘制地图
that.renderMap('中国', d, mappointdata, this.coData)
}).catch(err => {
console.log('市返回全国错误：------------------------')
console.log(err)
})
}
})
},
/**
* 地图dom渲染
* @param map
* @param data
* @param mappointdata
*/
renderMap(map, data, dataPoint, dataColor) {
var geoCoordMap = {
'江西公司': [117.121225, 36.66466],
'大连公司': [121.03, 38.7]
}
var dataX = [
{ name: '江西公司', value: 190 },
{ name: '大连公司', value: 158 }
]
var convertData = function(dataX) {
var res = []
for (var i = 0; i < dataX.length; i++) {
var geoCoord = geoCoordMap[dataX[i].name]
if (geoCoord) {
res.push({
name: dataX[i].name,
value: geoCoord
})
}
}
return res
}
let mapOfIndustryecharts = this.$echarts.init(document.getElementById('map'))
this.mapOfIndustry.title.subtext = map
this.mapOfIndustry.animationDuration = 1000,
this.mapOfIndustry.animationEasing = 'cubicOut'
this.mapOfIndustry.animationDurationUpdate = 1000
this.mapOfIndustry.geo = {
name: '强',
type: 'scatter',
map: map,
zoom: 1.25,
layoutCenter: ['50%', '50%'],//距左百分比，距上百分比
layoutSize: 600,//省份地图大小为600xp。
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
}
this.mapOfIndustry.series = [
/*{
name: map,
type: 'scatter',
coordinateSystem: 'geo',
aspectScale: 0.75, //长宽比
data: convertData(dataX),
layoutCenter: ['40%', '40%'],
// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
layoutSize: 80,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false,
textStyle: {
color: '#ffffff'
}
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: 'red'
}
}
},*/
{
name: map,
type: 'map',
mapType: map,
geoIndex: 1,
aspectScale: 0.75, //长宽比
zoom: 1.25,
layoutCenter: ['50%', '50%'],//距左百分比，距上百分比
layoutSize: 600,//省份地图大小为600xp。
// coordinateSystem: 'geo',
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
textStyle: {
color: '#ffffff'
}
},
emphasis: {
show: true
}
},
// roam: true,
itemStyle: {
normal: {
color: '#F4E925',
areaColor: '#323c48',
borderColor: 'dodgerblue'
}
},
data: dataColor
}
/* {
name: map,
type: 'map',
mapType: map,
coordinateSystem: 'geo',
data: mappointdata,
symbolSize: function(val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#F4E925',
areaColor: '#323c48',
borderColor: 'dodgerblue'
}
}
},*/
]
if (map == '黑龙江') {
this.mapOfIndustry.geo.zoom = 0.75
this.mapOfIndustry.series[0].zoom = 0.75
} else if (map == '甘肃') {
this.mapOfIndustry.geo.zoom = 0.5
this.mapOfIndustry.series[0].zoom = 0.5
} else if (map == '中国') {
this.mapOfIndustry.geo.zoom = 1.25
this.mapOfIndustry.series[0].zoom = 1.25
} else {
this.mapOfIndustry.geo.zoom = 1
this.mapOfIndustry.series[0].zoom = 1
}
//渲染地图
mapOfIndustryecharts.setOption(this.mapOfIndustry)
}
}
}
</script>
<style scoped>
.backgroundImg {
background-color: #010C31;
border-radius: 13px 13px 13px 13px;
color: white;
border: 1px;
border-color: #102864;
height: 800px;
}
</style>
能力不足水平有限
有问题别说脏话
来学习交流就好
有问必答
email:1848199654@qq.com
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献4条内容
所有评论(0)