ECharts 图表示例集

Mon, 01 Jan 0001 00:00:00 +0000

本页示例只使用结构化 YAML，不需要回调代码，因此处于最简单的 ECharts 创作与审查边界内。所有数字均为演示数据。

复用数据集

ECharts dataset 把记录与视觉编码分开。序列可以按名称引用维度，比重复维护多组平行数组更容易审查。

从数据集创建柱状图

{{< echarts height="320px" >}}
dataset:
  source:
    - [stage, minutes]
    - [草稿, 18]
    - [评审, 11]
    - [发布, 4]
xAxis: { type: category }
yAxis: { type: value, name: 分钟 }
series:
  - type: bar
    encode: { x: stage, y: minutes }
{{< /echarts >}}

示例表示中位耗时从撰写草稿的 18 分钟，逐步下降到发布阶段的 4 分钟。

折线与面积对比

多个序列描述同一组时间区间时，可以共用分类轴。面积填充突出总量，折线则保留各序列的趋势。

ECharts 回调与可信代码

Mon, 01 Jan 0001 00:00:00 +0000

大多数 ECharts 选项都应保持为声明式 JSON 或 YAML。自定义格式化器、数据驱动样式等合法选项需要函数时，Oink 可以通过 JavaScript 围栏代码块与 $fn:name 引用支持这些场景。

可信作者边界

回调代码会在每位访问者的浏览器中执行，拥有页面同源环境下的常规 JavaScript 权限。Oink 会安全序列化结构化图表选项，但不会沙箱隔离作者提供的回调。只有可信的项目作者才能添加或审查这类代码。

短代码会输出行内注册脚本，因此回调还可能改变站点的内容安全策略（CSP）要求。能够用声明式选项表达同一行为时，请不要使用回调。

注册并引用函数

在短代码中加入一个或多个 js 或 javascript 围栏。使用具名 var、let、const 赋值或函数声明定义每个函数，再从 YAML 或 JSON 中通过 $fn:name 引用。

{{< echarts height="320px" >}}
```js
var formatMinutes = function (value) {
  return value + ' 分钟';
};
```

```yaml
yAxis:
  type: value
  axisLabel: { formatter: $fn:formatMinutes }
```
{{< /echarts >}}

Oink 会先移除 JavaScript 围栏，再解析剩余选项；初始化图表时注册具名函数，并在调用 chart.setOption() 前替换 $fn:name 值。