uni-app 封装echarts地图组件实现地图二级下钻

小咪咪 2023-01-11 01:25 143阅读 0赞

# uni-app 封装echarts地图组件 实现地图二级下钻 #

(中国地图)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTExMzUz_size_16_color_FFFFFF_t_70]  
（省级地图，点击返回 跳转到 中国地图）  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTExMzUz_size_16_color_FFFFFF_t_70 1][]  
以下是子组件代码：  
*已实现功能：实现地图下钻，跳到省级地图。  
提前准备好各省市的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 :splitList="splitList" :data="data"></echarts>
    		
    	</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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTExMzUz_size_16_color_FFFFFF_t_70]: /images/20221119/9595227556484b519961e0e6faa59ba0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTExMzUz_size_16_color_FFFFFF_t_70 1]: /images/20221119/94fad131a4af48f883577f66fdc1ac59.png