echarts图表tooltip内部实现事件传参效果

最新推荐文章于 2024-08-15 14:01:38 发布

置顶 ℡仅此、而已

最新推荐文章于 2024-08-15 14:01:38 发布

阅读量1.2k

点赞数 1

分类专栏：前端小强踩坑之路文章标签： echarts javascript

本文链接：https://blog.csdn.net/Hzq88888/article/details/120845556

版权

前端小强踩坑之路专栏收录该内容

60 篇文章 4 订阅

订阅专栏

图片效果：tooltip内容可点击并且可实现动态传参，常见场景为散点图x与y轴值相同导致点重叠引发的问题：

newInnerText方法在全局没有，所以一定需要将newInnerText方法注入全局才行，（重要）
constructor(props) {
   super(props);
   window.newInnerText = this.newInnerText.bind(this)  //非常重要，该代码代表此方法已注入
   this.state = {
            
   }
}



newInnerText = (item) => {
    console.log(item)
}



tooltip: {
                show: true,
                trigger: 'axis',
                textStyle: {
                    color: 'rgba(0,0,0,0.65)',
                    fontSize: 12,
                    fontWeight: 'normal'
                },
                extraCssText: 'max-height:150px;min-width:150px;overflow-y:auto',
                enterable: true,  //鼠标可移入
                // position: function (point, params, dom, rect, size) {
                //     return [point[0], point[1]]
                // },
                triggerOn: 'click',
                // axisPointer: {
                //     type: 'cross',
                //     snap: true,
                //     axis: 'x', // y轴选项
                //     label: {
                //         // show: false,
                //         color: '#fff',
                //         backgroundColor: 'rgba(0, 0, 0, .55)'
                //     }
                // },
                formatter: function (param) {
                    if (!currentData) return;
                    var newText = ''
                    for (var i = 0; i < param.length; i++) {
                        if (param[i].data[0] != undefined && param[i].data[1] != undefined) {
                            if (currentData[0] === param[i].data[0] && currentData[1] === param[i].data[1]) {
                                newText += `<div style="cursor: pointer;" onclick="newInnerText('${param[i].data[3]}')">${param[i].marker} ${param[i].data[3]}<br/> 均次费用比： ${param[i].data[1]} <br/> 均次住院日比： ${param[i].data[0]}</div>`;
                            }
                        }
                    }
                    return newText
                }
            },

//以下为获取图表代码：

    var caseSurplusPic = echarts.init(document.getElementById('caseSurplusPic'));
        caseSurplusPic.off('click')  //清除点击事件，防止点击一下触发两次点击事件
        caseSurplusPic.clear()  //清除图表缓存
        caseSurplusPic.setOption(option);  //生成图表
        window.addEventListener("resize", function () {
            caseSurplusPic.resize(); //监听浏览器窗口图表自适应刷新
        });