ECharts 安装使用教程

发布于：2025-07-03 ⋅ 阅读:(18) ⋅ 点赞:(0)

一、ECharts 简介

ECharts（Enterprise Charts）是百度开源的一款基于 JavaScript 的数据可视化图表库。它拥有丰富的图表类型（折线图、柱状图、饼图、地图等）、灵活的配置项和良好的跨平台支持，适用于仪表盘、数据大屏、报表系统等场景。

二、ECharts 安装方式

2.1 使用 CDN 引入（推荐快速入门）

<!-- 在 HTML 中引入 ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

2.2 使用 npm 安装（适用于工程项目）

npm install echarts --save

在模块中引入：

import * as echarts from 'echarts';

三、基本使用示例

3.1 HTML 示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>基本折线图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <style>#main { width: 600px; height: 400px; }</style>
  </head>
  <body>
    <div id="main"></div>
    <script>
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option = {
        title: {
          text: '示例折线图'
        },
        tooltip: {},
        xAxis: {
          data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'line',
          data: [120, 200, 150, 80, 70, 110, 130]
        }]
      };
      myChart.setOption(option);
    </script>
  </body>
</html>

四、常用图表类型

图表类型	type 配置值
折线图	line
柱状图	bar
饼图	pie
散点图	scatter
雷达图	radar
地图	map
仪表盘	gauge
K 线图	candlestick

五、响应式与主题切换

5.1 图表自适应容器大小

window.addEventListener('resize', () => {
  myChart.resize();
});

5.2 更换主题

使用 echarts.init(dom, themeName)，可通过官网提供的主题包使用黑色主题等：

var myChart = echarts.init(document.getElementById('main'), 'dark');

六、与框架集成

Vue：使用 vue-echarts 或手动挂载 echarts.init()
React：使用 echarts-for-react
Angular：手动封装组件使用

七、常见问题

Q1: 图表不显示？

检查容器是否有明确宽高（必须有）
检查是否正确调用 setOption

Q2: 图表刷新不更新？

可以手动调用 myChart.setOption(option, true) 强制更新

Q3: 控制台报错？

检查 ECharts 是否加载成功
检查 option 数据结构是否符合格式

本文由“小奇Java面试”原创发布，转载请注明出处。

可以搜索【小奇JAVA面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。

在这里插入图片描述