ECharts交互演示示例

本页面展示了如何在VitePress中嵌入可交互的ECharts图表

📊 基础柱状图

ECharts 演示

---

📈 平滑折线图

ECharts 演示

---

🥧 环形饼图

ECharts 演示

---

🎯 多系列对比图

ECharts 演示

---

🌡️ 仪表盘

ECharts 演示

---

💡 使用说明

基本用法

在Markdown中使用 <EChartsDemo> 组件：

<EChartsDemo 
  :option="{
    // ECharts配置选项
  }"
  :height="400"
/>

Props参数

参数	类型	默认值	说明
option	Object	-	ECharts配置项（必需）
height	Number/String	400	图表高度（像素）
theme	String	''	主题名称（'dark'等）
showCode	Boolean	false	是否显示配置代码
autoResize	Boolean	true	是否自动响应式调整大小

完整示例

<EChartsDemo 
  :option="{
    title: { text: '示例图表' },
    tooltip: { trigger: 'axis' },
    xAxis: { 
      type: 'category',
      data: ['A', 'B', 'C']
    },
    yAxis: { type: 'value' },
    series: [{
      type: 'bar',
      data: [10, 20, 30]
    }]
  }"
  :height="350"
  theme="light"
  :autoResize="true"
/>

---

🎨 高级特性

1. 深色模式支持

图表会自动适配VitePress的深色模式，无需额外配置。

2. 响应式布局

图表会根据容器宽度自动调整，保持正确的宽高比。

3. 性能优化

• 组件卸载时自动销毁图表实例
• 避免内存泄漏
• 支持大数据量渲染

4. 动态更新

当:option属性变化时，图表会自动更新，无需手动调用API。

---

📚 更多示例

查看以下文档获取更多实际案例：

• 基础图表 - 折线图、柱状图、饼图等
• 高级图表 - 热力图、关系图等
• 实战案例 - 企业级项目示例

---

提示: 您可以在任何Markdown文档中使用此组件来展示ECharts图表！🚀