narrative-text-visualization

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Narrative Text Visualization Skill

叙事文本可视化技能

This skill provides a workflow for transforming data into structured narrative text visualizations using T8 Syntax - a declarative Markdown-like language for creating data narratives with semantic entity annotations.

本技能提供了一套工作流，可使用T8 Syntax将数据转换为结构化叙事文本可视化。T8 Syntax是一种类Markdown的声明式语言，用于创建带有语义实体标注的数据叙事内容。

What is T8

什么是T8

T8 is a text visualization solution under the AntV technology stack designed specifically for insight-based narrative text display. Instead of manually constructing DOM elements, you write simple, human-readable syntax that describes your data narrative.

Key Features:

LLM-Friendly: The syntax is intuitive and can be easily generated by AI models
Declarative & Readable: Write what you want, not how to build it
Framework Agnostic: Works with React, Vue, or vanilla JavaScript
Standardized Styling: Professional appearance by default
Built-in Data Visualizations: Mini charts (pie, line) are native to the syntax
Lightweight: Less than 20KB before gzip

T8是AntV技术栈下的一款文本可视化解决方案，专为基于洞察的叙事文本展示设计。无需手动构建DOM元素，只需编写简单易懂的语法来描述你的数据叙事内容。

核心特性：

LLM友好：语法直观，可轻松由AI模型生成
声明式且易读：只需描述想要的效果，无需关注实现细节
框架无关：支持React、Vue或原生JavaScript
标准化样式：默认提供专业外观
内置数据可视化：语法原生支持迷你图表（饼图、折线图）
轻量小巧：gzip前体积不足20KB

Workflow

工作流

To generate narrative text visualizations, follow these steps:

要生成叙事文本可视化，请遵循以下步骤：

1. Understand the Requirements

1. 理解需求

Analyze the user's request to determine:

The topic or data to be analyzed
The type of narrative needed (report, summary, article)
The key insights to highlight
Any specific data sources or metrics

分析用户的请求，确定：

要分析的主题或数据
所需的叙事类型（报告、摘要、文章）
需要突出的核心洞察
任何特定的数据源或指标

2. Generate T8 Syntax Content

2. 生成T8语法内容

Create narrative text using T8 Syntax following the specification below. The content must include:

Proper document structure (headings, paragraphs, lists)
Entity annotations for all meaningful data points
Appropriate metadata for entities (origin, assessment, etc.)

按照以下规范使用T8 Syntax创建叙事文本。内容必须包含：

正确的文档结构（标题、段落、列表）
对所有有意义的数据点进行实体标注
实体的适当元数据（来源、评估等）

3. Generate Frontend Code

3. 生成前端代码

Create HTML, React, or Vue code to render the T8 content based on user's preferred framework.

根据用户偏好的框架，创建用于渲染T8内容的HTML、React或Vue代码。

4. Validate Output

4. 验证输出

Ensure:

All data is from authentic sources
Minimum content length (800 words or equivalent)
Proper entity annotations throughout
Clear structure and logical flow

确保：

所有数据均来自可信来源
内容长度符合最低要求（800字或等效内容）
全程使用正确的实体标注
结构清晰、逻辑连贯

T8 Syntax Specification

T8语法规范

T8 Syntax is a Markdown-like language for creating narrative text with semantic entity annotations. It makes data analysis reports more expressive and visually appealing.

T8 Syntax是一种类Markdown的语言，用于创建带有语义实体标注的叙事文本，让数据分析报告更具表现力和视觉吸引力。

Document Structure

文档结构

Headings (6 levels)

标题（6级）

Use standard Markdown heading syntax:

undefined

使用标准Markdown标题语法：

undefined

Level 1 Heading (Main Title)

一级标题（主标题）

Level 2 Heading (Section)

二级标题（章节）

Level 3 Heading (Subsection)

三级标题（小节）

Level 4 Heading

四级标题

