uni-app 封装echarts地图组件 实现地图二级下钻
(中国地图)
（省级地图，点击返回 跳转到 中国地图）
以下是子组件代码：
已实现功能：实现地图下钻，跳到省级地图。
提前准备好各省市的json文件，通过require的方式，动态加载地图。
renderjs 内部不能使用uni-app的api。
<template>
<view class="content" style="touch-action:none;">
<button type="default" style="width: 90upx;height: 60upx;font-size: 24upx;padding: 0;margin-left:20upx ;" @click="echarts.showChinaMaps">返回</button>
<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
</view>
</template>
<script>
export default {
data() {
return {
mapName: 'china',
option: {
backgroundColor: '#fff', // 地图背景颜色
grid: {
bottom: '0%',
left: '0%',
top: '80%'
},
tooltip: {
show: false
},
// 鼠标移到图里面的浮动提示框
// 以下是地图标题，我在此处设空，需要的可以自己加上
dataRange: {
x: 'left',
y: 'bottom',
splitList: this.splitList,
color: ['#B80909', '#E64546', '#FF9985', '#DEE0E2']
},
legend: {
textStyle: {
fontSize: 7
},
left: 'left',
},
selectedMode: 'single',
title: {
text: '',
subtext: '',
left: 'center'
},
series: [{
type: 'map',
top: '6%',
zoom: 1.2,
scaleLimit: {
min: 1.2,
max: 2.5
},
label: {
show: true,
textStyle: {
fontSize: 9
}
},
mapType: 'china',
// 显示地图 上面的 地区原点
showLegendSymbol: false,
roam: true,
itemStyle: {
normal: {
areaColor: '#B7DFED', // 地图颜色
borderColor: '#fff' // 地图边线颜色
},
emphasis: {
areaColor: '#B7DFED' // 鼠标移入颜色
}
},
data: this.data
}]
}
}
},
onLoad() {
console.log(this.splitList)
},
props: {
splitList: {
type: Array
},
data: {
type: Array
}
},
methods: {
changeOption() {
const data = this.option.series[0].data
// 随机更新示例数据
data.forEach((item, index) => {
data.splice(index, 1, Math.random() * 40)
})
},
onViewClick(options) {
console.log(options)
this.option.series[0].mapType = options.mapName
},
test() {
console.log(this.mapName)
}
}
}
</script>
<script module="echarts" lang="renderjs">
import china from '../../static/china.json';
let myChart
var provinces = ['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'
]
var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南',
'广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'
]
export default {
data() {
return {
mapName: 'china',
mapJson: china
}
},
mounted() {
if (typeof window.echarts === 'function') {
this.initEcharts()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
script.src = 'static/echarts.js'
script.onload = this.initEcharts
document.head.appendChild(script)
}
},
methods: {
/**
* 初始化地图
*/
initEcharts() {
myChart = echarts.init(document.getElementById('echarts'))
// 观测更新的数据在 view 层可以直接访问到
echarts.registerMap(this.mapName, this.mapJson);
const option = this.getMapOpt()
myChart.setOption(this.option)
myChart.on('click', (param) => {
console.log(param.name, 'click 点击事件返回param')
// 找到省份名
const provinceIndex = provincesText.findIndex(x => {
return param.name === x
})
// 在这里判断provincesText中是否包含点击的省份名，有则渲染省级地图，无则无处理（需要可从此获得）
if (provinceIndex === -1) return
const provinceAlphabet = provinces[provinceIndex]
this.mapName = provinceAlphabet
// 重新渲染各省份地图
const res = require('../../static/echarts/js/' + provinceAlphabet + '.json')
this.mapJson = res
myChart = echarts.init(document.getElementById('echarts'))
echarts.registerMap(this.mapName, this.mapJson)
myChart.setOption(this.option, true)
})
},
// updateEcharts(newValue, oldValue, ownerInstance, instance) {
// // 监听 service 层数据变更
// myChart.setOption(newValue)
// },
// onClick(event, ownerInstance) {
// // 调用 service 层的方法
// ownerInstance.callMethod('onViewClick', {
// test: 'test'
// })
// },
/**
* 此方法传参区分调用省份地图还是中国地图
* @param {Object} place
*/
getMapOpt(place) {
const option = {
backgroundColor: '#fff', // 地图背景颜色
grid: {
bottom: '0%',
left: '0%',
top: '80%'
},
tooltip: {
show: false
},
// 鼠标移到图里面的浮动提示框
// 以下是地图标题，我在此处设空，需要的可以自己加上
dataRange: {
x: 'left',
y: 'bottom',
splitList: this.splitList,
color: ['#B80909', '#E64546', '#FF9985', '#DEE0E2']
},
legend: {
textStyle: {
fontSize: 7
},
left: 'left',
},
selectedMode: 'single',
title: {
text: '',
subtext: '',
left: 'center'
},
series: [{
type: 'map',
top: '6%',
zoom: 1.2,
scaleLimit: {
min: 1.2,
max: 2.5
},
label: {
show: true,
textStyle: {
fontSize: 9
}
},
mapType: place || 'china',
// 显示地图 上面的 地区原点
showLegendSymbol: false,
roam: true,
itemStyle: {
normal: {
areaColor: '#B7DFED', // 地图颜色
borderColor: '#fff' // 地图边线颜色
},
emphasis: {
areaColor: '#B7DFED' // 鼠标移入颜色
}
},
data: [{
name: '天津',
value: 66,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '北京',
value: 166,
people: 198338,
fire: 299,
rick: 100,
lose: 28
},
{
name: '上海',
value: 777,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '重庆',
value: 7770,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '河北',
value: 777,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '河南',
value: 777,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '云南',
value: 777,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '辽宁',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '黑龙江',
value: 40000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '湖南',
value: 4000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '安徽',
value: 4000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '山东',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '新疆',
value: 40000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '江苏',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '浙江',
value: 4000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '江西',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '湖北',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '广西',
value: 40000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '甘肃',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '山西',
value: 888,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '内蒙古',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '陕西',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 50
},
{
name: '吉林',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '福建',
value: 40000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '贵州',
value: 40000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '广东',
value: 20000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '青海',
value: 200,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '西藏',
value: 20,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '四川',
value: 40,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '宁夏',
value: 40,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '海南',
value: 40,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '台湾',
value: 10,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '香港',
value: 10,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '澳门',
value: 10,
alarm: 19133,
alarmNum: 9990,
percentage: 5
}
]
}]
}
return option
},
/**
* 点击返回 更新为 中国地图参数
* @param {Object} event
* @param {Object} ownerInstance
*/
showChinaMaps(event, ownerInstance) {
// 调用 service 层的方法
ownerInstance.callMethod('onViewClick', {
mapName: 'china'
})
},
/**
* 显示中国地图
*/
showChinaMap() {
myChart = echarts.init(document.getElementById('echarts'))
// 观测更新的数据在 view 层可以直接访问到
echarts.registerMap('china', china);
const option = {
backgroundColor: '#fff', // 地图背景颜色
grid: {
bottom: '0%',
left: '0%',
top: '80%'
},
tooltip: {
show: false
},
// 鼠标移到图里面的浮动提示框
// 以下是地图标题，我在此处设空，需要的可以自己加上
dataRange: {
x: 'left',
y: 'bottom',
splitList: this.splitList,
color: ['#B80909', '#E64546', '#FF9985', '#DEE0E2']
},
legend: {
textStyle: {
fontSize: 7
},
left: 'left',
},
selectedMode: 'single',
title: {
text: '',
subtext: '',
left: 'center'
},
series: [{
type: 'map',
top: '6%',
zoom: 1.2,
scaleLimit: {
min: 1.2,
max: 2.5
},
label: {
show: true,
textStyle: {
fontSize: 9
}
},
mapType: 'china',
// 显示地图 上面的 地区原点
showLegendSymbol: false,
roam: true,
itemStyle: {
normal: {
areaColor: '#B7DFED', // 地图颜色
borderColor: '#fff' // 地图边线颜色
},
emphasis: {
areaColor: '#B7DFED' // 鼠标移入颜色
}
},
data: [{
name: '天津',
value: 66,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '北京',
value: 166,
people: 198338,
fire: 299,
rick: 100,
lose: 28
},
{
name: '上海',
value: 777,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '重庆',
value: 7770,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '河北',
value: 777,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '河南',
value: 777,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '云南',
value: 777,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '辽宁',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '黑龙江',
value: 40000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '湖南',
value: 4000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '安徽',
value: 4000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '山东',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '新疆',
value: 40000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '江苏',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '浙江',
value: 4000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '江西',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '湖北',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '广西',
value: 40000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '甘肃',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '山西',
value: 888,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '内蒙古',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '陕西',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 50
},
{
name: '吉林',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '福建',
value: 40000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '贵州',
value: 40000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '广东',
value: 20000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '青海',
value: 200,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '西藏',
value: 20,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '四川',
value: 40,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '宁夏',
value: 40,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '海南',
value: 40,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '台湾',
value: 10,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '香港',
value: 10,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '澳门',
value: 10,
alarm: 19133,
alarmNum: 9990,
percentage: 5
}
]
}]
}
myChart.setOption(option)
},
/**
* 显示各省地图，这里使用axios请求本地文件，provice文件夹存在的位置为public/province（旧版本是static）
* @param {Object} provinceAlphabet
*/
getProvinceMapOpt(provinceAlphabet) {
const res = require('../../static/echarts/js/' + provinceAlphabet + '.json')
myChart = echarts.init(document.getElementById('left_map'))
echarts.registerMap(provinceAlphabet, res)
const option = this.getMapOpt(provinceAlphabet)
myChart.setOption(option, true)
},
/**
* 监听 service 层数据变更,更新地图
* @param {Object} newValue
* @param {Object} oldValue
* @param {Object} ownerInstance
* @param {Object} instance
*/
updateEcharts(newValue, oldValue, ownerInstance, instance) {
console.log("newValue", newValue)
// 监听 service 层数据变更
myChart.setOption(newValue)
},
/**
* 调用 service 层的方法
* @param {Object} event
* @param {Object} ownerInstance
*/
onClick(event, ownerInstance) {
// 调用 service 层的方法
ownerInstance.callMethod('onViewClick', {
mapName: this.mapName
})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.echarts {
/* margin-top: 50px; */
width: 100%;
height: 300px;
}
</style>
在父组件引入，并给子组件传入需要的参数即可。
<template>
<view class="" style="touch-action:none;">
<!-- 引入echarts地图组件 start -->
<echarts :splitList="splitList" :data="data"></echarts>
<!-- 引入echarts地图组件 end -->
</view>
</template>
<script>
import echarts from '@/pages/index/parent'
export default {
data() {
return {
splitList: [{
start: 13000,
color: '#B80909',
label: '111'
},
{
start: 12000,
end: 13000,
color: '#E64546',
label: '222'
},
{
start: 100,
end: 12000,
color: '#FF9985',
label: '333'
},
{
start: 0,
end: 100,
color: '#DEE0E2',
label: '444'
}
],
data: [{
name: '天津',
value: 66,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '北京',
value: 166,
people: 198338,
fire: 299,
rick: 100,
lose: 28
},
{
name: '上海',
value: 777,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '重庆',
value: 7770,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '河北',
value: 777,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '河南',
value: 777,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '云南',
value: 777,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '辽宁',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '黑龙江',
value: 40000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '湖南',
value: 4000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '安徽',
value: 4000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '山东',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '新疆',
value: 40000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '江苏',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '浙江',
value: 4000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '江西',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '湖北',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '广西',
value: 40000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '甘肃',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '山西',
value: 888,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '内蒙古',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '陕西',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 50
},
{
name: '吉林',
value: 400,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '福建',
value: 40000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '贵州',
value: 40000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '广东',
value: 20000,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '青海',
value: 200,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '西藏',
value: 20,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '四川',
value: 40,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '宁夏',
value: 40,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '海南',
value: 40,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '台湾',
value: 10,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '香港',
value: 10,
alarm: 19133,
alarmNum: 9990,
percentage: 5
},
{
name: '澳门',
value: 10,
alarm: 19133,
alarmNum: 9990,
percentage: 5
}
]
}
},
components: {
echarts
},
methods: {
onViewClickData(val) {
console.log(val)
}
}
}
</script>
<style>
</style>