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}});},}