项目场景：
uni-app使用ucharts地图,自定义Tooltip鼠标悬浮显示内容并且根据@getIndex点击事件获取点击的地区下标和地区名
例如：
问题描述
官方给的文档有限，需要自己下载地图json数据然后自己渲染和编写鼠标悬浮显示内容以及获取点击地址名称，官方只给了@getIndex事件获取下标
官方地址：https://www.ucharts.cn/v2/#/guide/index
解决方案：
第一步引用：
既然用的uniapp，那么在插件市场直接下载导入ucharts组件
地址：https://ext.dcloud.net.cn/plugin?id=271
第二步使用：
c
<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 里引入
c
import mapdata from '@/mockdata/mapdata.json' //这是组件里给的地图数据
import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js' //在uniapp 插件库下载下来就是这个路径 可以自己改data数据里写入
c
//地图数据
chartsDataMap: {
series: []
},
// 覆盖的是 option
config: {
extra: {
map: {
mercator: true
}
}
},created里写入
c
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里写入
c
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
}
});
},
}这样就完成了地图里我需要的功能
自定义Tooltip鼠标悬浮显示内容并且根据@getIndex点击事件获取点击的地区下标和地区名