echarts 开启 toolbox 的 dataZoom 区域缩放后,悬浮在图形元素上的鼠标样式可以修改为 pointer 吗

dwthyt8l  于 2022-11-03  发布在  Echarts
关注(0)|答案(3)|浏览(383)
  • I am using English in this issue. 在这个 Issue 中我使用了英文(强烈建议)。

General Questions

  • Required: I have read the document and examples and tried to solve it by myself. (必填)我读过了文档和教程,并且曾试图自己解决问题。
  • Required: I have searched for similar issues and that didn't help. (必填)我搜索过 issue 但是没有帮助。
  • Required: I have tried with the latest version of ECharts and still have this problem. (必填)我试过最新版本的 ECharts,还是存在这个问题。

In this issue, I have provided information with: 在这个 issue 中我提供了以下信息:

  • Required: issue type;(必填)issue 类型
  • Required: one sentence description in issue details;(必填)一句话的问题描述
  • Required: demo;(必填)能反映问题的例子(如果你想提问或报 bug)
  • Required: ECharts version;ECharts 版本

Issue Type

  • I have a question to ask about how to use ECharts to ...;我想提问如何使用 ECharts 实现某功能
  • I have a bug to report;我想要报 bug
  • I have a feature to request, e.g.: I'd like a new feature that ...;我需要一个新功能
  • I have a feature to enhance, e.g.: The current feature should be improved in the way that ...;我希望改进某个功能
  • There's something wrong with the documents;文档有些问题
  • Others, or I'm not sure which issue types to choose here;其他,或我不知道应该选什么类型

Issue Details

我在使用了 toolbox 中的 dataZoom 区域缩放功能后,想要鼠标悬浮在图形元素上的 cursor 样式为默认的 pointer ,而不是 crosshair 。也尝试使用 chart.getZr().setCursorStyle('pointer') 来修改鼠标悬浮样式,但开启工具箱 dataZoom 功能后,源码中是让整个图表为 crosshair 效果,并不能达到我想要的效果,请问这个问题可以优化吗,或者我该如何解决呢?

Expected Behavior

Current Behavior

Online Example

源码中重置 cursor 函数:

function resetCursor(controller, e, localCursorPoint) {
    // Check active
    if (!controller._brushType) {
        return;
    }

    var zr = controller._zr;
    var covers = controller._covers;
    var currPanel = getPanelByPoint(controller, e, localCursorPoint);

    // Check whether in covers.
    if (!controller._dragging) {
        for (var i = 0; i < covers.length; i++) {
            var brushOption = covers[i].__brushOption;
            if (currPanel
                && (currPanel === true || brushOption.panelId === currPanel.panelId)
                && coverRenderers[brushOption.brushType].contain(
                    covers[i], localCursorPoint[0], localCursorPoint[1]
                )
            ) {
                // Use cursor style set on cover.
                return;
            }
        }
    }

    currPanel && zr.setCursorStyle('crosshair');
}

Topics

  • Legend
  • Tooltip
  • Event
  • Performance
  • SVG
  • Map
  • ECharts GL
  • Third-party libraries, e.g.: Vue.js, React
  • dataZoom

Anything Else We Need to Know

Environment

  • ECharts version;ECharts 版本: 4.2.0-rc.2
  • It happens only on certain browsers or operating systems. 对于特定浏览器或操作系统才会出现的问题,请提供相应环境信息:{BROWSER_VERSION_OR_OS_INFORMATION_HERE}
vawmfj5a

vawmfj5a1#

遇到了一样的问题, 怎么解决的呢

eqqqjvef

eqqqjvef2#

也是碰到了这样的问题,现在有一个做法,就是牺牲crosshair的样式,所有设置 cursor:crosshair 的都不生效,当然也可以加入一些其他的判断条件,这个主要看使用,方法就是改写setCursorStyle,例如下面的例子

const zr = instanceCharts.getZr();
if (zr && typeof zr.setCursorStyle === 'function') {
  const originFuncSetCursorStyle = zr.setCursorStyle.bind(zr);
  zr.setCursorStyle = (cursorStyle: string) => {
    if (cursorStyle !== 'crosshair') originFuncSetCursorStyle(cursorStyle);
  };
}
mo49yndu

mo49yndu3#

框选,不应该拿pointer 款选的
交互设计的应该就是这个样子吧

相关问题