Page 2 of 2
Re: @ray-js/common-charts 需要增加属性formatter
Posted: 2024年 Oct 15日 17:29
by yunyin
本组件的锁定echarts版本为 5.4.2,包含了部分基础能力
关于tooltip中的formatter,需要注意与echarts官网实例不同的是 小程序不支持renderMode为html的模式,仅支持richText
如果需要在模版字符串中描述换行 可以使用 “\n”
同时由于小程序本身的体系问题,无法传入函数到实际的echarts调用层。
如果需要自定义tooltip可以考虑使用组件的 on 能力监听 showTip和hideTip 手动实现一个tooltip
Re: @ray-js/common-charts 需要增加属性formatter
Posted: 2024年 Oct 17日 10:53
by silverlight
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
}
Re: @ray-js/common-charts 需要增加属性formatter
Posted: 2024年 Oct 30日 15:35
by yunyin
组件本身是没有对on监听的事件进行拦截的
触发两次的问题确实发现了,实际在echarts中确实会出现触发多次的情况,组件在高版本下对短时间内的相同响应结果触发默认做了拦截
返回的数据不全的问题同样是因为在rjs传入逻辑线程的时候,数据必须可序列化,所以组件对循环引用数据和一些特殊对象做了清楚
后续本组件有计划更新支持函数字符串的模式传入组件,组件使用js解释引擎执行function,目前处于试验调研阶段
Re: @ray-js/common-charts 需要增加属性formatter
Posted: 2024年 Oct 30日 16:55
by muhai
现在支持了传函数,但目前处于beta版本。
Code: Select all
yarn add --registry=https://registry.npmjs.org/ @ray-js/common-charts@0.1.0-beta-1
需要将函数放置在字符串中传递,示例: