自定义tooltip解决图表数据重叠无法准确点击事件问题效果图问题图表数据重叠导致无法准确点击事件解决方式发现小程序里 ECharts 的 canvas tooltip 无法对单行做点击所以改为自定义 tooltip 浮层交互如下点击图表某一列区域不必点中数字→ 弹出 tooltip点击 tooltip 中的「内容」行 → 实现跳转页面等逻辑点击图表空白处 → 关闭 tooltip解决方式修改文件index.js关闭 ECharts 内置 tooltip去掉折线数字上的triggerEvent不再通过数字点击跳转监听图表区域点击按坐标换算dataIndex并显示自定义 tooltip行点击后触发lineclick事件index.wxml、index.wxss新增可点击的 tooltip 浮层带与图例一致的颜色标记可根据图例颜色给tooltip-marker修改颜色这里示例就没有进一步处理了viewclassechartsBoxblockwx:if{{ chartData chartData.length }}ec-canvasid{{ chartId }}canvas-id{{ canvasId }}ec{{ ec }}/ec-canvasviewwx:if{{ tooltipPanel.visible }}classchart-tooltip-panelstyleleft:{{tooltipPanel.left}}px;top:{{tooltipPanel.top}}px;catchtapnoopviewclasstooltip-title{{ tooltipPanel.name }}/viewviewclasstooltip-row tooltip-row-actioncatchtaponTooltipRowTapdata-type4viewclasstooltip-labelviewclasstooltip-marker tooltip-marker-bar/viewtext{{ tooltipPanel.largeLabel }}/text/viewtextclasstooltip-value{{ tooltipPanel.largeValue }}/text/view/view/blockviewwx:elseclassempty-tip暂无数据/view/view/** 自定义 tooltip 预估尺寸px用于边界约束 */constTOOLTIP_PANEL_WIDTH168;constTOOLTIP_PANEL_HEIGHT128;/** * 图表点击事件 */bindChartClick(chart){if(!chart)return;constzrchart.getZr();zr.off(click);zr.on(click,(event){if(!componentRef)return;constpointInPixel[event.offsetX,event.offsetY];if(!chart.containPixel(grid,pointInPixel)){componentRef.hideTooltipPanel();return;}constdataIndexcomponentRef.resolveDataIndex(chart,pointInPixel);if(dataIndex!null){componentRef.showTooltipPanel(dataIndex,pointInPixel);}});},/** * 显示 panel * 监听图表区域点击按坐标换算 */showTooltipPanel(dataIndex,pointInPixel){constdataListthis.data.dataList;constitemdataList[dataIndex];if(!item)return;constlegendDatathis.properties.chartLegend||[];this.createSelectorQuery().select(.echartsBox).boundingClientRect((rect){letleftpointInPixel[0]10;lettoppointInPixel[1]-TOOLTIP_PANEL_HEIGHT-10;if(rect){if(leftTOOLTIP_PANEL_WIDTHrect.width){leftrect.width-TOOLTIP_PANEL_WIDTH-8;}if(left8)left8;if(top8)toppointInPixel[1]12;if(topTOOLTIP_PANEL_HEIGHTrect.height){toprect.height-TOOLTIP_PANEL_HEIGHT-8;}}this.setData({tooltipPanel:{visible:true,left,top,dataIndex,name:item.name,// TEST 可根据需求遍历legendData赋值label:legendData[0],value:item.value,},});}).exec();},/** * 隐藏 panel */hideTooltipPanel(){if(!this.data.tooltipPanel.visible)return;this.setData({tooltipPanel.visible:false,});},/** * 点击 tool 行跳转事件 */onTooltipRowTap(e){consttypeNumber(e.currentTarget.dataset.ype);const{dataIndex,visible}this.data.tooltipPanel;if(!visible||dataIndexnull)return;constdataListthis.getSortedChartData();constitemdataList[dataIndex];if(!item)return;this.triggerEvent(lineclick,{item,dataIndex,type,});this.hideTooltipPanel();},.echartsBox{position:relative;width:100%;flex:1;min-height:0;height:100%;padding-top:20rpx;background:#fff;overflow:hidden;box-sizing:border-box;}.chart-tooltip-panel{position:absolute;z-index:10;min-width:280rpx;max-width:420rpx;padding:16rpx 20rpx;background:rgba(255,255,255,0.98);border:1px solid #e8e8e8;border-radius:8rpx;box-shadow:0 4rpx 16rpxrgba(0,0,0,0.08);box-sizing:border-box;pointer-events:auto;}.tooltip-title{margin-bottom:8rpx;font-size:22rpx;font-weight:500;color:#1e1e1e;}.tooltip-row{display:flex;align-items:center;justify-content:space-between;gap:20rpx;padding:6rpx 0;font-size:20rpx;color:#333;line-height:1.4;}.tooltip-row-action{margin:0 -12rpx;padding:10rpx 12rpx;border-radius:6rpx;}.tooltip-row-action:active{background:#f5f7fa;}.tooltip-label{display:flex;align-items:center;flex:1;min-width:0;}.tooltip-marker{flex-shrink:0;width:16rpx;height:16rpx;margin-right:10rpx;}.tooltip-marker-bar{border-radius:2rpx;background:#96e6a1;}.tooltip-value{flex-shrink:0;color:#1e1e1e;}