ECharts图表插件下载使用教程官方最新免费资源

ECharts 是百度开源的一个纯 JavaScript 的数据可视化库，它完全免费、开源，支持图表类型非常丰富，在国内使用极为广泛。

一、什么是 ECharts？

ECharts（Enhanced Charts）是一个基于 JavaScript 的开源可视化库，提供了直观、生动、可交互、可个性化定制的数据可视化图表。

特点：

✅ 完全免费开源（Apache 2.0 协议）
✅ 支持多种图表类型（折线图、柱状图、饼图、散点图、地图、雷达图等）
✅ 支持移动端
✅ 支持 Vue / React / Angular 等主流框架
✅ 文档丰富、社区活跃
✅ 官方地址：https://echarts.apache.org/

二、官方免费下载地址

⚠️ 注意：ECharts 官方不会收费！ 如果看到”收费版”“企业版”等字样，请谨慎辨别，可能是第三方包装版本。

资源	地址
官方主页	https://echarts.apache.org/zh/index.html
文档教程	https://echarts.apache.org/handbook/zh/get-started/
GitHub 仓库	https://github.com/apache/echarts
CDN 资源	https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js
示例中心	https://echarts.apache.org/examples/zh/index.html

三、三种下载/引入方式

方式一：通过 CDN 引入（最简单，适合快速测试）

只需在 HTML 文件中添加一行 script 标签，即可使用 ECharts：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ECharts 快速入门</title>
    <!-- 引入 ECharts CDN -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小的 DOM -->
    <div id="main" style="width: 600px; height: 400px;"></div>

    <script>
        // 基于准备好的 DOM，初始化 ECharts 实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

效果： 打开网页即可看到一个简单的柱状图。

方式二：通过 npm 安装（适合项目开发）

如果你使用 Vue / React / Node.js 等项目，可以通过 npm 安装：

# 安装 ECharts
npm install echarts --save

# 或者使用 yarn
yarn add echarts

在项目中引入：

// 方式一：完整引入（文件较大）
import * as echarts from 'echarts';

// 方式二：按需引入（推荐，减少打包体积）
import echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    BarChart,
    CanvasRenderer
]);

方式三：下载源码本地使用

访问 GitHub：https://github.com/apache/echarts
点击 Code → Download ZIP
解压后，在 dist/ 目录下找到 echarts.min.js
在 HTML 中引入本地文件：

<script src="./echarts.min.js"></script>

四、常用图表示例

1. 柱状图

var option = {
    title: { text: '各品牌手机销量' },
    tooltip: {},
    xAxis: { data: ['苹果', '华为', '小米', 'OPPO', 'vivo'] },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [500, 450, 400, 380, 350],
        // 自定义颜色
        itemStyle: { color: '#5470c6' }
    }]
};

2. 折线图

var option = {
    title: { text: '近7日气温变化' },
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
    yAxis: { type: 'value' },
    series: [{
        name: '气温',
        type: 'line',
        data: [22, 24, 26, 23, 25, 28, 30],
        smooth: true,  // 平滑曲线
        areaStyle: {}  // 填充区域
    }]
};

3. 饼图

var option = {
    title: { text: '市场份额分布' },
    tooltip: { trigger: 'item' },
    legend: { orient: 'vertical', left: 'left' },
    series: [{
        name: '市场份额',
        type: 'pie',
        radius: '50%',
        data: [
            { value: 35, name: '华为' },
            { value: 25, name: '苹果' },
            { value: 20, name: '小米' },
            { value: 15, name: 'OPPO' },
            { value: 5, name: '其他' }
        ],
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

4. 散点图

var option = {
    title: { text: '身高体重分布' },
    tooltip: { trigger: 'item' },
    xAxis: { name: '身高(cm)' },
    yAxis: { name: '体重(kg)' },
    series: [{
        type: 'scatter',
        data: [
            [160, 55], [165, 60], [170, 65], [175, 70],
            [180, 75], [185, 80], [190, 85], [195, 90]
        ],
        symbolSize: 15,
        itemStyle: { color: '#91cc75' }
    }]
};

5. 地图（需要额外引入地图数据）

// 引入中国地图数据
$.get('https://raw.githubusercontent.com/apache/echarts-examples/gh-pages/public/data/asset/geo/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    
    var option = {
        title: { text: '中国人口分布' },
        tooltip: {},
        visualMap: {
            min: 0,
            max: 10000,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            calculable: true
        },
        series: [{
            name: '人口',
            type: 'map',
            map: 'china',
            roam: true,
            emphasis: { label: { show: true } },
            data: [
                { name: '广东省', value: 12601 },
                { name: '山东省', value: 10153 },
                { name: '河南省', value: 9883 },
                { name: '四川省', value: 8367 },
                { name: '江苏省', value: 8475 }
            ]
        }]
    };
});

五、ECharts 与主流框架集成

Vue 3 中使用 ECharts

# 安装 echarts-for-vue3
npm install vue-echarts --save

<template>
  <v-chart :option="option" autoresize />
</template>

<script setup>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import VChart from 'vue-echarts'

use([CanvasRenderer, BarChart])

const option = {
    xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] },
    yAxis: { type: 'value' },
    series: [{ type: 'bar', data: [10, 20, 30, 40, 50] }]
}
</script>

React 中使用 ECharts

npm install echarts-for-react --save

import ReactECharts from 'echarts-for-react';

function MyChart() {
    const option = {
        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
        yAxis: { type: 'value' },
        series: [{ type: 'line', data: [5, 8, 12, 7, 10] }]
    };
    
    return <ReactECharts option={option} style={{ height: 400 }} />;
}

六、常见问题解答

❓ ECharts 收费吗？

不收费！ ECharts 是 Apache 2.0 开源协议，完全免费使用。任何”收费版”“企业版”的说法都是第三方包装，请注意辨别。

❓ 支持哪些浏览器？

ECharts 支持所有现代浏览器，包括：

Chrome
Firefox
Safari
Edge
IE10+（IE9 及以上）

❓ 如何减少打包体积？

使用按需引入方式，只引入需要的图表类型和组件：

import echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent } from 'echarts/components';

❓ 有中文文档吗？

有！官方文档地址：

https://echarts.apache.org/handbook/zh/get-started/

❓ 示例在哪里找？

官方示例中心：

https://echarts.apache.org/examples/zh/index.html

七、最佳实践建议

1. 按需引入，减少体积

不要一次性引入全部 ECharts，而是只引入需要的部分：

// ✅ 推荐：按需引入
import echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';

// ❌ 不推荐：完整引入（体积大）
import * as echarts from 'echarts';

2. 合理设置图表大小

确保容器有明确的高度和宽度：

<div id="main" style="width: 100%; height: 400px;"></div>

3. 响应式适配

使用 autoresize 或监听窗口变化：

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

4. 使用 TypeScript 时安装类型定义

npm install @types/echarts --save-dev

八、总结

特性	说明
费用	完全免费
开源协议	Apache 2.0
适用场景	数据可视化、仪表盘、报表、大屏展示
学习成本	低，文档完善
社区活跃度	高，GitHub Star 数 45k+
适合人群	前端开发者、数据分析师、产品经理

💡 小贴士：
如果你是初学者，建议先从 CDN 引入 方式开始，快速搭建第一个图表。熟悉后，再根据项目需求选择 npm 安装或按需引入。

官方学习路径：

访问 https://echarts.apache.org/examples/ 浏览示例
复制示例代码，修改数据，观察效果
阅读文档 https://echarts.apache.org/handbook/zh/ 深入了解

祝你使用 ECharts 愉快！🎉

正文