Level 5 Heading

五级标题

Level 6 Heading

六级标题


**Rules:**
- Each heading must be on its own line
- Add one space after the `#` symbols
- Headings create visual hierarchy in the rendered output


**规则：**
- 每个标题必须单独占一行
- `#`符号后需添加一个空格
- 标题会在渲染后的输出中创建视觉层级

Paragraphs

段落

Regular text paragraphs are separated by blank lines:

This is the first paragraph with some content.

This is the second paragraph, separated by a blank line.

Rules:

Paragraphs can span multiple lines
Use blank lines to separate distinct paragraphs
Text within a paragraph flows naturally

普通文本段落通过空行分隔：

这是第一段内容。

这是第二段内容，与第一段通过空行分隔。

规则：

段落可跨多行
使用空行分隔不同段落
段落内的文本自然换行

Lists

列表

T8 Syntax supports both unordered and ordered lists.

Unordered Lists:

- First item
- Second item
- Third item

Ordered Lists:

1. First step
2. Second step
3. Third step

Rules:

Each list item must be on its own line
Add one space after the bullet marker (
```
-
```
,
```
*
```
) or number
Lists can contain entities and text formatting

T8 Syntax支持无序列表和有序列表。

无序列表：

- 第一项
- 第二项
- 第三项

有序列表：

1. 第一步
2. 第二步
3. 第三步

规则：

每个列表项必须单独占一行
项目符号（
```
-
```
、
```
*
```
）或数字后需添加一个空格
列表可包含实体和文本格式

Text Formatting

文本格式

T8 Syntax supports inline text formatting using Markdown syntax:

Bold Text:

This is **bold text** that stands out.

Italic Text:

This is *italic text* for emphasis.

Underline Text:

This is __underlined text__ for importance.

Links:

