From 24d9b6b91c36deca11cb01bb0b6665a5d2677fd2 Mon Sep 17 00:00:00 2001 From: xunana <3520653564@qq.com> Date: Wed, 5 Mar 2025 17:26:20 +0800 Subject: [PATCH] docs: add pictogram demo and related docs --- .../en/pictogram-chart/pictogram-heart.md | 112 +++++++++++++++++ docs/assets/examples/menu.json | 9 +- .../zh/pictogram-chart/pictogram-heart.md | 116 ++++++++++++++++++ 3 files changed, 236 insertions(+), 1 deletion(-) create mode 100644 docs/assets/examples/en/pictogram-chart/pictogram-heart.md create mode 100644 docs/assets/examples/zh/pictogram-chart/pictogram-heart.md diff --git a/docs/assets/examples/en/pictogram-chart/pictogram-heart.md b/docs/assets/examples/en/pictogram-chart/pictogram-heart.md new file mode 100644 index 0000000000..13521dcdd7 --- /dev/null +++ b/docs/assets/examples/en/pictogram-chart/pictogram-heart.md @@ -0,0 +1,112 @@ +--- +category: examples +group: pictogram chart +title: Pictogram - Medical Schematic Diagram of the Heart +keywords: pictogramChart, space +order: 26-6 +cover: https://cdn.jsdelivr.net/gh/Eomnational/image/img/20250303-105748.gif +option: pictogramChart +--- + +# Pictogram - Medical Schematic Diagram of the Heart + +Contributed by [Zero1017](https://github.com/Eomnational) + +A pictogram is a form of data visualization that uses graphic symbols (usually in SVG format) to represent specific values or categories in data. This example demonstrates how to use a pictogram to present a medical schematic diagram of the heart, distinguishing different parts of the heart by different colors. + +## Key Configurations + +- Register SVG resources through the `VChart.registerSVG` interface. +- Declare the `svg` attribute as the name of the registered SVG. +- Use the `color` configuration item to specify colors for different parts of the heart. + +## Code Demonstration + +```javascript livedemo +/** --Add the following code when using in business-- */ +// When using in business, please additionally import registerPictogramChart and execute it. +// import { registerPictogramChart } from '@visactor/vchart'; +// registerPictogramChart(); +/** --Add the above code when using in business-- */ + +/** --Delete the following code when using in business-- */ +VCHART_MODULE.registerPictogramChart(); +/** --Delete the above code when using in business-- */ + +// Asynchronously fetch SVG resources from the specified URL +const response = await fetch('https://cdn.jsdelivr.net/gh/Eomnational/image/img/3.svg'); +const shape = await response.text(); + +// Define the configuration items for the pictogram +const spec = { + type: 'pictogram', + data: { + id: 'data', + values: [{ name: 'Aorta' }, { name: 'Vein' }, { name: 'CardiacBase' }, { name: 'PulmonaryArtery' }] + }, + region: [ + { + // Allow roaming in blank areas + roam: { blank: true } + } + ], + seriesField: 'name', + nameField: 'name', + valueField: 'value', + svg: 'heart', + color: { + specified: { + Aorta: '#F0321F', + Vein: '#1AC6FF', + CardiacBase: '#FB6747', + PulmonaryArtery: '#FB8D6C', + undefined: 'white' + } + }, + interactions: [ + { + type: 'element-active-by-legend', + filterField: 'name' + } + ], + pictogram: { + style: { + fill: { + scale: 'color', + field: 'name' + } + }, + state: { + active: { + fillOpacity: 0.8, + stroke: { + scale: 'color', + field: 'name' + }, + lineWidth: 2 + }, + hover: { + fillOpacity: 0.8, + stroke: { + scale: 'color', + field: 'name' + }, + lineWidth: 2 + } + } + }, + title: { text: 'Medical Schematic Diagram of the Heart' }, + legends: { orient: 'top', filter: false } +}; + +// Register SVG resources +VChart.registerSVG('heart', shape); + +// Create a VChart instance +const vchart = new VChart(spec, { dom: CONTAINER_ID }); +// Render the chart +vchart.renderSync(); + +// Just for the convenience of console debugging, DO NOT COPY! +window['vchart'] = vchart; +``` diff --git a/docs/assets/examples/menu.json b/docs/assets/examples/menu.json index 22a3ad2a4b..9821877316 100644 --- a/docs/assets/examples/menu.json +++ b/docs/assets/examples/menu.json @@ -1715,6 +1715,13 @@ "zh": "商场业态结构图", "en": "Shopping Mall Tenant Layout" } + }, + { + "path": "pictogram-heart", + "title": { + "zh": "心脏医学示意图", + "en": "Medical Schematic Diagram of the Heart" + } } ] }, @@ -3151,4 +3158,4 @@ ] } ] -} +} \ No newline at end of file diff --git a/docs/assets/examples/zh/pictogram-chart/pictogram-heart.md b/docs/assets/examples/zh/pictogram-chart/pictogram-heart.md new file mode 100644 index 0000000000..9ecffb9cfd --- /dev/null +++ b/docs/assets/examples/zh/pictogram-chart/pictogram-heart.md @@ -0,0 +1,116 @@ +--- +category: examples +group: pictogram chart +title: 象形图-心脏医学示意图 +keywords: pictogramChart, space +order: 26-6 +cover: https://cdn.jsdelivr.net/gh/Eomnational/image/img/20250303-105748.gif +option: pictogramChart +--- + +# 象形图-心脏医学示意图 + +由 [Zero1017](https://github.com/Eomnational) 贡献 + +象形图是一种数据可视化形式，它通过使用图形符号（通常是 SVG 格式）来表示数据中的具体值或类别。本示例展示了如何使用象形图来呈现心脏医学示意图，通过不同的颜色区分心脏的不同部分。 + +## 关键配置 + +- 通过 `VChart.registerSVG` 接口来注册 svg 资源； +- `svg` 属性声明为注册的 svg 名称； +- 使用 `color` 配置项为不同的心脏部分指定颜色； + +## 代码演示 + +```javascript livedemo +/** --在业务中使用时请添加以下代码-- */ +// 在业务中使用时, 请额外引入 registerPictogramChart 并执行 +// import { registerPictogramChart } from '@visactor/vchart'; +// registerPictogramChart(); +/** --在业务中使用时请添加以上代码-- */ + +/** --在业务中使用时请删除以下代码-- */ +VCHART_MODULE.registerPictogramChart(); +/** --在业务中使用时请删除以上代码-- */ + +// 从指定 URL 异步获取 SVG 资源 +const response = await fetch('https://cdn.jsdelivr.net/gh/Eomnational/image/img/3.svg'); +const shape = await response.text(); + +// 定义象形图的配置项 +const spec = { + type: 'pictogram', + data: { + id: 'data', + values: [{ name: 'Aorta' }, { name: 'Vein' }, { name: 'CardiacBase' }, { name: 'PulmonaryArtery' }] + }, + region: [ + { + // 允许在空白区域漫游 + roam: { blank: true } + } + ], + seriesField: 'name', + nameField: 'name', + valueField: 'value', + svg: 'heart', + color: { + specified: { + Aorta: '#F0321F', + Vein: '#1AC6FF', + CardiacBase: '#FB6747', + PulmonaryArtery: '#FB8D6C', + undefined: 'white' + } + }, + interactions: [ + { + type: 'element-active-by-legend', + filterField: 'name' + } + ], + pictogram: { + style: { + fill: { + scale: 'color', + field: 'name' + } + }, + state: { + active: { + fillOpacity: 0.8, + stroke: { + scale: 'color', + field: 'name' + }, + lineWidth: 2 + }, + hover: { + fillOpacity: 0.8, + stroke: { + scale: 'color', + field: 'name' + }, + lineWidth: 2 + } + } + }, + title: { text: 'Medical Schematic Diagram of the Heart' }, + legends: { orient: 'top', filter: false } +}; + +// 注册 SVG 资源 +VChart.registerSVG('heart', shape); + +// 创建 VChart 实例 +const vchart = new VChart(spec, { dom: CONTAINER_ID }); +// 渲染图表 +vchart.renderSync(); + +// Just for the convenience of console debugging, DO NOT COPY! +window['vchart'] = vchart; +``` + +## 相关教程 + +[象形图](link)