2025 最新 ECharts 下载、安装与配置教程

最新推荐文章于 2025-08-11 23:19:59 发布

AIWeb前端

最新推荐文章于 2025-08-11 23:19:59 发布

阅读量626

点赞数 9

CC 4.0 BY-SA版权

分类专栏：前端技术专栏文章标签： echarts 前端 javascript ecmascript 开发语言 react.js bug

公众号：猫头虎技术团队

本文链接：https://blog.csdn.net/libin9iOak/article/details/150023524

前端技术专栏专栏收录该内容

30 篇文章

订阅专栏

2025 最新 ECharts 下载、安装与配置教程

帮助你快速掌握 Apache ECharts 在各类前端项目中的下载、集成与配置方法，从零基础上手到进阶优化，全方位提升可视化开发效率。

在大数据与可视化需求爆发的时代，2025 最新 ECharts 下载、安装教程 与 配置指南 应运而生，为前端开发者、BI 工程师、数据分析师提供一站式解决方案。本篇文章不仅覆盖了 Apache ECharts（又称 Apache echarts.js）在 Windows、macOS、Linux 环境下的多系统兼容安装，还深入讲解了 npm/yarn 安装、CDN 引入、GitHub Release 离线包下载 等主流下载方式；同时结合 Vue、React、Webpack、Vite 等项目实战，手把手演示如何完成 ECharts 项目集成、基础 Option 配置、主题定制 及 性能优化。

2025 最新 ECharts 下载、ECharts 安装教程
ECharts 配置指南、echarts.js 引入方式
Apache ECharts 可视化库、图表库使用教程
前端数据可视化、BI 报表可视化工具
Vue ECharts 集成、React ECharts 使用
ECharts 主题定制、ECharts 性能优化

无论你是 ECharts 入门 新手，还是追求极致性能的 ECharts 高级 用户，这份 图文并茂、深度解读 的下载与安装教程，都将帮助你在 5 分钟内完成环境搭建，快速启动你的数据可视化之旅。

在这里插入图片描述

1. ECharts 简介

Apache ECharts（Enterprise Charts）是一款基于 JavaScript 的开源可视化库，特点包括：

丰富图表类型：常见折线、柱状、饼图，以及地图、关系图、仪表盘等
高性能渲染：Canvas & SVG 双引擎，支持百万级数据可视化
极致交互：内置缩放、拖拽、动画、事件回调
友好扩展：支持自定义主题、扩展组件和自定义系列

ECharts 在数据可视化领域应用广泛，适用于后台管理系统、数据大屏、报告中心等场景。

2. 环境与前置条件

Node.js ≥ 14.x（若使用 npm/yarn 安装）
浏览器：支持 ES5+ 的主流浏览器
构建工具（可选）：Webpack、Vite、Parcel 等

确保你的项目已有基本的前端打包配置，或使用纯静态 HTML 亦可。

3. 下载与安装方式

ECharts 的下载和安装方式灵活，可根据项目规模和需求选择最合适的方案。

3.1 CDN 引入

适合快速原型或无需构建流程的纯静态页面。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ECharts 快速体验</title>
  <!-- 引入 ECharts 核心包 -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width:600px;height:400px;"></div>
  <script>
    var myChart = echarts.init(document.getElementById('chart'));
    myChart.setOption({
      title: { text: 'Hello ECharts' },
      series: [{ type: 'pie', data: [
        { value: 40, name: 'A' },
        { value: 60, name: 'B' }
      ] }]
    });
  </script>
</body>
</html>

3.2 npm / yarn 安装

适合中大型项目，与构建工具高度集成。

# npm
npm install echarts --save

# yarn
yarn add echarts

安装后可在代码中按需引入：

// 引入整个库（体积较大）
import * as echarts from 'echarts';

