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

shuangmianxiaoQ commented 5 years ago

[ ] I am using English in this issue. 在这个 Issue 中我使用了英文（强烈建议）。

General Questions

[x] Required: I have read the document and examples and tried to solve it by myself. （必填）我读过了文档和教程，并且曾试图自己解决问题。
[x] Required: I have searched for similar issues and that didn't help. （必填）我搜索过 issue 但是没有帮助。
[x] 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 中我提供了以下信息：

[x] Required: issue type；（必填）issue 类型
[x] Required: one sentence description in issue details；（必填）一句话的问题描述
[x] Required: demo；（必填）能反映问题的例子（如果你想提问或报 bug）
[x] 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 ...；我需要一个新功能
[x] 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

鼠标样式为 pointer

Current Behavior

鼠标样式为 crosshair

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
[x] 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}

wadrn commented 3 years ago

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

rds57826 commented 3 years ago

也是碰到了这样的问题，现在有一个做法，就是牺牲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);
  };
}

zhoulujun commented 2 years ago

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

github-actions[bot] commented 6 months ago

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

github-actions[bot] commented 5 months ago

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!

apache / echarts