在 Hexo 博客中插入 ECharts 动态图表

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

插入 ECharts 动态图表

在 12 Best Charting Libraries for Web Developers - Christopher Watkins 一文中，博主 Christopher Watkins 向我们介绍了 12 款为网页开发者推荐的绘图库。其中不乏大名鼎鼎的 Google Charts，D3.js 和 HighCharts 这样的富图表库，还有不少其他的特型图表库，它们在展示某些特定的图表时，非常出色。百度开发维护的 ECharts 当然也在其中。

ECharts 作为国产工具，在语言上对中文开发者有着天然的优势，官方文档对每一个细节、参数、配置都有详尽的说明，对于新手非常的友好。另外一个重要的方面，就是 ECharts 的图表颜值很高，默认的主题和配色可以呈现出优雅漂亮的图表。所以，我也一直选择 ECharts 作为我的网页图表绘图工具。

ECharts官网教程-5 分钟上手 ECharts

Hexo 中的 ECharts

本博客（matery 主题）已内置 ECharts tag 插件（2026-09-03 统一），无需安装任何 npm 插件。

1. 启用 ECharts

在文章 front-matter 中加 echarts: true（加载主题 libs 中的 echarts 6.1.0 + echarts-gl 2.1.0）：

---
title: 在 Hexo 博客中插入 ECharts 动态图表
echarts: true
---

ECharts 官网教程的 npm install echarts --save 并不适合 hexo 博客，主题已统一管理 libs 版本，无需手动引入 CDN。

2. 在文章中插入图表

使用 {% echarts %} 标签，格式如下：

{% echarts 宽 高 %}
{
  "title": {"text": "示例图表"},
  "xAxis": {"type": "category", "data": ["A", "B", "C"]},
  "yAxis": {"type": "value"},
  "series": [{"type": "line", "data": [1, 2, 3]}]
}
{% endecharts %}

{% echarts %} 与 {% endecharts %} 之间是 ECharts 的 option 配置（JSON 格式）
首参为宽度（默认 100%，支持 %/px，如 '85%'），次参为高度（默认 400px，如 400）
参数可选：{% echarts %}（默认宽 100%、高 400px）、{% echarts '85%' 400 %}（宽 85%、高 400px）
明暗模式自动适配（图表随主题切换重建）
echarts 6 要求 xAxis/yAxis 显式声明 type（category/value）

3. option 常用配置

title：标题组件，包含主标题和副标题。
legend：图例组件。
tooltip：提示框组件。
toolbox：工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
xAxis、yAxis：直角坐标系 grid 中的 x 轴、y轴。
series：系列列表。每个系列通过type决定自己的图表类型。
- series-line：折线/面积图
- series-bar：柱状/条形图
- series-pie：饼图
- series-scatter：散点图
- series-radar：雷达图
- series-tree：树图
- series-boxplot：箱形图
- series-candlestick：K线图
- series-heatmap：热力图
- series-graph：关系图
多个图表的数据和函数可能会冲突，请注意！
3D/GL 图表（如 grid3D、globe）可直接在 option 中使用（echarts-gl 已随 libs 加载）
直接在 html 中绘制，然后用<iframe></iframe>展示效果更佳（html 文件放 source/html-file/，通过 skip_render 原样复制）。关于 hexo 的 html 文件渲染问题，可以参考Fluid+自定义html，主要是去掉head部分的说明。
在 html 绘图 ECharts 的格式如下：

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  // 指定图表的配置项和数据
  var option = {
    ...
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  // 刷新调整
  window.onresize = function () {
    myChart.resize();
  }
</script>Copy

部分 echart 需要引入其他 js，如bmap、jquery等，请自行添加。
使用百度地图的 api 需要申请密钥(ak)，使用格式如下，注意替换FAKE_AK。

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=FAKE_AK"></script>
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=2.0&ak=FAKE_AK"></script>Copy

实例

下面给出一些echarts官方实例，大多数都可以交互。

饼图Pie

Texture on Pie Chart

地理坐标/地图GEO/Map

Air Quality - Baidu Map

可进入页面查看

K 线图Candlestick

Candlestick Brush

可进入页面查看

雷达图Radar

Proportion of Browsers

关系图Graph

Graph Webkit Dep

可进入页面查看

树图Tree

Multiple Trees

日历坐标系Calendar

Calendar Heatmap Horizontal

3D

Bar3D - Simplex Noise

可进入页面查看

Surface Wave

pyecharts

py + echarts = pyecharts

是什么

Echarts 是一个由百度开源的数据可视化，凭借着良好的交互性，精巧的图表设计，得到了众多开发者的认可。而 Python 是一门富有表达力的语言，很适合用于数据处理。当数据分析遇上数据可视化时，pyecharts 诞生了。

怎么用–py或jupyter

pip 安装

$ pip install pyecharts -U

生成 HTML

from pyecharts.charts import Bar
from pyecharts import options as opts

# V1 版本开始支持链式调用
bar = (
    Bar()
    .add_xaxis(["衬衫", "毛衣", "领带", "裤子", "风衣", "高跟鞋", "袜子"])
    .add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105])
    .add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49])
    .set_global_opts(title_opts=opts.TitleOpts(title="某商场销售情况"))
)
bar.render()

# 不习惯链式调用的开发者依旧可以单独调用方法
bar = Bar()
bar.add_xaxis(["衬衫", "毛衣", "领带", "裤子", "风衣", "高跟鞋", "袜子"])
bar.add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105])
bar.add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49])
bar.set_global_opts(title_opts=opts.TitleOpts(title="某商场销售情况"))
bar.render()