VChart icon indicating copy to clipboard operation
VChart copied to clipboard

[Bug] canvas tooltip 显示内容与交互不一致

Open xiaoluoHe opened this issue 1 year ago • 0 comments

Version

1.11.0

Link to Minimal Reproduction

none

Steps to Reproduce

const spec = { "type": "common", "data": [ { "id": "data", "values": [ { "time": "2024-03-30", "value": 0.4827, "type": "实际值", "formatValue": "0.48", "abnomalText": "" }, { "time": "2024-03-31", "value": 0.4878, "type": "实际值", "formatValue": "0.49", "abnomalText": "" }, { "time": "2024-04-01", "value": 0.49, "type": "实际值", "formatValue": "0.49", "abnomalText": "" }, { "time": "2024-04-02", "value": 0.4784, "type": "实际值", "formatValue": "0.48", "abnomalText": "" }, { "time": "2024-04-03", "value": 0.4769, "type": "实际值", "formatValue": "0.48", "abnomalText": "" }, { "time": "2024-04-04", "value": 0.4744, "type": "实际值", "formatValue": "0.47", "abnomalText": "" }, { "time": "2024-04-05", "value": 0.4738, "type": "实际值", "formatValue": "0.47", "abnomalText": "" }, { "time": "2024-04-06", "value": 0.4768, "type": "实际值", "formatValue": "0.48", "abnomalText": "" }, { "time": "2024-04-07", "value": 0.4726, "type": "实际值", "formatValue": "0.47", "abnomalText": "" }, { "time": "2024-04-08", "value": 0.4696, "type": "实际值", "formatValue": "0.47", "abnomalText": "" }, { "time": "2024-04-09", "value": 0.4717, "type": "实际值", "formatValue": "0.47", "abnomalText": "" }, { "time": "2024-04-10", "value": 0.4743, "type": "实际值", "formatValue": "0.47", "abnomalText": "" }, { "time": "2024-04-11", "value": 0.4396, "type": "实际值", "formatValue": "0.44", "abnomalText": "" }, { "time": "2024-04-12", "value": 0.4783, "type": "实际值", "formatValue": "0.48", "abnomalText": "" }, { "time": "2024-04-13", "value": 0.4749, "type": "实际值", "formatValue": "0.47", "abnomalText": "" }, { "time": "2024-04-14", "value": 0.4871, "type": "实际值", "formatValue": "0.49", "abnomalText": "" }, { "time": "2024-04-15", "value": 0.4962, "type": "实际值", "formatValue": "0.50", "abnomalText": "" }, { "time": "2024-04-16", "value": 0.4918, "type": "实际值", "formatValue": "0.49", "abnomalText": "" }, { "time": "2024-04-17", "value": 0.4864, "type": "实际值", "formatValue": "0.49", "abnomalText": "" }, { "time": "2024-04-18", "value": 0.4891, "type": "实际值", "formatValue": "0.49", "abnomalText": "" }, { "time": "2024-04-19", "value": 0.4788, "type": "实际值", "formatValue": "0.48", "abnomalText": "" }, { "time": "2024-04-20", "value": 0.4781, "type": "实际值", "formatValue": "0.48", "abnomalText": "" }, { "time": "2024-04-21", "value": 0.4809, "type": "实际值", "formatValue": "0.48", "abnomalText": "" }, { "time": "2024-04-22", "value": 0.4829, "type": "实际值", "formatValue": "0.48", "abnomalText": "" }, { "time": "2024-04-23", "value": 0.4754, "type": "实际值", "formatValue": "0.48", "abnomalText": "" }, { "time": "2024-04-24", "value": 0.4809, "type": "实际值", "formatValue": "0.48", "abnomalText": "" }, { "time": "2024-04-25", "value": 0.4799, "type": "实际值", "formatValue": "0.48", "abnomalText": "" }, { "time": "2024-04-26", "value": 0.4805, "type": "实际值", "formatValue": "0.48", "abnomalText": "" }, { "time": "2024-04-27", "value": 0.4794, "type": "实际值", "formatValue": "0.48", "abnomalText": "" }, { "time": "2024-04-28", "value": 0.4769, "type": "实际值", "formatValue": "0.48", "abnomalText": "" } ] }, { "id": "abnormal", "values": [ { "time": "2024-03-30", "value": null, "type": "异常节点" }, { "time": "2024-03-31", "value": null, "type": "异常节点" }, { "time": "2024-04-01", "value": null, "type": "异常节点" }, { "time": "2024-04-02", "value": null, "type": "异常节点" }, { "time": "2024-04-03", "value": null, "type": "异常节点" }, { "time": "2024-04-04", "value": null, "type": "异常节点" }, { "time": "2024-04-05", "value": null, "type": "异常节点" }, { "time": "2024-04-06", "value": null, "type": "异常节点" }, { "time": "2024-04-07", "value": null, "type": "异常节点" }, { "time": "2024-04-08", "value": null, "type": "异常节点" }, { "time": "2024-04-09", "value": null, "type": "异常节点" }, { "time": "2024-04-10", "value": null, "type": "异常节点" }, { "time": "2024-04-11", "value": 0.4396, "type": "异常节点" }, { "time": "2024-04-12", "value": null, "type": "异常节点" }, { "time": "2024-04-13", "value": null, "type": "异常节点" }, { "time": "2024-04-14", "value": null, "type": "异常节点" }, { "time": "2024-04-15", "value": 0.4962, "type": "异常节点" }, { "time": "2024-04-16", "value": null, "type": "异常节点" }, { "time": "2024-04-17", "value": null, "type": "异常节点" }, { "time": "2024-04-18", "value": null, "type": "异常节点" }, { "time": "2024-04-19", "value": null, "type": "异常节点" }, { "time": "2024-04-20", "value": null, "type": "异常节点" }, { "time": "2024-04-21", "value": null, "type": "异常节点" }, { "time": "2024-04-22", "value": null, "type": "异常节点" }, { "time": "2024-04-23", "value": null, "type": "异常节点" }, { "time": "2024-04-24", "value": null, "type": "异常节点" }, { "time": "2024-04-25", "value": null, "type": "异常节点" }, { "time": "2024-04-26", "value": null, "type": "异常节点" }, { "time": "2024-04-27", "value": null, "type": "异常节点" }, { "time": "2024-04-28", "value": null, "type": "异常节点" } ] }, { "id": "reason", "values": [ { "time": "2024-03-30", "value": null, "type": "异常原因" }, { "time": "2024-03-31", "value": null, "type": "异常原因" }, { "time": "2024-04-01", "value": null, "type": "异常原因" }, { "time": "2024-04-02", "value": null, "type": "异常原因" }, { "time": "2024-04-03", "value": null, "type": "异常原因" }, { "time": "2024-04-04", "value": null, "type": "异常原因" }, { "time": "2024-04-05", "value": null, "type": "异常原因" }, { "time": "2024-04-06", "value": null, "type": "异常原因" }, { "time": "2024-04-07", "value": null, "type": "异常原因" }, { "time": "2024-04-08", "value": null, "type": "异常原因" }, { "time": "2024-04-09", "value": null, "type": "异常原因" }, { "time": "2024-04-10", "value": null, "type": "异常原因" }, { "time": "2024-04-11", "value": "◦ 对比前1天, 波动超出7天平均波动的2个标准差\n◦ 对比前1天, 波动超出30天平均波动的2个标准差", "type": "异常原因" }, { "time": "2024-04-12", "value": null, "type": "异常原因" }, { "time": "2024-04-13", "value": null, "type": "异常原因" }, { "time": "2024-04-14", "value": null, "type": "异常原因" }, { "time": "2024-04-15", "value": "◦ 对比前1天, 波动超出30天平均波动的2个标准差", "type": "异常原因" }, { "time": "2024-04-16", "value": null, "type": "异常原因" }, { "time": "2024-04-17", "value": null, "type": "异常原因" }, { "time": "2024-04-18", "value": null, "type": "异常原因" }, { "time": "2024-04-19", "value": null, "type": "异常原因" }, { "time": "2024-04-20", "value": null, "type": "异常原因" }, { "time": "2024-04-21", "value": null, "type": "异常原因" }, { "time": "2024-04-22", "value": null, "type": "异常原因" }, { "time": "2024-04-23", "value": null, "type": "异常原因" }, { "time": "2024-04-24", "value": null, "type": "异常原因" }, { "time": "2024-04-25", "value": null, "type": "异常原因" }, { "time": "2024-04-26", "value": null, "type": "异常原因" }, { "time": "2024-04-27", "value": null, "type": "异常原因" }, { "time": "2024-04-28", "value": null, "type": "异常原因" } ] } ], "tooltip": { "renderMode": "canvas", "style": { "shape": { "size": 0 }, "valueLabel": { "multiLine": true } } }, "series": [ { "type": "line", "dataIndex": 0, "xField": "time", "yField": "value", "seriesField": "type", "point": { "state": { "hover": { "fillOpacity": 0.5, "stroke": "blue", "lineWidth": 2 }, "selected": { "fill": "red" } }, "style": { "size": 5, "lineWidth": 0 } } }, { "type": "line", "dataIndex": 1, "xField": "time", "yField": "value", "seriesField": "type", "point": { "style": { "shape": "square", "size": 8, "lineWidth": 0, "fill": "red", "stroke": "red" } } }, { "type": "line", "dataIndex": 2, "xField": "time", "yField": "value", "seriesField": "type", "point": { "style": { "shape": "circle", "size": 8, "lineWidth": 0, "fill": "red", "stroke": "red" } } } ], "axes": [ { "orient": "left", "label": { "visible": true }, "type": "linear", "range": { "min": 0.4396, "max": 0.4962 } }, { "orient": "bottom", "type": "band", "label": { "autoHide": true, "autoRotate": false } } ], "markLine": [ { "coordinates": [ { "time": "2024-03-30", "value": 0.4827, "type": "实际值", "formatValue": "0.48", "abnomalText": "" }, { "time": "2024-03-31", "value": 0.4878, "type": "实际值", "formatValue": "0.49", "abnomalText": "" } ], "line": { "style": { "lineDash": [ 0 ], "lineWidth": 2, "stroke": "#52c41a" } }, "endSymbol": { "style": { "stroke": "#52c41a", "fill": "#52c41a" } } } ], "crosshair": { "xField": { "visible": true, "line": { "type": "line", "style": { "lineWidth": 1, "opacity": 1, "stroke": "#959DA5" } } } }, "legends": [ { "items": [ { "label": "实际值", "shape": { "symbolType": "circle", "fillOpacity": 1, "strokeOpacity": 1, "opacity": 1, "texturePadding": null, "textureSize": null, "fill": "#1664FF", "stroke": "#1664FF", "lineWidth": 2 } }, { "label": "异常节点", "shape": { "symbolType": "square", "fillOpacity": 0.8, "strokeOpacity": 1, "opacity": 1, "texturePadding": null, "textureSize": null, "fill": "red", "stroke": "red", "lineWidth": 0 } }, { "label": "上升", "shape": { "symbolType": "M5 -7.5C5 -8.32843 5.67157 -9 6.5 -9H19.5C20.3284 -9 21 -8.32843 21 -7.5V5.5C21 6.32843 20.3284 7 19.5 7C18.6716 7 18 6.32843 18 5.5V-3.87868L4.56066 9.56066C3.97487 10.1464 3.02513 10.1464 2.43934 9.56066C1.85355 8.97487 1.85355 8.02513 2.43934 7.43934L15.8787 -6H6.5C5.67157 -6 5 -6.67157 5 -7.5Z", "fillOpacity": 1, "strokeOpacity": 1, "opacity": 1, "texturePadding": null, "textureSize": null, "fill": "#3acb81", "stroke": "#3acb81" } }, { "label": "下降", "shape": { "symbolType": "M19.5 -5C20.3284 -5 21 -4.32843 21 -3.5V9.5C21 10.3284 20.3284 11 19.5 11H6.5C5.67157 11 5 10.3284 5 9.5C5 8.67157 5.67157 8 6.5 8H15.8787L2.43936 -5.43934C1.85357 -6.02513 1.85357 -6.97487 2.43936 -7.56066C3.02514 -8.14645 3.97489 -8.14645 4.56068 -7.56066L18 5.87868V-3.5C18 -4.32843 18.6716 -5 19.5 -5Z", "fillOpacity": 1, "strokeOpacity": 1, "opacity": 1, "texturePadding": null, "textureSize": null, "fill": "red", "stroke": "red" } } ], "visible": true, "orient": "bottom", "defaultSelected": [ "实际值", "异常节点", "异常原因", "上升", "下降" ] } ], "color": [ "#1664FF" ] }

const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY! window['vchart'] = vchart;

Current Behavior

飞书20240514-142927

Expected Behavior

opacityFadeIn

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

xiaoluoHe avatar May 14 '24 06:05 xiaoluoHe