Visit [our website](https://example.com) for more information.

Rules:

Formatting markers must be balanced (opening and closing)
Formatting can be combined with entities
Links use
```
[text](URL)
```
syntax where URL starts with
```
http://
```
,
```
https://
```
, or
```
/
```

T8 Syntax支持使用Markdown语法进行行内文本格式化：

粗体文本：

这是**粗体文本**，用于突出显示。

斜体文本：

这是*斜体文本*，用于强调。

下划线文本：

这是__下划线文本__，表示重要性。

链接：

访问[我们的网站](https://example.com)了解更多信息。

规则：

格式标记必须成对出现（开头和结尾）
格式可与实体结合使用
链接使用
```
[文本](URL)
```
语法，其中URL需以
```
http://
```
、
```
https://
```
或
```
/
```
开头

Entity Annotation Syntax

实体标注语法

The core feature of T8 Syntax is entity annotation - marking specific data points with semantic meaning and metadata.

T8 Syntax的核心特性是实体标注——为特定数据点标记语义含义和元数据。

Basic Entity Syntax

基础实体语法

[displayText](entityType)

```
displayText
```
: The text shown to readers
```
entityType
```
: The semantic type of this entity

Example:

The [sales revenue](metric_name) reached [¥1.5 million](metric_value) this quarter.

[显示文本](实体类型)

```
显示文本
```
：展示给读者的文本
```
实体类型
```
：该实体的语义类型

示例：

本季度的[销售收入](metric_name)达到了[150万元](metric_value)。

Entity with Metadata

带元数据的实体

[displayText](entityType, key1=value1, key2=value2, key3="string value")

Metadata Rules:

Separate multiple metadata fields with commas
Numbers and booleans: write directly (e.g.,
```
origin=1500000
```
,
```
active=true
```
)
Strings: wrap in double quotes (e.g.,
```
unit="元"
```
,
```
region="Asia"
```
)

Example:

Revenue grew by [15.3%](ratio_value, origin=0.153, assessment="positive") compared to last year.

[显示文本](实体类型, key1=value1, key2=value2, key3="字符串值")

元数据规则：

多个元数据字段用逗号分隔
数字和布尔值：直接书写（例如：
```
origin=1500000
```
、
```
active=true
```
）
字符串：用双引号包裹（例如：
```
unit="元"
```
、
```
region="亚洲"
```
）

示例：

与去年相比，收入增长了[15.3%](ratio_value, origin=0.153, assessment="positive")。

Entity Types Reference

实体类型参考

Use these entity types to annotate different kinds of data:

Entity Type	Description	When to Use	Examples
`metric_name`	Name of a metric or KPI	When mentioning what you're measuring	"revenue", "user count", "market share"
`metric_value`	Primary metric value	The main number/value being reported	"¥1.5 million", "50,000 users", "250 units"
`other_metric_value`	Secondary or supporting metric value	Additional metrics that provide context	"average order value: $120"
`delta_value`	Absolute change/difference	When showing numeric change between periods	"+1,200 units", "-$50K", "increased by 500"
`ratio_value`	Percentage change/rate	When showing percentage change	"+15.3%", "-5.2%", "grew 23%"
`contribute_ratio`	Contribution percentage	When showing what % something contributes	"accounts for 45%", "represents 30% of total"
`trend_desc`	Trend description	Describing direction/pattern of change	"steadily rising", "declining trend", "stable"
`dim_value`	Dimensional value/category	Geographic, categorical, or segmentation data	"North America", "Enterprise segment", "Q3"
`time_desc`	Time period or timestamp	When specifying when something occurred	"Q3 2024", "January-March", "fiscal year 2023"
`proportion`	Proportion or ratio	When expressing parts of a whole	"3 out of 5", "60% of customers"
`rank`	Ranking or position	When indicating order or position in a list	"ranked 1st", "top 3", "5th place"
`difference`	Comparative difference	When highlighting difference between two items	"difference of $50K", "gap of 200 units"
`anomaly`	Unusual or unexpected value	When pointing out outliers or anomalies	"unusual spike", "unexpected drop"
`association`	Relationship or correlation	When describing connections between metrics	"strongly correlated", "linked to", "related"
`distribution`	Data distribution pattern	When describing how data is spread	"evenly distributed", "concentrated in", "spread across"
`seasonality`	Seasonal pattern or trend	When describing recurring seasonal patterns	"seasonal peak", "holiday period", "Q4 surge"

使用以下实体类型标注不同类型的数据：

实体类型	描述	适用场景	示例
`metric_name`	指标或KPI的名称	提及要衡量的对象时使用	"收入"、"用户数量"、"市场份额"
`metric_value`	主要指标值	报告的核心数字/值	"150万元"、"50,000用户"、"250台"
`other_metric_value`	次要或辅助指标值	提供上下文的附加指标	"平均订单价值：120美元"
`delta_value`	绝对变化/差值	展示不同时期的数值变化时使用	"增加1200台"、"减少5万美元"、"增长500"
`ratio_value`	百分比变化/比率	展示百分比变化时使用	"增长15.3%"、"下降5.2%"、"增长23%"
`contribute_ratio`	贡献百分比	展示某部分占整体的百分比时使用	"占比45%"、"占总销售额的30%"
`trend_desc`	趋势描述	描述变化方向/模式时使用	"稳步上升"、"下降趋势"、"稳定"
`dim_value`	维度值/分类	地理、分类或细分数据	"北美"、"企业细分市场"、"第三季度"
`time_desc`	时间段或时间戳	指定事件发生时间时使用	"2024年第三季度"、"1-3月"、"2023财年"
`proportion`	比例或比率	表示整体中的部分时使用	"5分之3"、"60%的客户"
`rank`	排名或位置	表示列表中的顺序或位置时使用	"排名第一"、"前三名"、"第五名"
`difference`	比较差值	突出两个项目之间的差异时使用	"差值5万美元"、"差距200台"
`anomaly`	异常或意外值	指出异常值或离群点时使用	"异常峰值"、"意外下降"
`association`	关系或相关性	描述指标之间的关联时使用	"高度相关"、"与...相关"、"有关联"
`distribution`	数据分布模式	描述数据分布情况时使用	"均匀分布"、"集中在"、"分布于"
`seasonality`	季节性模式或趋势	描述重复出现的季节性模式时使用	"季节性峰值"、"假期时段"、"第四季度激增"

Common Metadata Fields

常见元数据字段

Add these optional fields to provide richer data context:

添加以下可选字段以提供更丰富的数据上下文：

origin

(number)

origin

（数字）

The raw numerical value behind the displayed text.

Examples:

```
[¥1.5M](metric_value, origin=1500000)
```
```
[23.7%](ratio_value, origin=0.237)
```
```
[5.2K users](metric_value, origin=5200)
```
```
[3 out of 4](proportion, origin=0.75)
```

Why use it: Enables data visualization, sorting, and calculations

显示文本背后的原始数值。

示例：

[150万元](metric_value, origin=1500000)

```
[23.7%](ratio_value, origin=0.237)
```
```
[5.2K用户](metric_value, origin=5200)
```
```
[4分之3](proportion, origin=0.75)
```

使用原因： 支持数据可视化、排序和计算

assessment

(string)

assessment

（字符串）

Evaluates whether a change is positive, negative, or neutral.

Valid values:

"positive"

"negative"

"equal"

"neutral"

Examples:

[increased 15%](ratio_value, assessment="positive")

[dropped 8%](ratio_value, assessment="negative")

[remained flat](trend_desc, assessment="equal")

Why use it: Enables visual indicators (colors, icons) for good/bad trends

评估变化是积极、消极还是中性。

有效值：

"positive"

、

"negative"

、

"equal"

、

"neutral"

示例：

[增长15%](ratio_value, assessment="positive")

[下降8%](ratio_value, assessment="negative")

[保持平稳](trend_desc, assessment="equal")

使用原因： 为趋势的好坏提供视觉指示（颜色、图标）

unit

(string)

unit

（字符串）

The unit of measurement for the value.

Examples:

[¥1,500,000](metric_value, unit="元", origin=1500000)

```
[150](metric_value, unit="units")
```

数值的计量单位。

示例：

[1,500,000元](metric_value, unit="元", origin=1500000)

```
[150](metric_value, unit="台")
```

detail

(any)

detail

（任意类型）

Additional context or breakdown data for chart rendering. Required for certain entity types.

Required for these entity types:

rank

: Array of numbers representing ranking data

Example:

[top performer](rank, detail=[5, 8, 12, 15, 20])

difference

: Array of numbers showing comparative values

Example:

[gap narrowing](difference, detail=[100, 80, 60, 40])

anomaly

: Array of numbers highlighting outliers

Example:

[unusual spike](anomaly, detail=[10, 12, 11, 45, 13])

association

: Array of {x, y} objects for correlation data

Example:

[strong correlation](association, detail=[{"x":1,"y":2},{"x":2,"y":4},{"x":3,"y":6}])

distribution

: Array of numbers showing data spread

Example:

[uneven distribution](distribution, detail=[5, 15, 45, 25, 10])

seasonality

: Object with data array and optional range

Example:

[Q4 peak](seasonality, detail={"data":[10,12,15,30],"range":[0,40]})

Optional for other types:

[steady growth](trend_desc, detail=[100, 120, 145, 180, 210])

用于图表渲染的附加上下文或细分数据，某些实体类型为必填项。

以下实体类型必填：

rank

：代表排名数据的数字数组

示例：

[顶级表现者](rank, detail=[5, 8, 12, 15, 20])

difference

：显示比较值的数字数组

示例：

[差距缩小](difference, detail=[100, 80, 60, 40])

anomaly

：突出异常值的数字数组

示例：

[异常峰值](anomaly, detail=[10, 12, 11, 45, 13])

association

：用于相关性数据的{x, y}对象数组

示例：

[高度相关](association, detail=[{"x":1,"y":2},{"x":2,"y":4},{"x":3,"y":6}])

distribution

：显示数据分布的数字数组

示例：

[不均匀分布](distribution, detail=[5, 15, 45, 25, 10])

seasonality

：包含数据数组和可选范围的对象

示例：

[第四季度峰值](seasonality, detail={"data":[10,12,15,30],"range":[0,40]})

其他类型可选：

[稳步增长](trend_desc, detail=[100, 120, 145, 180, 210])

Data Requirements

数据要求

Critical: All data must be from publicly authentic sources:

Official announcements/financial reports
Authoritative media (Reuters, Bloomberg, TechCrunch, etc.)
Industry research institutions (IDC, Canalys, Counterpoint Research, etc.)
Never use fictional, AI-guessed, or simulated data
Use specific numbers (e.g., "146 million units", "7058 units"), not vague approximations

关键要求：所有数据必须来自公开可信来源：

官方公告/财务报告
权威媒体（路透社、彭博社、TechCrunch等）
行业研究机构（IDC、Canalys、Counterpoint Research等）
禁止使用虚构、AI生成或模拟的数据
使用具体数字（例如："1.46亿台"、"7058台"），避免模糊的近似值

Complete T8 Syntax Example

完整T8语法示例

undefined

undefined

2024 Smartphone Market Analysis

2024年智能手机市场分析

Market Overview

市场概况

Global smartphone shipments reached [1.2 billion units](metric_value, origin=1200000000) in 2024, showing a [modest decline of 2.1%](ratio_value, origin=-0.021, assessment="negative") year-over-year.

The premium segment (devices over $800) showed remarkable [resilience](trend_desc, assessment="positive"), growing by [5.8%](ratio_value, origin=0.058, assessment="positive"). Average selling price was [$420](metric_value, origin=420, unit="USD").

2024年全球智能手机出货量达到[12亿台](metric_value, origin=1200000000)，同比[小幅下降2.1%](ratio_value, origin=-0.021, assessment="negative")。

高端市场（售价800美元以上）表现出显著的[韧性](trend_desc, assessment="positive")，增长了[5.8%](ratio_value, origin=0.058, assessment="positive")。平均售价为[420美元](metric_value, origin=420, unit="USD")。

Key Findings

核心发现

Asia-Pacific remains the largest market
Premium devices showed strong growth
Budget segment faced headwinds

亚太地区仍是__最大市场__
高端设备呈现强劲增长
入门级市场面临压力

Regional Breakdown

区域细分

Asia-Pacific

亚太地区

Asia-Pacific remains the largest market with [680 million units](metric_value, origin=680000000) shipped, though this represents a [decline of 180 million units](delta_value, origin=-180000000, assessment="negative") from the previous year.

Key markets:

China: [320M units](metric_value, origin=320000000) - down [8.5%](ratio_value, origin=-0.085, assessment="negative"), [ranked 1st](rank, detail=[320, 180, 90, 65, 45]) globally, accounting for [47%](contribute_ratio, origin=0.47, assessment="positive") of regional sales
India: [180M units](metric_value, origin=180000000) - up [12.3%](ratio_value, origin=0.123, assessment="positive"), [ranked 2nd](rank, detail=[320, 180, 90, 65, 45])
Southeast Asia: [180M units](metric_value, origin=180000000) - [stable](trend_desc, assessment="equal")

For detailed methodology, visit our research page.

---

亚太地区仍是最大市场，出货量达[6.8亿台](metric_value, origin=680000000)，但较上年[减少1.8亿台](delta_value, origin=-180000000, assessment="negative")。

主要市场：

中国：[3.2亿台](metric_value, origin=320000000) - 下降[8.5%](ratio_value, origin=-0.085, assessment="negative")，全球[排名第一](rank, detail=[320, 180, 90, 65, 45])，占区域销售额的[47%](contribute_ratio, origin=0.47, assessment="positive")
印度：[1.8亿台](metric_value, origin=180000000) - 增长[12.3%](ratio_value, origin=0.123, assessment="positive")，全球[排名第二](rank, detail=[320, 180, 90, 65, 45])
东南亚：[1.8亿台](metric_value, origin=180000000) - [稳定](trend_desc, assessment="equal")

如需了解详细方法，请访问我们的研究页面。

---

Using T8 in HTML, React, and Vue

在HTML、React和Vue中使用T8

Using in HTML (via CDN)

在HTML中使用（通过CDN）

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>T8 Narrative Text</title>
</head>
<body>
  <div id="container"></div>

  <!-- Import T8 from unpkg CDN -->
  <script src="https://unpkg.com/@antv/t8/dist/t8.min.js"></script>
  
  <script>
    // T8 is available as a global variable
    const { Text } = window.T8;

    // Initialize T8 instance
    const text = new Text(document.getElementById('container'));

    // Render narrative text using T8 Syntax
    const narrativeText = `

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>T8 Narrative Text</title>
</head>
<body>
  <div id="container"></div>

  <!-- Import T8 from unpkg CDN -->
  <script src="https://unpkg.com/@antv/t8/dist/t8.min.js"></script>
  
  <script>
    // T8 is available as a global variable
    const { Text } = window.T8;

    // Initialize T8 instance
    const text = new Text(document.getElementById('container'));

    // Render narrative text using T8 Syntax
    const narrativeText = `

Sales Report

This quarter, bookings are higher than usual. They are [¥348k](metric_value, origin=348.12).

Bookings are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter. `;

text.theme('light').render(narrativeText);

</script> </body> </html> ```

Installation:

bash

npm install @antv/t8

This quarter, bookings are higher than usual. They are [¥348k](metric_value, origin=348.12).

Bookings are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter. `;

text.theme('light').render(narrativeText);

</script> </body> </html> ```

安装：

bash

npm install @antv/t8

or

yarn add @antv/t8

undefined

yarn add @antv/t8

undefined

Using in React

在React中使用

tsx

import { Text } from '@antv/t8';
import { useEffect, useRef } from 'react';

function T8Component() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // Initialize T8 instance
    const text = new Text(containerRef.current);

    // Render narrative text using T8 Syntax
    const narrativeText = `

tsx

import { Text } from '@antv/t8';
import { useEffect, useRef } from 'react';

function T8Component() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // Initialize T8 instance
    const text = new Text(containerRef.current);

    // Render narrative text using T8 Syntax
    const narrativeText = `

Sales Report

This quarter, bookings are higher than usual. They are [¥348k](metric_value, origin=348.12).

Bookings are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter. `;

text.theme('light').render(narrativeText);

// Cleanup on unmount
return () => {
  text.unmount();
};

}, []);

return <div ref={containerRef} />; }

export default T8Component;

undefined

This quarter, bookings are higher than usual. They are [¥348k](metric_value, origin=348.12).

Bookings are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter. `;

text.theme('light').render(narrativeText);

// Cleanup on unmount
return () => {
  text.unmount();
};

}, []);

