項目場景：

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: []},// 覆蓋的是 optionconfig: {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', // 允許發送和接收 cookiesuccess: (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}});},}

這樣就完成了地圖里我需要的功能
自定義Tooltip鼠標懸浮顯示內容并且根據@getIndex點擊事件獲取點擊的地區下標和地區名