@ray-js/common-charts 需要增加属性formatter

小程序开发相关产品技术讨论,包括面板、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具(IDE)及其他开发技术相关等话题


yunyin
Posts: 6

本组件的锁定echarts版本为 5.4.2,包含了部分基础能力
关于tooltip中的formatter,需要注意与echarts官网实例不同的是 小程序不支持renderMode为html的模式,仅支持richText
如果需要在模版字符串中描述换行 可以使用 “\n”

同时由于小程序本身的体系问题,无法传入函数到实际的echarts调用层。
如果需要自定义tooltip可以考虑使用组件的 on 能力监听 showTip和hideTip 手动实现一个tooltip


Tags:
silverlight
Posts: 114

Re: @ray-js/common-charts 需要增加属性formatter

yunyin 2024年 Oct 15日 17:29

本组件的锁定echarts版本为 5.4.2,包含了部分基础能力
关于tooltip中的formatter,需要注意与echarts官网实例不同的是 小程序不支持renderMode为html的模式,仅支持richText
如果需要在模版字符串中描述换行 可以使用 “\n”

同时由于小程序本身的体系问题,无法传入函数到实际的echarts调用层。
如果需要自定义tooltip可以考虑使用组件的 on 能力监听 showTip和hideTip 手动实现一个tooltip

谢谢讲解,但还有一些问题,
一:on能力具体能监听哪些内容?
我测了click,seriesClick这些都没能得到回调,只有showTip这一个得到了的回调。
二:监听showTip得到的回调参数,只有tip的位置和坐标系信息,其中数据索引部分dataByCoordSys ,虽然存在dataByAxis ,但是其中实际内容为null,并没有得到实际的数据。
三:直接使用on,监听showTip得到的回调函数会触发两次,这个问题在我增加防抖后得到解决,造成这个问题的原因是啥
这是我调用的代码

Code: Select all

  const getParams = (params) => {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      console.log('Chart clicked:', params);
    }, 300); 
  };
        on={{
          showTip: getParams,
        }}


这是实际获得的参数

Code: Select all

{
    "type": "showtip",
    "escapeConnect": true,
    "x": 199.59375,
    "y": 90,
    "position": null,
    "dataIndexInside": 3,
    "dataIndex": null,
    "seriesIndex": 0,
    "dataByCoordSys": [
        {
            "coordSysId": "\u0000series\u00000\u00000",
            "coordSysIndex": null,
            "coordSysType": "grid",
            "coordSysMainType": null,
            "dataByAxis": [
                {
                    "axisDim": "x",
                    "axisIndex": null,
                    "axisType": "xAxis.category",
                    "axisId": null,
                    "value": null,
                    "valueLabelOpt": {
                        "precision": "auto",
                        "formatter": null
                    },
                    "seriesDataIndices": [
                        {
                            "seriesIndex": null,
                            "dataIndexInside": null,
                            "dataIndex": null
                        },
                        {
                            "seriesIndex": 1,
                            "dataIndexInside": null,
                            "dataIndex": null
                        }
                    ]
                }
            ]
        }
    ],
    "dispatchAction": null
}
yunyin
Posts: 6

Re: @ray-js/common-charts 需要增加属性formatter

组件本身是没有对on监听的事件进行拦截的
触发两次的问题确实发现了,实际在echarts中确实会出现触发多次的情况,组件在高版本下对短时间内的相同响应结果触发默认做了拦截

返回的数据不全的问题同样是因为在rjs传入逻辑线程的时候,数据必须可序列化,所以组件对循环引用数据和一些特殊对象做了清楚

后续本组件有计划更新支持函数字符串的模式传入组件,组件使用js解释引擎执行function,目前处于试验调研阶段

muhai
Posts: 84

Re: @ray-js/common-charts 需要增加属性formatter

现在支持了传函数,但目前处于beta版本。

Code: Select all

yarn add --registry=https://registry.npmjs.org/ @ray-js/common-charts@0.1.0-beta-1

需要将函数放置在字符串中传递,示例:

截屏2024-10-30 16.54.40.png
截屏2024-10-30 16.54.34.png
muhai
Posts: 84

Re: @ray-js/common-charts 需要增加属性formatter

silverlight 2024年 Sep 24日 09:22
muhai 2024年 Aug 28日 20:46

如果强烈需求的话,我们这边评估一下

你好,这个组件后续还会更新这个属性吗?

0.1.0版本将会支持formatter函数用法。目前处于beta阶段,可安装beta版本体验

Code: Select all

yarn add --registry=https://registry.npmjs.org/ @ray-js/common-charts@0.1.0-beta-1
Post Reply