return <div ref={containerRef} />; }

export default T8Component;

undefined

Using in Vue 3

在Vue 3中使用

vue

<template>
  <div ref="containerRef"></div>
</template>

<script setup lang="ts">
import { Text } from '@antv/t8';
import { ref, onMounted, onBeforeUnmount } from 'vue';

const containerRef = ref<HTMLDivElement>();
let textInstance: Text | null = null;

onMounted(() => {
  if (!containerRef.value) return;

  // Initialize T8 instance
  textInstance = new Text(containerRef.value);

  // Render narrative text using T8 Syntax
  const narrativeText = `

vue

<template>
  <div ref="containerRef"></div>
</template>

<script setup lang="ts">
import { Text } from '@antv/t8';
import { ref, onMounted, onBeforeUnmount } from 'vue';

const containerRef = ref<HTMLDivElement>();
let textInstance: Text | null = null;

onMounted(() => {
  if (!containerRef.value) return;

  // Initialize T8 instance
  textInstance = new Text(containerRef.value);

  // Render narrative text using T8 Syntax
  const narrativeText = `

Sales Report

This quarter, bookings are higher than usual. They are [¥348k](metric_value, origin=348.12).

Bookings are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter. `;

textInstance.theme('light').render(narrativeText); });

onBeforeUnmount(() => { if (textInstance) { textInstance.unmount(); } }); </script>

undefined

This quarter, bookings are higher than usual. They are [¥348k](metric_value, origin=348.12).

Bookings are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter. `;

textInstance.theme('light').render(narrativeText); });

