echarts让X轴标签和x轴的pointer都显示tooltip

最新推荐文章于 2024-08-01 23:45:55 发布

晓_晨

最新推荐文章于 2024-08-01 23:45:55 发布

阅读量1.5w

点赞数 2

分类专栏：前端文章标签： echartrs tooltip x轴标签同时显示同时显示toolti echartsaip

本文链接：https://blog.csdn.net/niunai112/article/details/78941058

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

项目上现在有一个需求是要求鼠标移到X轴标签上显示这个标签的总数，移到pointer上显示各个快的数量，
但是官方的tooltip.trigger只有，item，axis和none。其效果并不能达到我项目的要求。

所以我只好查看api文档，首先要打开X轴标签的触发开关，X轴标签的触发开关默认是关闭的。

xAxis.triggerEvent boolean
[ default: false ]
坐标轴的标签是否响应和触发鼠标事件，默认不响应。
事件参数如下：
{
    // 组件类型，xAxis, yAxis, radiusAxis, angleAxis
    // 对应组件类型都会有一个属性表示组件的 index，例如 xAxis 就是 xAxisIndex
    componentType: string,
    // 未格式化过的刻度值, 点击刻度标签有效
    value: '',
    // 坐标轴名称, 点击坐标轴名称有效
    name: ''
}

在xAxis，把triggerEvent的值置为true。这样X轴标签的触发就打开了。
接下来给它加事件，echarts的鼠标事件有很多，如’click’、’dblclick’、’mousedown’、’mousemove’、’mouseup’、’mouseover’、’mouseout’，
我用到的是mousemove，

myChart.on('mousemove', function (params) {
   函数内容
});

params包含下面信息
{
    // 当前点击的图形元素所属的组件名称，
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
    seriesType: string,
    // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
    seriesIndex: number,
    // 系列名称。当 componentType 为 'series' 时有意义。
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
    // dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
    // 其他大部分图表中只有一种 data，dataType 无意义。
    dataType: string,
    // 传入的数据值
    value: number|Array
    // 数据图形的颜色。当 componentType 为 'series' 时有意义。
    color: string
}

为了区分是X轴标签的触发还是，pointer的触发，我们需要对params里面的值进行判断，

myChart.on('mousemove', function (params) {
        if(params.componentType =='xAxis')
        {
            if(params.value=="Class0"){
                isXLabel=true;
                var offsetX =params.event.offsetX+10;
                var offsetY =params.event.offsetY+10;
                if(params.value="Class1"){
                    myChart.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex: 0,
                        position:[offsetX,offsetY]
                    });

                }

                console.info(params);

            }

        }

    });
     myChart.on('mouseover', function (params) {
       isXLabel=false;

    });

isXLabel是为了让tiptool来选择要用哪个formatter

 tooltip: {
            hideDelay:2000,
            formatter: function (a) {
                if(isXLabel){
                    console.info(a);
                    return  "total: "+(parseFloat(data1[a.seriesIndex])+parseFloat(data2[a.seriesIndex])+parseFloat(data3[a.seriesIndex])+parseFloat(data4[a.seriesIndex]));
                }else {
                    return  a.componentSubType+":<br>"+a.name+": "+a.value;
                }

            }

        },