正文

echarts图表插件官方免费下载教程 含最新源码与文档详解

/0 浏览量
0910

哎，说实话，刚接触数据可视化的时候，我也被那些花里胡哨的Echarts配置项吓退过。什么series、yAxis、tooltip，看着头大。但当你真正掌握它之后，你会发现这玩意儿简直就是前端开发者的“外挂”。今天我不给你整那些教科书式的开场白，咱们直接干点实际的。我会带你从怎么把Echarts“请”进你的项目，到怎么读懂它的官方文档，再到怎么写出那些让人眼前一亮的图表，这一路我走过的坑，都帮你填平了。

先把“利器”带回家：三种入门姿势

很多人第一步就卡住了，不知道Echarts到底该怎么引入。其实这就跟买工具一样，看你用得多频繁、项目多大。

第一种：最快上手，CDN直接引。

如果你只是想快速做个Demo，或者网页结构简单，不用Webpack、不用Vite，那直接把这段代码扔进你的HTML <head> 里就行。这是最省心的办法，不用管版本管理，打开网页就能用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <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>
</body>
</html>

注意：上面的版本号 5.4.3 只是示例，去官网下载时记得选最新的。

第二种：现代项目标配，npm安装。

现在谁还在用纯HTML做项目啊？肯定是Vue、React或者Angular。这时候npm就是你的好朋友。在终端里敲一行命令：

npm install echarts --save

或者你用Yarn：

yarn add echarts

装完之后，在你的组件里引入：

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

你可能会问：“老师，为啥这么麻烦？直接import echarts from 'echarts'不香吗？”

香是真香，但是体积大啊！Echarts打包出来好几兆，你页面里只用了一个饼图，结果把折线、地图、关系图全打包进去了，这不是浪费流量吗？这种“按需引入”的方式，能让你把包体积压到最小，加载速度嗖嗖的。

第三种：离线开发，下载源码。

有些公司内网开发，不能访问外网CDN怎么办？或者你就是喜欢把代码握在自己手里。去Echarts的GitHub或者官网下载页面，把那个几百兆的ZIP包下载下来，解压，找到dist/echarts.js或者dist/echarts.min.js，拷到你的项目里引用就行。这种方式最稳妥，完全可控。

别光看不练，先跑通第一个“Hello World”

光知道怎么引入没用，你得让它动起来吧。我们写一个最简单的柱状图，这是入门必做的第一个实验。

在你的HTML body里，先画一个容器：

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

然后用JavaScript初始化它：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 指定配置项和数据
var option = {
  // 标题，点击可以联动
  title: {
    text: '本周销售额统计'
  },
  // 提示框组件，鼠标悬停时显示详细数据
  tooltip: {},
  // 图例，显示在右上角
  legend: {
    data: ['销量']
  },
  // 直角坐标系X轴
  xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
  },
  // 直角坐标系Y轴
  yAxis: {},
  // 系列列表，每个系列通过 type 决定自己的图表类型
  series: [{
    name: '销量',
    type: 'bar', // 柱状图
    data: [5, 20, 36, 10, 10, 20]
  }]
};

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

看着这段代码，是不是有点眼熟了？title、tooltip、legend、xAxis、yAxis、series，这就是Echarts配置项的“骨架”。你以后写的复杂图表，90%的内容都是在这几个属性里填肉。

这里我要特别强调一下series这个属性。很多新手在这上面栽跟头。series是一个数组，里面可以放多个系列。比如你想在一个图里同时画柱状图和折线图，就这么写：

series: [
  {
    name: '蒸发量',
    type: 'bar',
    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
  },
  {
    name: '降水量',
    type: 'line', // 折线图
    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
  }
]

看到了吗？type不同，图表类型就不同。你可以在一个坐标系里混排多种图表，这就是Echarts的强大之处。

读懂官方文档：别把它当词典，当“菜谱”

现在网上教程五花八门，但我强烈建议：遇到问题，首先去官网看文档。不是让你从头到尾读，那是闲得慌。你要学会“查菜谱”。

Echarts的官方文档地址是 https://echarts.apache.org/zh/index.html。

我教你一个高效的查阅姿势：

1. 先看实例，别先看配置项。

文档左边有个“实例”菜单，里面有几百个例子，折线图、柱状图、饼图、散点图、地图、三维图、关系图……几乎你能想到的图表类型都有。

你直接点开一个你觉得“哎，这个样子挺好看”的例子，比如“动态数据+时间坐标轴”。右边会显示完整的配置代码。你不用猜它是怎么实现的，直接复制过来，改改数据，看看效果。这种“逆向工程”的学习方式，比死记硬背配置项快十倍。

2. 配置项手册怎么查？

当你想知道某个属性叫什么名字时，去“配置项手册”里搜。比如你想让饼图的某一块扇区凸出来，形成“爆炸”效果，你该搜什么关键词？

别在那儿乱猜explode、highlight、radius的。直接搜“饼图”或者看饼图的实例，你会发现有一个属性叫roseType，里面有 'angle' 和 'area' 两种模式。area 模式就是那种扇区半径随数据大小变化的南丁格尔玫瑰图。

3. 记住两个核心对象：Option 和 Series。

  • Option：整个图表的全局配置。标题、图例、提示框、坐标轴、数据区域缩放……都在这。
  • Series：系列数据。这才是图表的核心，决定了画什么类型的图、画什么数据。

你所有的配置，基本就是在组装这两个对象。