onBeforeUnmount(() => { if (textInstance) { textInstance.unmount(); } }); </script>

undefined

Using in Vue 2

在Vue 2中使用

vue

<template>
  <div ref="container"></div>
</template>

<script>
import { Text } from '@antv/t8';

export default {
  name: 'T8Component',
  data() {
    return {
      textInstance: null,
    };
  },
  mounted() {
    // Initialize T8 instance
    this.textInstance = new Text(this.$refs.container);

    // Render narrative text using T8 Syntax
    const narrativeText = `

vue

<template>
  <div ref="container"></div>
</template>

<script>
import { Text } from '@antv/t8';

export default {
  name: 'T8Component',
  data() {
    return {
      textInstance: null,
    };
  },
  mounted() {
    // Initialize T8 instance
    this.textInstance = new Text(this.$refs.container);

    // Render narrative text using T8 Syntax
    const narrativeText = `

Sales Report

This quarter, bookings are higher than usual. They are [¥348k](metric_value, origin=348.12).

Bookings are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter. `;

this.textInstance.theme('light').render(narrativeText);

}, beforeDestroy() { if (this.textInstance) { this.textInstance.unmount(); } }, }; </script>

---

This quarter, bookings are higher than usual. They are [¥348k](metric_value, origin=348.12).

Bookings are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter. `;

this.textInstance.theme('light').render(narrativeText);

}, beforeDestroy() { if (this.textInstance) { this.textInstance.unmount(); } }, }; </script>

