uni-app使用ucharts地图,自定义Tooltip鼠标悬浮显示内容并且根据@getIndex点击事件获取点击的地区下标和地区名

项目场景：

例如：
在这里插入图片描述

问题描述

官方给的文档有限，需要自己下载地图json数据然后自己渲染和编写鼠标悬浮显示内容以及获取点击地址名称，官方只给了@getIndex事件获取下标
官方地址：https://www.ucharts.cn/v2/#/guide/index
在这里插入图片描述

解决方案：

第一步引用：

既然用的uniapp，那么在插件市场直接下载导入ucharts组件
地址：https://ext.dcloud.net.cn/plugin?id=271

第二步使用：

<view class="charts-box" style="height: 520px;padding-top: 30px;">
	<qiun-data-charts type="map" tooltipFormat="tooltipFun" canvasId="mapma"
		:opts="{extra:{map:{mercator:true,fillOpacity:1,TextColor:'#000'}}}"
			:chartData="chartsDataMap" @getIndex="getIndex" />
</view>

tooltipFormat是悬浮提示显示内容
getIndex是点击事件

在script 里引入

import mapdata from '@/mockdata/mapdata.json'   //这是组件里给的地图数据
import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js' //在uniapp 插件库下载下来就是这个路径 可以自己改

data数据里写入

//地图数据
				chartsDataMap: {
					series: []
				},
				// 覆盖的是 option
				config: {
					extra: {
						map: {
							mercator: true
						}
					}
				},

created里写入

created() {
			uCharts.map = {
				"type": "map",
				"canvasId": "",
				"canvas2d": false,
				"background": "none",
				"animation": true,
				"timing": "easeOut",
				"duration": 1000,
				// "color": ['#ff4455'],
				"padding": [
					0,
					0,
					0,
					0
				],
				"fontSize": 8,
				"rotate": false,
				"errorReload": true,
				"fontSize": 8,
				"fontColor": "#666666",
				"enableScroll": false,
				"touchMoveLimit": 60,
				"enableMarkLine": false,
				"dataLabel": true,
				"dataPointShape": true,
				"dataPointShapeType": "solid",
				"tapLegend": true,
				"extra": {
					"map": {
						"border": true,
						"mercator": false,
						"borderWidth": 1,
						"borderColor": "#666666",
						"fillOpacity": 0.6,
						"activeBorderColor": "#55aa00",
						// "activeFillColor": "#FF0033", //设置 鼠标 悬停 地图展示的背景颜色
						"activeFillOpacity": 1
					},
					"tooltip": {
						"showBox": true,
						"showArrow": true,
						"showCategory": false,
						"borderWidth": 0,
						"borderRadius": 0,
						"borderColor": "#000000",
						"borderOpacity": 0.7,
						"bgColor": "#000000",
						"bgOpacity": 0.7,
						"gridType": "solid",
						"dashLength": 4,
						"gridColor": "#CCCCCC",
						"fontColor": "#FFFFFF",
						"splitLine": true,
						"horizentalLine": false,
						"xAxisLabel": false,
						"yAxisLabel": false,
						"labelBgColor": "#FFFFFF",
						"labelBgOpacity": 0.7,
						"labelFontColor": "#666666"
					}
				}
			}
			//模拟从服务器获取数据
			this.getServerDatas()
			//自定义格式化Tooltip显示内容   悬浮显示的内容   return `${item.name}地区：${item.data.amount}` 这里可以根据后端给的数据取自己需要的字段名称即可
			uCharts.formatter.tooltipFun = (item, category, index, opts) => {
				// console.log(item, index, "=item, category, index, opts=")
				return `${item.name}地区：${item.data.amount}`
			}

		},

methods里写入

methods: {
			//e.currentIndex是获取的下标名称   e.opts.series[e.currentIndex].data.regionProvince) 是根据下标定位到咱们数据里的下标里的对应地址名称即可，这样就可以直接获取到地址名称了
			getIndex(e) {
				console.log('1111', e.currentIndex,e.opts.series[e.currentIndex].data.regionProvince)
			},
			//地图
			getServerDatas() {
				uni.request({
					url: 'http://192.168.68.6:10896/api/ScreenStatistics/GetTotalDataByProvince', //仅为示例，并非真实接口地址。
					headers: {
						'Content-Type': 'application/json'
					},
					credentials: 'include', // 允许发送和接收 cookie
					success: (res) => {
						// console.log(res.data.data, '1111');
						let mapseries = mapdata.features.map((item) => {
							//根据接口数据查找到当前匹配的数据，我的数据是res.data.data，所以根据这个里面的地址字段名regionProvince 来匹配json数据里的地址名称对应，amount是我要悬浮时显示的数量，可以自己需要啥加啥，看自己需要
							let dataItem = res.data.data.find((x) => x.regionProvince == item
								.properties.name) || {
								amount: 0, //数量
								storeName: item.properties.name, //地区
							}
							//添加到 json data中
							item.data = dataItem
							//设置颜色
							return item
						})
						this.chartsDataMap.series = mapseries
					}
				});
			},
		}