避坑指南：新手必踩的三个雷

雷区一：图表不显示，一片空白。

这是最常见的问题。99%的情况是因为你没给容器设置高度。

<div id="chart"></div>

这个div没有宽高，Echarts怎么知道往哪儿画？必须给它明确的高度：

#chart {
  width: 100%;
  height: 400px;
}

或者直接在行内样式里写。记住，Echarts容器必须有宽高，这是死规矩。

雷区二：图表显示不全，或者尺寸不对。

这通常发生在响应式布局或者动态加载数据的场景。

比如你的图表放在一个弹窗里，弹窗没显示出来你就初始化图表，或者弹窗打开后容器宽度发生了变化，图表还是原来的大小。

解决办法：监听窗口大小变化，动态调用resize()方法：

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

如果图表是在异步数据回来后初始化的，确保在数据到达、DOM渲染完成后，再调用setOption。

雷区三：样式错乱，颜色对不上。

Echarts有默认的主题（light和dark）。如果你发现颜色跟你想的不一样，先去文档里找找theme配置，或者在初始化时指定主题：

var myChart = echarts.init(dom, 'dark');

另外，很多属性是分层的。比如xAxis.axisLine.lineStyle.color，你得一层一层写对，少一层就不生效。新手最容易犯的错误就是把color直接写在axisLine下面，结果发现没反应。

进阶玩法：让你的图表“活”起来

基础图表谁都写得出来，真正体现水平的是交互和动态效果。

1. 数据动态更新

想象一下，你要做一个实时监控大屏，数据每秒钟都在变。你不需要销毁图表再重建，只需要调用setOption更新数据：

// 假设每秒钟生成一个新数据
setInterval(function () {
  var data = [];
  for (var i = 0; i < 10; i++) {
    data.push(Math.round(Math.random() * 1000));
  }
  myChart.setOption({
    series: [{
      data: data
    }]
  });
}, 1000);

这样图表就会平滑地过渡到新数据，视觉效果非常流畅。

2. 自定义Tooltip，展示更多信息

默认的tooltip只显示标题和数值。如果你想在鼠标悬停时，显示更丰富的信息，比如百分比、增长率、甚至一张小图片，你可以自定义tooltip.formatter。

tooltip: {
  trigger: 'axis',
  formatter: function (params) {
    // params 是一个数组，包含当前所有系列的数据
    var res = params[0].name + '<br/>';
    params.forEach(function (item) {
      res += item.marker + item.seriesName + ' : ' + item.value + ' 人<br/>';
    });
    return res;
  }
}

item.marker 是那个彩色的小圆点，item.seriesName 是系列名，item.value 是数值。你可以自由组装这个字符串，甚至在里面插入HTML标签，比如加粗、变色、加图片。

3. 图表联动

如果你有多个图表，希望点击其中一个图表的某个数据项，其他图表也跟着高亮或筛选，这就是联动。

核心思路是：监听点击事件，获取数据，然后控制其他图表的选项。

// 图表1的点击事件
myChart1.on('click', function (params) {
  // params.name 是点击的数据项名称
  myChart2.setOption({
    series: [{
      // 只展示点击的那一项
      data: [params.value] 
    }]
  });
});

这种联动效果在仪表盘、大屏展示中非常常见，能极大提升用户体验。

源码与文档：去哪里找最权威的？

我知道你肯定想找源码下载，担心网上下的有后门或者版本过时。别急，我给你指最正的路。

1. ECharts 官方文档中心 地址：https://echarts.apache.org/zh/index.html 这里不仅有API文档，还有“示例”，每个示例下面都有“查看代码”按钮，你可以直接看到完整的配置项代码。这是学习Echarts最好的地方，没有之一。

2. GitHub 官方仓库 地址：https://github.com/apache/echarts 如果你想看源码，或者下载最新版本的包，来这里。GitHub上你可以看到所有的Issue和Pull Request，如果遇到问题，说不定能在这里找到答案。

3. Apache ECharts 官网 地址：https://echarts.apache.org/ 这是Apache基金会的官方站点，稳定、可靠。从这里下载的版本是最纯净的。

下载建议：

  • 开发环境：用npm安装，方便版本管理。
  • 生产环境：推荐用CDN或下载到本地，避免依赖网络波动。
  • 研究源码：直接去GitHub clone整个仓库，里面有个src目录，结构清晰，很适合想深入理解实现原理的同学。

最后，给你的几个实用建议

  1. 不要试图记住所有配置。Echarts的配置项太多了，几百个。你记不住的，也没必要记。学会查文档，比背文档重要一万倍。
  2. 善用开发者工具。Chrome的F12开发者工具，特别是Elements和Console面板，能帮你快速定位样式问题。
  3. 多模仿，少从零写。看到一个好看的图表，先去官网实例里找找有没有类似的。大部分时候，你需要的图表，别人已经做过了。
  4. 注意性能。图表数据量很大时（比如几千个点），注意开启large: true，或者使用sampling: 'lttb'进行采样，否则页面会卡。
  5. 保持更新。Echarts更新很快，新版本会有性能优化和新特性。尽量用较新的版本，避免踩老版本的坑。

好了，今天的分享就到这里。Echarts这东西，入门简单，精通难。但只要你愿意动手，多写几个Demo，多看几个官方例子，你一定能成为图表可视化的高手。别光看不练，打开你的编辑器，把上面的代码敲一遍吧！加油！

-- 展开阅读全文 --