---

Writing Guidelines and Best Practices

写作指南与最佳实践

Content Requirements

内容要求

Minimum Length: No less than 800 words (adjust based on data complexity)
Structure: Clear hierarchy with logical flow between sections
Analysis: Don't just list numbers - explain their significance and context
Tone: Natural, fluent, objective, and professional
Entity Usage: Annotate ALL meaningful data points - metrics, values, trends, times, changes, percentages

最低长度： 不少于800字（可根据数据复杂度调整）
结构： 层次清晰，章节间逻辑连贯
分析： 不要只罗列数字，要解释其重要性和上下文
语气： 自然流畅、客观专业
实体使用： 对所有有意义的数据点进行标注——指标、数值、趋势、时间、变化、百分比

Entity Annotation Best Practices

实体标注最佳实践

Be Comprehensive: Mark all quantitative data, not just major figures
Use Appropriate Types: Choose the entity type that best describes the semantic meaning
Add Metadata: Include
```
origin
```
,
```
assessment
```
, and other relevant fields when applicable
Natural Flow: Entities should blend seamlessly into readable prose

全面性： 标记所有量化数据，而不仅仅是主要数据
类型匹配： 选择最能描述语义的实体类型
添加元数据： 适用时包含
```
origin
```
、
```
assessment
```
和其他相关字段
自然融入： 实体应无缝融入可读的文本中

