devlab-web-echarts-usagelisted

# devlab-web-echarts-usage ## 用途 ECharts 在 Astro/前端项目中的完整集成指南，包含 tree-shaking、IntersectionObserver 按需加载、自定义系列集成、拓扑图实现、雷达图配置、调试经验。 **适用场景**： - 在 Astro/React/Vue 项目中引入 ECharts 图表 - 需要 tree-shaking 以避免全量 300KB 加载 - 需要 IntersectionObserver 按需加载（视口进入才加载） - 实现 force-directed 拓扑图、雷达图、散点图等 - 处理 ECharts 在 Astro Islands 模式下的数据传递 ## 核心概念 ### Tree-Shaking 导入 ECharts 必须使用 tree-shaking 导入，否则会加载全量 ~300KB： ```typescript // ✅ 正确：只导入需要的子模块 import * as echarts from "echarts/core"; import { RadarChart, ScatterChart, EffectScatterChart } from "echarts/charts"; import { TooltipComponent, LegendComponent, GridComponent } from "echarts/components"; import { CanvasRenderer } from "echarts/renderers"; echarts.use([RadarChart, ScatterChart, EffectScatterChart, TooltipComponent, LegendComponent, GridComponent, CanvasRenderer]); // ❌ 错误：全量导入 import * as echarts from "echarts"; ``` ### Astro Islands 数据传递 Astro 组件通过 `data-*` 属性传递数据到客户端脚本： ```astro <div class="chart" data-scores={JSON.stringify(scores)}></div> <script> const container = document.querySelector('.chart'); const scores = JSON.parse(container.dataset.scores); // 使用 scores 初始化 ECharts... </script> ``` ### IntersectionObserver 按需加载 图表不在首屏时，延迟加载以减少首屏 JS payload： ```typescript export function observeChart(container, onReady) { const observer = new IntersectionObserver((entries) => { for (const entry of entries) { if (entry.isIntersecting) { observer.unobserve(container); const chart = echarts.init(contain