未分類
3 11 月 2020

数据可视化，前端有办法 hack 进入 echarts 获取内部数据吗？

数据可视化，前端有办法 hack 进入 echarts 获取内部数据吗？

資深大佬 : black11black 2

现在做可视化有这样一个需求，假设我有一张直角坐标系内的折线图，用 echarts 画出来的，效果很满意。

但我想在原生功能的基础上自定义新功能，比如原生有鼠标所在位置水平线的功能（根据鼠标位置改变实时显示 X 或 Y 轴的坐标值），我给鼠标左键绑定一个事件，比如当点击左键时提取出 X 轴值并进行某种自定义计算。这种需求是可以实现的吗？

大佬有話說 (9)

  • 資深大佬 : 20498860

    应该有对应的方法吧

  • 資深大佬 : birdrally

    v 站前端真是无所不能

  • 資深大佬 : loading

    echarts 不是开源的吗？你改一下不就好了？

  • 資深大佬 : des

    不需要 hack，echats 有事件和相应的事件可以做，多看看文档
    https://echarts.apache.org/en/api.html#events.Mouse%20events.click
    https://echarts.apache.org/en/api.html#echartsInstance.convertFromPixel

  • 資深大佬 : des

    给你点灵感
    https://www.makeapie.com/editor.html?c=x-4qnSInEU

  • 資深大佬 : azcvcza

    有事件监听。echarts 都封装好了。你实在想改，拿到值后建一个新的 option，然后 setOption 不就好了。canvas 只是画布，要想改变只有重绘

  • 主 資深大佬 : black11black

    @des 感谢！

  • 主 資深大佬 : black11black

    @des 试了一下官网对应的 demo，似乎点击事件只能绑定到柱状图中的实体上，而无法点击背景，这个跟需求的不太一样

  • 主 資深大佬 : black11black

    @black11black 最后用比例计算的方式实现的，属于自己在外面纯新加入的内容。。echarts 自己的 api 提供的内容不是很全，getModel().getComponent() 这类 api 在文档里居然查不到，很怪