Repository navigation
feat(echarts): add updateDate method for efficient data updates - #7129
Conversation
新增 updateDate 方法用于更新 echarts 图表选项，支持合并配置、 完全替换和延迟更新等模式。该方法会在组件未初始化时自动执 行首次渲染，并能够合并全局配置如 backgroundColor 等选项。
|
📝 WalkthroughWalkthroughA new public Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@packages/effects/plugins/src/echarts/use-echarts.ts`:
- Around line 112-118: When updateDate is called and chartInstance exists, the
function currently doesn't update the stored cacheOptions, so theme switches
(handled by watch(isDark, ...)) re-render with stale options; modify updateDate
to assign the incoming option into the module/state cacheOptions before calling
render or setOption (i.e., update the cacheOptions reference used by
renderEcharts and the watch handler), ensuring chartInstance path updates
cacheOptions as well as calling renderEcharts or chartInstance.setOption so
theme switching uses the latest options.
- Line 107: The function name updateDate is a typo and should be renamed to
updateData across the module: rename the function declaration updateDate(...) to
updateData(...), update all internal calls, references, and exports (e.g., where
updateDate is used to patch ECharts series/options and any callback/handler
registration), and also update the other occurrence mentioned in the PR (the
later reference currently pointing to updateDate) so both declaration and usages
consistently use updateData.
🧹 Nitpick comments (1)
packages/effects/plugins/src/echarts/use-echarts.ts (1)
111-111: Consider usingNullablefor return type consistency.
renderEchartsusesPromise<Nullable<echarts.ECharts>>while this method usesPromise<echarts.ECharts | null>. Using the same pattern improves consistency.Proposed fix
- ): Promise<echarts.ECharts | null> => { + ): Promise<Nullable<echarts.ECharts>> => {
| }); | ||
| }; | ||
|
|
||
| const updateDate = ( |
There was a problem hiding this comment.
Typo in method name: updateDate should be updateData.
Based on the PR description mentioning "efficient ECharts data updates," the intended name appears to be updateData, not updateDate.
Proposed fix
- const updateDate = (
+ const updateData = (Also update line 172:
- updateDate,
+ updateData,🤖 Prompt for AI Agents
In `@packages/effects/plugins/src/echarts/use-echarts.ts` at line 107, The
function name updateDate is a typo and should be renamed to updateData across
the module: rename the function declaration updateDate(...) to updateData(...),
update all internal calls, references, and exports (e.g., where updateDate is
used to patch ECharts series/options and any callback/handler registration), and
also update the other occurrence mentioned in the PR (the later reference
currently pointing to updateDate) so both declaration and usages consistently
use updateData.
| return new Promise((resolve) => { | ||
| nextTick(() => { | ||
| if (!chartInstance) { | ||
| // 还没初始化 → 当作首次渲染 | ||
| renderEcharts(option).then(resolve); | ||
| return; | ||
| } |
There was a problem hiding this comment.
Missing cacheOptions update breaks theme switching.
When updateDate is called and the chart instance exists, cacheOptions is not updated. This causes the watch(isDark, ...) handler (lines 156-163) to re-render with stale options when the user switches themes, losing all updates made via updateDate.
Proposed fix
nextTick(() => {
if (!chartInstance) {
// 还没初始化 → 当作首次渲染
renderEcharts(option).then(resolve);
return;
}
+ // Update cache so theme switching preserves current options
+ cacheOptions = option;
+
// 合并你原有的全局配置（比如 backgroundColor）
const finalOption = {
...option,
...getOptions.value,
};🤖 Prompt for AI Agents
In `@packages/effects/plugins/src/echarts/use-echarts.ts` around lines 112 - 118,
When updateDate is called and chartInstance exists, the function currently
doesn't update the stored cacheOptions, so theme switches (handled by
watch(isDark, ...)) re-render with stale options; modify updateDate to assign
the incoming option into the module/state cacheOptions before calling render or
setOption (i.e., update the cacheOptions reference used by renderEcharts and the
watch handler), ensuring chartInstance path updates cacheOptions as well as
calling renderEcharts or chartInstance.setOption so theme switching uses the
latest options.
|
bot 都发现有typo 错误了，居然没修复就直接合了？ 🤣 |
|
feat: Add
updateDatemethod for efficient ECharts data updates📝 Description
Add a new
updateDatemethod to theuseEchartscomposable for updating chart data without full re-rendering, improving performance for dynamic data updates.🎯 Motivation
Previously, updating chart data required calling
renderEchartswithclear=true, which would:The new
updateDatemethod provides a more efficient way to update chart data while preserving animations and chart state.✨ Changes
Added Method
Parameters:
option: ECharts configuration to updatenotMerge:false(default): Merge with existing configuration, preserving animationstrue: Completely replace configurationlazyUpdate:false(default): Update immediatelytrue: Defer redraw, useful for multiple rapid updatesKey Features
renderEchartsbackgroundColor)setOptiondirectly without clearing the chart📖 Usage Examples
Basic Update (Merge Mode)
Complete Replacement
Batch Updates (Lazy Mode)
Real-time Data Updates
🔄 Comparison with
renderEcharts📦 Export Changes
Updated exports from
useEcharts:🎨 Future Enhancements (Optional)
The method signature includes a commented
silentoption:Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.