What to Annotate

标注范围

✅ DO annotate:

All numeric values (revenue, counts, measurements)
All percentages (changes, contributions, proportions)
Metric names and KPIs
Time periods
Geographic regions and categories
Trend descriptions
Comparisons and changes

❌ DON'T annotate:

Generic text without specific data meaning
Connecting phrases and transitions
Context that doesn't represent measurable concepts

✅ 需要标注：

所有数值（收入、数量、度量）
所有百分比（变化、贡献、比例）
指标名称和KPI
时间段
地理区域和分类
趋势描述
比较和变化

❌ 无需标注：

无特定数据含义的通用文本
连接短语和过渡句
不代表可衡量概念的上下文

Output Format

输出格式

When generating T8 Syntax content for the user:

Output the T8 Syntax content directly without wrapping in code blocks
Provide the frontend code (HTML/React/Vue) based on user preference
Ensure all entities are properly annotated with appropriate metadata
Verify that content meets minimum length and quality requirements

The rendered output provides:

Rich semantic markup for data entities
Interactive entity highlighting
Clear visual hierarchy
Professional report-style formatting
Responsive design for all devices

为用户生成T8 Syntax内容时：

直接输出T8 Syntax内容，无需包裹在代码块中
根据用户偏好提供前端代码（HTML/React/Vue）
确保所有实体都使用适当的元数据进行正确标注
验证内容符合最低长度和质量要求

