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