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);

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

🎨 四、进阶场景配置

▎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/**"] // 排除源码减小体积
  }