渲染后的输出提供：

丰富的数据实体语义标记
交互式实体高亮
清晰的视觉层级
专业的报告风格格式
适配所有设备的响应式设计

Reference Links

参考链接

T8 GitHub Repository: https://github.com/antvis/T8
T8 Documentation: https://github.com/antvis/T8/blob/main/site/en/tutorial/quick-start.md
T8 Syntax Reference: https://github.com/antvis/T8/blob/main/prompt.md

T8 GitHub仓库：https://github.com/antvis/T8
T8文档：https://github.com/antvis/T8/blob/main/site/en/tutorial/quick-start.md
T8语法参考：https://github.com/antvis/T8/blob/main/prompt.md

narrative-text-visualization

Original

Translation

Narrative Text Visualization Skill

叙事文本可视化技能

What is T8

什么是T8

Workflow

工作流

1. Understand the Requirements

1. 理解需求

2. Generate T8 Syntax Content

2. 生成T8语法内容

3. Generate Frontend Code

3. 生成前端代码

4. Validate Output

4. 验证输出

T8 Syntax Specification

T8语法规范

Document Structure

文档结构

Headings (6 levels)

标题（6级）

Level 1 Heading (Main Title)

一级标题（主标题）

Level 2 Heading (Section)

二级标题（章节）

Level 3 Heading (Subsection)

三级标题（小节）

Level 4 Heading

四级标题

Level 5 Heading

五级标题

Level 6 Heading

六级标题

Paragraphs

段落

Lists

列表

Text Formatting

文本格式

Entity Annotation Syntax

实体标注语法

Basic Entity Syntax

基础实体语法

Entity with Metadata

带元数据的实体

Entity Types Reference

实体类型参考

Common Metadata Fields

常见元数据字段

origin (number)

origin（数字）

assessment (string)

assessment（字符串）

unit (string)

unit（字符串）

detail (any)

detail（任意类型）

Data Requirements

数据要求

Complete T8 Syntax Example

完整T8语法示例

2024 Smartphone Market Analysis

2024年智能手机市场分析

Market Overview

市场概况

Key Findings

核心发现

Regional Breakdown

区域细分

Asia-Pacific

亚太地区

Using T8 in HTML, React, and Vue

在HTML、React和Vue中使用T8

Using in HTML (via CDN)

在HTML中使用（通过CDN）

Sales Report

Sales Report

or

`origin`
(number)

`origin`
（数字）

`assessment`
(string)

`assessment`
（字符串）

`unit`
(string)

`unit`
（字符串）

`detail`
(any)

`detail`
（任意类型）