// 按需引入系列与组件（体积更小）
import { init } from 'echarts/core';
import { LineChart, PieChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

init({
  renderer: 'canvas',
  use: [
    LineChart,
    PieChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    CanvasRenderer
  ]
});

3.3 GitHub Release 下载

前往 ECharts GitHub Release 页面下载 echarts.min.js、echarts.js 等压缩包，可离线存放于项目目录并通过相对路径引入。

4. 本地引入与项目集成

4.1 纯静态页面集成

将下载好的 echarts.min.js 放入 libs/echarts/
HTML 中通过 <script src="./libs/echarts/echarts.min.js"></script> 引入
按照 3.1 中示例初始化即可

4.2 Vue 项目集成

Vue 2 + Webpack

npm install echarts --save

main.js：

import Vue from 'vue';
import App from './App.vue';
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

new Vue({
  render: h => h(App),
}).$mount('#app');

组件中使用：

<template>
  <div ref="chart" style="width:100%;height:400px;"></div>
</template>
<script>
export default {
  mounted() {
    this.chart = this.$echarts.init(this.$refs.chart);
    this.chart.setOption({
      title: { text: 'Vue ECharts' },
      series: [{ type: 'line', data: [10, 20, 30, 40] }]
    });
  },
  beforeDestroy() {
    this.chart.dispose();
  }
};
</script>

4.3 React 项目集成

React + Create React App

npm install echarts --save

Chart.jsx：

import React, { useRef, useEffect } from 'react';
import * as echarts from 'echarts';

export default function Chart() {
  const chartRef = useRef(null);
  useEffect(() => {
    const chart = echarts.init(chartRef.current);
    chart.setOption({
      title: { text: 'React ECharts' },
      xAxis: { data: ['Mon', 'Tue', 'Wed'] },
      yAxis: {},
      series: [{ type: 'bar', data: [5, 20, 36] }]
    });
    return () => chart.dispose();
  }, []);
  return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
}

5. 基本配置与示例

5.1 初始化图表实例

var dom = document.getElementById('chart');
var myChart = echarts.init(dom, 'light', { renderer: 'canvas' });

第二个参数：主题（light、dark 或自定义主题）
renderer: canvas 或 svg

5.2 Option 配置详解

var option = {
  title: {
    text: '2025 ECharts 教程',
    subtext: '数据可视化入门'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['销量']
  },
  xAxis: {
    type: 'category',
    data: ['1 月', '2 月', '3 月', '4 月']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '销量',
    type: 'line',
    data: [150, 230, 224, 218],
    smooth: true
  }]
};
myChart.setOption(option);

title：主标题与副标题
tooltip：提示框配置
legend：图例
xAxis/yAxis：坐标轴类型与数据
series：系列名称、类型（line、bar、pie…）、数据与样式

6. 常见图表类型示例

折线图（Line）：趋势展示
柱状图（Bar）：分组对比
饼图（Pie）：占比分析
散点图（Scatter）：分布关系
雷达图（Radar）：多变量对比
地图（Map）：地理信息可视化

每种图表都可通过 series.type 区分，并在 series[i].itemStyle、emphasis 中做个性化调整。

7. 主题与样式定制

ECharts 默认提供 light、dark 两种主题，也可使用第三方或自定义主题。

// 加载自定义主题（json 格式）
echarts.registerTheme('myTheme', {
  backgroundColor: '#f4f4f4',
  color: ['#5470c6', '#91cc75', '#fac858'],
  textStyle: { fontFamily: '微软雅黑' }
});
var chart = echarts.init(dom, 'myTheme');

自定义主题可通过官网 Theme Roller 生成。

8. 进阶配置：响应式与性能优化

自适应容器变化

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

按需加载组件（减少体积）
数据下采样：对大数据量进行分段或缩减
开启 GPU 加速（canvas）
服务器渲染（SSR）：使用 echarts renderToSVGString 返回 SVG 字符串

9. 常见问题与解决方案

问题	解决方案
图表在隐藏/显示切换时不自适应	调用 `chart.resize()`
地图组件无法显示	引入 `echarts/map/js/china.js` 并注册地图
主题样式不生效	检查 `registerTheme` 与 `init` 中主题名是否一致
打包后体积过大	按需引入 `echarts/core` + `echarts/charts`