electron中显示echarts

🔧 一、基础环境配置

1. 初始化项目

   npm init -y
   npm install --save-dev electron
   

2. 安装ECharts

   npm install echarts
   

3. 引入方式

   • 渲染进程直接调用：

     // renderer.js
     const echarts = require('echarts');
     

   • 框架集成方案：
     • Vue3：使用vue-echarts v6+
     • React：选用echarts-for-react

---

🚀 二、核心实现步骤

▎1. 创建图表容器

<div id="chart" style="width: 800px; height: 600px;"></div>

▎2. 初始化与渲染基础图表

const container = document.getElementById('chart');
const myChart = echarts.init(container, null, { devicePixelRatio: 2, // 高清屏适配renderer: 'canvas'   // 默认渲染器，可省略
});// 柱状图示例配置
const option = {tooltip: { trigger: 'axis' },xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },yAxis: { type: 'value' },series: [{ type: 'bar',data: [120, 200, 150, 80, 70],itemStyle: { borderRadius: 5 } // 柱体圆角}]
};
myChart.setOption(option);

▎3. 动态数据更新

// 实时更新数据
setInterval(() => {const newData = Array(5).fill(0).map(() => Math.floor(Math.random() * 200));myChart.setOption({ series: [{ data: newData }] });
}, 1000);

---

⚠️ 三、高频问题解决方案

问题现象	解决方案
echarts is not defined	检查渲染进程是否启用nodeIntegration: true，Vue/React需用import * as echarts
图表模糊	初始化时配置devicePixelRatio: window.devicePixelRatio
窗口缩放失真	监听resize事件并调用myChart.resize()
大数据卡顿	启用增量渲染：series: [{ progressive: 1000 }] (ECharts 5.2+)

---

🎨 四、进阶场景配置

▎1. 主题切换（亮色/暗色）

// 暗色主题示例
myChart.dispose(); // 销毁旧实例
myChart = echarts.init(container, 'dark'); // 应用内置暗色主题
myChart.setOption(option);

▎2. 原生菜单交互图表

// 主进程发送图表类型
ipcMain.on('change-chart', (_, type) => {mainWindow.webContents.send('update-chart', type);
});// 渲染进程接收并更新
ipcRenderer.on('update-chart', (_, type) => {myChart.setOption({ series: [{ type }] }); // 动态切换折线/柱状等
});

▎3. 响应式布局技巧

/* CSS自适应容器 */
#chart { width: 100%; height: 70vh; /* 视口高度占比 */
}

---

💎 最佳实践总结

• 架构推荐：Vue3 + vue-echarts组件库 + Electron
• 调试工具：
  • 开启webPreferences: { devTools: true }
  • 使用ECharts Inspector插件检查配置
• 打包优化：

  "build": {"files": ["!node_modules/echarts/src/**"] // 排除源码减小体积
  }