@data_wise/hyper-markdown 1.5.0 → 1.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +200 -200
- package/README.md +815 -815
- package/dist/assets/KaTeX_AMS-Regular-BQhdFMY1.woff2 +0 -0
- package/dist/assets/KaTeX_AMS-Regular-DMm9YOAa.woff +0 -0
- package/dist/assets/KaTeX_AMS-Regular-DRggAlZN.ttf +0 -0
- package/dist/assets/KaTeX_Caligraphic-Bold-ATXxdsX0.ttf +0 -0
- package/dist/assets/KaTeX_Caligraphic-Bold-BEiXGLvX.woff +0 -0
- package/dist/assets/KaTeX_Caligraphic-Bold-Dq_IR9rO.woff2 +0 -0
- package/dist/assets/KaTeX_Caligraphic-Regular-CTRA-rTL.woff +0 -0
- package/dist/assets/KaTeX_Caligraphic-Regular-Di6jR-x-.woff2 +0 -0
- package/dist/assets/KaTeX_Caligraphic-Regular-wX97UBjC.ttf +0 -0
- package/dist/assets/KaTeX_Fraktur-Bold-BdnERNNW.ttf +0 -0
- package/dist/assets/KaTeX_Fraktur-Bold-BsDP51OF.woff +0 -0
- package/dist/assets/KaTeX_Fraktur-Bold-CL6g_b3V.woff2 +0 -0
- package/dist/assets/KaTeX_Fraktur-Regular-CB_wures.ttf +0 -0
- package/dist/assets/KaTeX_Fraktur-Regular-CTYiF6lA.woff2 +0 -0
- package/dist/assets/KaTeX_Fraktur-Regular-Dxdc4cR9.woff +0 -0
- package/dist/assets/KaTeX_Main-Bold-Cx986IdX.woff2 +0 -0
- package/dist/assets/KaTeX_Main-Bold-Jm3AIy58.woff +0 -0
- package/dist/assets/KaTeX_Main-Bold-waoOVXN0.ttf +0 -0
- package/dist/assets/KaTeX_Main-BoldItalic-DxDJ3AOS.woff2 +0 -0
- package/dist/assets/KaTeX_Main-BoldItalic-DzxPMmG6.ttf +0 -0
- package/dist/assets/KaTeX_Main-BoldItalic-SpSLRI95.woff +0 -0
- package/dist/assets/KaTeX_Main-Italic-3WenGoN9.ttf +0 -0
- package/dist/assets/KaTeX_Main-Italic-BMLOBm91.woff +0 -0
- package/dist/assets/KaTeX_Main-Italic-NWA7e6Wa.woff2 +0 -0
- package/dist/assets/KaTeX_Main-Regular-B22Nviop.woff2 +0 -0
- package/dist/assets/KaTeX_Main-Regular-Dr94JaBh.woff +0 -0
- package/dist/assets/KaTeX_Main-Regular-ypZvNtVU.ttf +0 -0
- package/dist/assets/KaTeX_Math-BoldItalic-B3XSjfu4.ttf +0 -0
- package/dist/assets/KaTeX_Math-BoldItalic-CZnvNsCZ.woff2 +0 -0
- package/dist/assets/KaTeX_Math-BoldItalic-iY-2wyZ7.woff +0 -0
- package/dist/assets/KaTeX_Math-Italic-DA0__PXp.woff +0 -0
- package/dist/assets/KaTeX_Math-Italic-flOr_0UB.ttf +0 -0
- package/dist/assets/KaTeX_Math-Italic-t53AETM-.woff2 +0 -0
- package/dist/assets/KaTeX_SansSerif-Bold-CFMepnvq.ttf +0 -0
- package/dist/assets/KaTeX_SansSerif-Bold-D1sUS0GD.woff2 +0 -0
- package/dist/assets/KaTeX_SansSerif-Bold-DbIhKOiC.woff +0 -0
- package/dist/assets/KaTeX_SansSerif-Italic-C3H0VqGB.woff2 +0 -0
- package/dist/assets/KaTeX_SansSerif-Italic-DN2j7dab.woff +0 -0
- package/dist/assets/KaTeX_SansSerif-Italic-YYjJ1zSn.ttf +0 -0
- package/dist/assets/KaTeX_SansSerif-Regular-BNo7hRIc.ttf +0 -0
- package/dist/assets/KaTeX_SansSerif-Regular-CS6fqUqJ.woff +0 -0
- package/dist/assets/KaTeX_SansSerif-Regular-DDBCnlJ7.woff2 +0 -0
- package/dist/assets/KaTeX_Script-Regular-C5JkGWo-.ttf +0 -0
- package/dist/assets/KaTeX_Script-Regular-D3wIWfF6.woff2 +0 -0
- package/dist/assets/KaTeX_Script-Regular-D5yQViql.woff +0 -0
- package/dist/assets/KaTeX_Size1-Regular-C195tn64.woff +0 -0
- package/dist/assets/KaTeX_Size1-Regular-Dbsnue_I.ttf +0 -0
- package/dist/assets/KaTeX_Size1-Regular-mCD8mA8B.woff2 +0 -0
- package/dist/assets/KaTeX_Size2-Regular-B7gKUWhC.ttf +0 -0
- package/dist/assets/KaTeX_Size2-Regular-Dy4dx90m.woff2 +0 -0
- package/dist/assets/KaTeX_Size2-Regular-oD1tc_U0.woff +0 -0
- package/dist/assets/KaTeX_Size3-Regular-CTq5MqoE.woff +0 -0
- package/dist/assets/KaTeX_Size3-Regular-DgpXs0kz.ttf +0 -0
- package/dist/assets/KaTeX_Size4-Regular-BF-4gkZK.woff +0 -0
- package/dist/assets/KaTeX_Size4-Regular-DWFBv043.ttf +0 -0
- package/dist/assets/KaTeX_Size4-Regular-Dl5lxZxV.woff2 +0 -0
- package/dist/assets/KaTeX_Typewriter-Regular-C0xS9mPB.woff +0 -0
- package/dist/assets/KaTeX_Typewriter-Regular-CO6r4hn1.woff2 +0 -0
- package/dist/assets/KaTeX_Typewriter-Regular-D3Ib7_Hf.ttf +0 -0
- package/dist/assets/_basePickBy-DQwC4k06.js +1 -0
- package/dist/assets/_baseUniq-CjQ7HTgW.js +1 -0
- package/dist/assets/advanced-charts-B5kKEX0O.js +456 -0
- package/dist/assets/architectureDiagram-VXUJARFQ-B5ftY0rj.js +36 -0
- package/dist/assets/basics-CK8ItyKu.js +69 -0
- package/dist/assets/blockDiagram-VD42YOAC-Buup3zcs.js +122 -0
- package/dist/assets/c4Diagram-YG6GDRKO-C9V8uGlz.js +10 -0
- package/dist/assets/channel-C14Cqwkz.js +1 -0
- package/dist/assets/chunk-4BX2VUAB-BTFpWa7y.js +1 -0
- package/dist/assets/chunk-55IACEB6-DYDPn_HK.js +1 -0
- package/dist/assets/chunk-B4BG7PRW-BPkbhK9h.js +165 -0
- package/dist/assets/chunk-DI55MBZ5-BQdPYvda.js +220 -0
- package/dist/assets/chunk-FMBD7UC4-risiLGd9.js +15 -0
- package/dist/assets/chunk-QN33PNHL-CVvjDrcV.js +1 -0
- package/dist/assets/chunk-QZHKN3VN-DZHsGeKY.js +1 -0
- package/dist/assets/chunk-TZMSLE5B-F9aLWxM8.js +1 -0
- package/dist/assets/classDiagram-2ON5EDUG-T658fk9d.js +1 -0
- package/dist/assets/classDiagram-v2-WZHVMYZB-T658fk9d.js +1 -0
- package/dist/assets/clone-DGn-zmUY.js +1 -0
- package/dist/assets/cose-bilkent-S5V4N54A-Cg1txV1Z.js +1 -0
- package/dist/assets/cytoscape.esm-CyJtwmzi.js +331 -0
- package/dist/assets/d3-k8s2dDE-.js +322 -0
- package/dist/assets/dagre-6UL2VRFP-D85UBnft.js +4 -0
- package/dist/assets/dashboard-CrMKXI0I.js +184 -0
- package/dist/assets/dataset-eaSNQcH4.js +130 -0
- package/dist/assets/diagram-PSM6KHXK-DsTs5d3n.js +24 -0
- package/dist/assets/diagram-QEK2KX5R-WsXErE2i.js +43 -0
- package/dist/assets/diagram-S2PKOQOG-USgsGWSj.js +24 -0
- package/dist/assets/echarts-BLmZzVwe.js +119 -0
- package/dist/assets/erDiagram-Q2GNP2WA-Bk91COG3.js +60 -0
- package/dist/assets/flowDiagram-NV44I4VS-BLVT88ss.js +162 -0
- package/dist/assets/ganttDiagram-LVOFAZNH-Dj6Wz09W.js +267 -0
- package/dist/assets/gitGraphDiagram-NY62KEGX-DQ-AJnZg.js +65 -0
- package/dist/assets/graph-DbDyktci.js +1 -0
- package/dist/assets/index-BCEwe3xS.js +1098 -0
- package/dist/assets/index-CM9POPZT.css +10 -0
- package/dist/assets/infoDiagram-ER5ION4S-BrZ5jdxh.js +2 -0
- package/dist/assets/journeyDiagram-XKPGCS4Q-Tu3fIGME.js +139 -0
- package/dist/assets/kanban-definition-3W4ZIXB7-CoTSyhFx.js +89 -0
- package/dist/assets/layout-CmBEWiC3.js +1 -0
- package/dist/assets/layout-DU_e2-rE.js +225 -0
- package/dist/assets/map-tests-HGE4_srW.js +332 -0
- package/dist/assets/mermaid-BsrGAm3v.js +58 -0
- package/dist/assets/mindmap-definition-VGOIOE7T-ghxCMXo6.js +68 -0
- package/dist/assets/pieDiagram-ADFJNKIX-C4pskk8d.js +30 -0
- package/dist/assets/quadrantDiagram-AYHSOK5B-ot_kZZX1.js +7 -0
- package/dist/assets/requirementDiagram-UZGBJVZJ-ChQD0BXp.js +64 -0
- package/dist/assets/sankeyDiagram-TZEHDZUN-BgabTsR-.js +10 -0
- package/dist/assets/sequenceDiagram-WL72ISMW-BtCQvlvI.js +145 -0
- package/dist/assets/sql-BPLsC2aK.js +216 -0
- package/dist/assets/stateDiagram-FKZM4ZOC-By8D8EL6.js +1 -0
- package/dist/assets/stateDiagram-v2-4FDKWEC3-PctLNQpS.js +1 -0
- package/dist/assets/timeline-definition-IT6M3QCI-CALOAaSN.js +61 -0
- package/dist/assets/treemap-KMMF4GRG-CrZeyB71.js +128 -0
- package/dist/assets/xychartDiagram-PRI3JC2R-DpwY4dP8.js +7 -0
- package/dist/index.html +13 -0
- package/package.json +84 -84
- package/types/index.d.ts +58 -58
- package/dist/hyper-markdown.css +0 -10
- package/dist/hyper-markdown.es.js +0 -239368
- package/dist/hyper-markdown.umd.js +0 -3191
|
@@ -0,0 +1,322 @@
|
|
|
1
|
+
const t=`
|
|
2
|
+
# D3.js 可视化示例
|
|
3
|
+
|
|
4
|
+
## 1. 简单柱状图(JSON 配置)
|
|
5
|
+
|
|
6
|
+
\`\`\`d3
|
|
7
|
+
{
|
|
8
|
+
"type": "bar",
|
|
9
|
+
"data": [30, 86, 168, 281, 303, 365],
|
|
10
|
+
"width": 600,
|
|
11
|
+
"height": 400,
|
|
12
|
+
"color": "#5470c6"
|
|
13
|
+
}
|
|
14
|
+
\`\`\`
|
|
15
|
+
|
|
16
|
+
## 2. 折线图(JSON 配置)
|
|
17
|
+
|
|
18
|
+
\`\`\`d3
|
|
19
|
+
{
|
|
20
|
+
"type": "line",
|
|
21
|
+
"data": [120, 200, 150, 80, 70, 110, 130],
|
|
22
|
+
"width": 600,
|
|
23
|
+
"height": 400,
|
|
24
|
+
"color": "#91cc75"
|
|
25
|
+
}
|
|
26
|
+
\`\`\`
|
|
27
|
+
|
|
28
|
+
## 3. 饼图(JSON 配置)
|
|
29
|
+
|
|
30
|
+
\`\`\`d3
|
|
31
|
+
{
|
|
32
|
+
"type": "pie",
|
|
33
|
+
"data": [
|
|
34
|
+
{ "name": "产品A", "value": 335 },
|
|
35
|
+
{ "name": "产品B", "value": 310 },
|
|
36
|
+
{ "name": "产品C", "value": 234 },
|
|
37
|
+
{ "name": "产品D", "value": 135 },
|
|
38
|
+
{ "name": "产品E", "value": 148 }
|
|
39
|
+
],
|
|
40
|
+
"width": 600,
|
|
41
|
+
"height": 400,
|
|
42
|
+
"nameField": "name",
|
|
43
|
+
"valueField": "value"
|
|
44
|
+
}
|
|
45
|
+
\`\`\`
|
|
46
|
+
|
|
47
|
+
## 4. 散点图(JSON 配置)
|
|
48
|
+
|
|
49
|
+
\`\`\`d3
|
|
50
|
+
{
|
|
51
|
+
"type": "scatter",
|
|
52
|
+
"data": [
|
|
53
|
+
{ "x": 10, "y": 20 },
|
|
54
|
+
{ "x": 20, "y": 35 },
|
|
55
|
+
{ "x": 30, "y": 25 },
|
|
56
|
+
{ "x": 40, "y": 45 },
|
|
57
|
+
{ "x": 50, "y": 40 },
|
|
58
|
+
{ "x": 60, "y": 55 }
|
|
59
|
+
],
|
|
60
|
+
"width": 600,
|
|
61
|
+
"height": 400,
|
|
62
|
+
"xField": "x",
|
|
63
|
+
"yField": "y",
|
|
64
|
+
"color": "#ee6666",
|
|
65
|
+
"radius": 5
|
|
66
|
+
}
|
|
67
|
+
\`\`\`
|
|
68
|
+
|
|
69
|
+
## 5. 使用 Dataset 的柱状图
|
|
70
|
+
|
|
71
|
+
\`\`\`dataset datasetId: sales_data
|
|
72
|
+
{
|
|
73
|
+
dimensions: ["月份", "销售额"],
|
|
74
|
+
source: [
|
|
75
|
+
{ 月份: "1月", 销售额: 12500 },
|
|
76
|
+
{ 月份: "2月", 销售额: 13800 },
|
|
77
|
+
{ 月份: "3月", 销售额: 15200 },
|
|
78
|
+
{ 月份: "4月", 销售额: 14100 },
|
|
79
|
+
{ 月份: "5月", 销售额: 16800 },
|
|
80
|
+
{ 月份: "6月", 销售额: 18500 }
|
|
81
|
+
]
|
|
82
|
+
}
|
|
83
|
+
\`\`\`
|
|
84
|
+
|
|
85
|
+
\`\`\`d3
|
|
86
|
+
{
|
|
87
|
+
"type": "bar",
|
|
88
|
+
"data": "dataset['sales_data']",
|
|
89
|
+
"width": 600,
|
|
90
|
+
"height": 400,
|
|
91
|
+
"xField": "月份",
|
|
92
|
+
"yField": "销售额",
|
|
93
|
+
"color": "#5470c6"
|
|
94
|
+
}
|
|
95
|
+
\`\`\`
|
|
96
|
+
|
|
97
|
+
## 6. 自定义 D3 代码 - 动态圆圈
|
|
98
|
+
|
|
99
|
+
\`\`\`d3
|
|
100
|
+
// 创建 SVG
|
|
101
|
+
const svg = d3.select(container)
|
|
102
|
+
.append('svg')
|
|
103
|
+
.attr('width', 600)
|
|
104
|
+
.attr('height', 400)
|
|
105
|
+
.attr('viewBox', '0 0 600 400');
|
|
106
|
+
|
|
107
|
+
// 生成随机数据
|
|
108
|
+
const data = Array.from({ length: 50 }, () => ({
|
|
109
|
+
x: Math.random() * 580 + 10,
|
|
110
|
+
y: Math.random() * 380 + 10,
|
|
111
|
+
r: Math.random() * 20 + 5
|
|
112
|
+
}));
|
|
113
|
+
|
|
114
|
+
// 创建颜色比例尺
|
|
115
|
+
const color = d3.scaleOrdinal(d3.schemeCategory10);
|
|
116
|
+
|
|
117
|
+
// 绘制圆圈
|
|
118
|
+
svg.selectAll('circle')
|
|
119
|
+
.data(data)
|
|
120
|
+
.enter()
|
|
121
|
+
.append('circle')
|
|
122
|
+
.attr('cx', d => d.x)
|
|
123
|
+
.attr('cy', d => d.y)
|
|
124
|
+
.attr('r', d => d.r)
|
|
125
|
+
.attr('fill', (d, i) => color(i))
|
|
126
|
+
.attr('opacity', 0.7)
|
|
127
|
+
.attr('stroke', '#fff')
|
|
128
|
+
.attr('stroke-width', 2);
|
|
129
|
+
\`\`\`
|
|
130
|
+
|
|
131
|
+
## 7. 自定义 D3 代码 - 使用 Dataset
|
|
132
|
+
|
|
133
|
+
\`\`\`dataset datasetId: product_sales
|
|
134
|
+
{
|
|
135
|
+
dimensions: ["产品", "销量"],
|
|
136
|
+
source: [
|
|
137
|
+
{ 产品: "手机", 销量: 520 },
|
|
138
|
+
{ 产品: "电脑", 销量: 380 },
|
|
139
|
+
{ 产品: "平板", 销量: 290 },
|
|
140
|
+
{ 产品: "手表", 销量: 150 },
|
|
141
|
+
{ 产品: "耳机", 销量: 420 }
|
|
142
|
+
]
|
|
143
|
+
}
|
|
144
|
+
\`\`\`
|
|
145
|
+
|
|
146
|
+
\`\`\`d3
|
|
147
|
+
// 获取数据
|
|
148
|
+
const data = dataset['product_sales'].source;
|
|
149
|
+
|
|
150
|
+
// 设置尺寸和边距
|
|
151
|
+
const margin = { top: 40, right: 20, bottom: 60, left: 60 };
|
|
152
|
+
const width = 600 - margin.left - margin.right;
|
|
153
|
+
const height = 400 - margin.top - margin.bottom;
|
|
154
|
+
|
|
155
|
+
// 创建 SVG
|
|
156
|
+
const svg = d3.select(container)
|
|
157
|
+
.append('svg')
|
|
158
|
+
.attr('width', 600)
|
|
159
|
+
.attr('height', 400)
|
|
160
|
+
.attr('viewBox', '0 0 600 400');
|
|
161
|
+
|
|
162
|
+
const g = svg.append('g')
|
|
163
|
+
.attr('transform', \`translate(\${margin.left},\${margin.top})\`);
|
|
164
|
+
|
|
165
|
+
// 创建比例尺
|
|
166
|
+
const x = d3.scaleBand()
|
|
167
|
+
.domain(data.map(d => d['产品']))
|
|
168
|
+
.range([0, width])
|
|
169
|
+
.padding(0.2);
|
|
170
|
+
|
|
171
|
+
const y = d3.scaleLinear()
|
|
172
|
+
.domain([0, d3.max(data, d => d['销量'])])
|
|
173
|
+
.nice()
|
|
174
|
+
.range([height, 0]);
|
|
175
|
+
|
|
176
|
+
// 添加坐标轴
|
|
177
|
+
g.append('g')
|
|
178
|
+
.attr('transform', \`translate(0,\${height})\`)
|
|
179
|
+
.call(d3.axisBottom(x))
|
|
180
|
+
.selectAll('text')
|
|
181
|
+
.attr('fill', theme === 'dark' ? '#e0e0e0' : '#000')
|
|
182
|
+
.style('font-size', '12px');
|
|
183
|
+
|
|
184
|
+
g.append('g')
|
|
185
|
+
.call(d3.axisLeft(y))
|
|
186
|
+
.selectAll('text')
|
|
187
|
+
.attr('fill', theme === 'dark' ? '#e0e0e0' : '#000');
|
|
188
|
+
|
|
189
|
+
// 绘制柱子
|
|
190
|
+
const bars = g.selectAll('.bar')
|
|
191
|
+
.data(data)
|
|
192
|
+
.enter()
|
|
193
|
+
.append('rect')
|
|
194
|
+
.attr('class', 'bar')
|
|
195
|
+
.attr('x', d => x(d['产品']))
|
|
196
|
+
.attr('y', height)
|
|
197
|
+
.attr('width', x.bandwidth())
|
|
198
|
+
.attr('height', 0)
|
|
199
|
+
.attr('fill', '#5470c6');
|
|
200
|
+
|
|
201
|
+
// 添加动画
|
|
202
|
+
bars.transition()
|
|
203
|
+
.duration(800)
|
|
204
|
+
.attr('y', d => y(d['销量']))
|
|
205
|
+
.attr('height', d => height - y(d['销量']));
|
|
206
|
+
|
|
207
|
+
// 添加数值标签
|
|
208
|
+
g.selectAll('.label')
|
|
209
|
+
.data(data)
|
|
210
|
+
.enter()
|
|
211
|
+
.append('text')
|
|
212
|
+
.attr('class', 'label')
|
|
213
|
+
.attr('x', d => x(d['产品']) + x.bandwidth() / 2)
|
|
214
|
+
.attr('y', d => y(d['销量']) - 5)
|
|
215
|
+
.attr('text-anchor', 'middle')
|
|
216
|
+
.attr('fill', theme === 'dark' ? '#e0e0e0' : '#000')
|
|
217
|
+
.style('font-size', '12px')
|
|
218
|
+
.text(d => d['销量']);
|
|
219
|
+
|
|
220
|
+
// 添加标题
|
|
221
|
+
svg.append('text')
|
|
222
|
+
.attr('x', 300)
|
|
223
|
+
.attr('y', 20)
|
|
224
|
+
.attr('text-anchor', 'middle')
|
|
225
|
+
.attr('fill', theme === 'dark' ? '#e0e0e0' : '#000')
|
|
226
|
+
.style('font-size', '16px')
|
|
227
|
+
.style('font-weight', 'bold')
|
|
228
|
+
.text('产品销量统计');
|
|
229
|
+
\`\`\`
|
|
230
|
+
|
|
231
|
+
## 8. 力导向图
|
|
232
|
+
|
|
233
|
+
\`\`\`d3
|
|
234
|
+
// 创建节点和连接数据
|
|
235
|
+
const nodes = [
|
|
236
|
+
{ id: 'A', group: 1 },
|
|
237
|
+
{ id: 'B', group: 1 },
|
|
238
|
+
{ id: 'C', group: 2 },
|
|
239
|
+
{ id: 'D', group: 2 },
|
|
240
|
+
{ id: 'E', group: 3 },
|
|
241
|
+
{ id: 'F', group: 3 }
|
|
242
|
+
];
|
|
243
|
+
|
|
244
|
+
const links = [
|
|
245
|
+
{ source: 'A', target: 'B' },
|
|
246
|
+
{ source: 'A', target: 'C' },
|
|
247
|
+
{ source: 'B', target: 'D' },
|
|
248
|
+
{ source: 'C', target: 'E' },
|
|
249
|
+
{ source: 'D', target: 'F' },
|
|
250
|
+
{ source: 'E', target: 'F' }
|
|
251
|
+
];
|
|
252
|
+
|
|
253
|
+
const width = 600;
|
|
254
|
+
const height = 400;
|
|
255
|
+
|
|
256
|
+
// 创建 SVG
|
|
257
|
+
const svg = d3.select(container)
|
|
258
|
+
.append('svg')
|
|
259
|
+
.attr('width', width)
|
|
260
|
+
.attr('height', height)
|
|
261
|
+
.attr('viewBox', \`0 0 \${width} \${height}\`);
|
|
262
|
+
|
|
263
|
+
// 创建力导向模拟
|
|
264
|
+
const simulation = d3.forceSimulation(nodes)
|
|
265
|
+
.force('link', d3.forceLink(links).id(d => d.id).distance(100))
|
|
266
|
+
.force('charge', d3.forceManyBody().strength(-300))
|
|
267
|
+
.force('center', d3.forceCenter(width / 2, height / 2));
|
|
268
|
+
|
|
269
|
+
// 创建颜色比例尺
|
|
270
|
+
const color = d3.scaleOrdinal(d3.schemeCategory10);
|
|
271
|
+
|
|
272
|
+
// 绘制连接线
|
|
273
|
+
const link = svg.append('g')
|
|
274
|
+
.selectAll('line')
|
|
275
|
+
.data(links)
|
|
276
|
+
.enter()
|
|
277
|
+
.append('line')
|
|
278
|
+
.attr('stroke', '#999')
|
|
279
|
+
.attr('stroke-opacity', 0.6)
|
|
280
|
+
.attr('stroke-width', 2);
|
|
281
|
+
|
|
282
|
+
// 绘制节点
|
|
283
|
+
const node = svg.append('g')
|
|
284
|
+
.selectAll('circle')
|
|
285
|
+
.data(nodes)
|
|
286
|
+
.enter()
|
|
287
|
+
.append('circle')
|
|
288
|
+
.attr('r', 20)
|
|
289
|
+
.attr('fill', d => color(d.group))
|
|
290
|
+
.attr('stroke', '#fff')
|
|
291
|
+
.attr('stroke-width', 2);
|
|
292
|
+
|
|
293
|
+
// 添加标签
|
|
294
|
+
const label = svg.append('g')
|
|
295
|
+
.selectAll('text')
|
|
296
|
+
.data(nodes)
|
|
297
|
+
.enter()
|
|
298
|
+
.append('text')
|
|
299
|
+
.text(d => d.id)
|
|
300
|
+
.attr('font-size', 12)
|
|
301
|
+
.attr('text-anchor', 'middle')
|
|
302
|
+
.attr('dy', 4)
|
|
303
|
+
.attr('fill', '#fff');
|
|
304
|
+
|
|
305
|
+
// 更新位置
|
|
306
|
+
simulation.on('tick', () => {
|
|
307
|
+
link
|
|
308
|
+
.attr('x1', d => d.source.x)
|
|
309
|
+
.attr('y1', d => d.source.y)
|
|
310
|
+
.attr('x2', d => d.target.x)
|
|
311
|
+
.attr('y2', d => d.target.y);
|
|
312
|
+
|
|
313
|
+
node
|
|
314
|
+
.attr('cx', d => d.x)
|
|
315
|
+
.attr('cy', d => d.y);
|
|
316
|
+
|
|
317
|
+
label
|
|
318
|
+
.attr('x', d => d.x)
|
|
319
|
+
.attr('y', d => d.y);
|
|
320
|
+
});
|
|
321
|
+
\`\`\`
|
|
322
|
+
`;export{t as default};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import{_ as X,as as F,at as Y,au as _,av as H,l as i,c as V,aw as z,ax as U,a7 as $,ae as q,a8 as P,a6 as K,ay as Q,az as W,aA as Z}from"./index-BCEwe3xS.js";import{G as A}from"./graph-DbDyktci.js";import{l as I}from"./layout-CmBEWiC3.js";import{i as x}from"./_baseUniq-CjQ7HTgW.js";import{c as L}from"./clone-DGn-zmUY.js";import{m as B}from"./_basePickBy-DQwC4k06.js";function p(e){var t={options:{directed:e.isDirected(),multigraph:e.isMultigraph(),compound:e.isCompound()},nodes:ee(e),edges:ne(e)};return x(e.graph())||(t.value=L(e.graph())),t}function ee(e){return B(e.nodes(),function(t){var n=e.node(t),o=e.parent(t),c={v:t};return x(n)||(c.value=n),x(o)||(c.parent=o),c})}function ne(e){return B(e.edges(),function(t){var n=e.edge(t),o={v:t.v,w:t.w};return x(t.name)||(o.name=t.name),x(n)||(o.value=n),o})}var f=new Map,b=new Map,J=new Map,te=X(()=>{b.clear(),J.clear(),f.clear()},"clear"),O=X((e,t)=>{const n=b.get(t)||[];return i.trace("In isDescendant",t," ",e," = ",n.includes(e)),n.includes(e)},"isDescendant"),se=X((e,t)=>{const n=b.get(t)||[];return i.info("Descendants of ",t," is ",n),i.info("Edge is ",e),e.v===t||e.w===t?!1:n?n.includes(e.v)||O(e.v,t)||O(e.w,t)||n.includes(e.w):(i.debug("Tilt, ",t,",not in descendants"),!1)},"edgeInCluster"),G=X((e,t,n,o)=>{i.warn("Copying children of ",e,"root",o,"data",t.node(e),o);const c=t.children(e)||[];e!==o&&c.push(e),i.warn("Copying (nodes) clusterId",e,"nodes",c),c.forEach(a=>{if(t.children(a).length>0)G(a,t,n,o);else{const r=t.node(a);i.info("cp ",a," to ",o," with parent ",e),n.setNode(a,r),o!==t.parent(a)&&(i.warn("Setting parent",a,t.parent(a)),n.setParent(a,t.parent(a))),e!==o&&a!==e?(i.debug("Setting parent",a,e),n.setParent(a,e)):(i.info("In copy ",e,"root",o,"data",t.node(e),o),i.debug("Not Setting parent for node=",a,"cluster!==rootId",e!==o,"node!==clusterId",a!==e));const u=t.edges(a);i.debug("Copying Edges",u),u.forEach(l=>{i.info("Edge",l);const h=t.edge(l.v,l.w,l.name);i.info("Edge data",h,o);try{se(l,o)?(i.info("Copying as ",l.v,l.w,h,l.name),n.setEdge(l.v,l.w,h,l.name),i.info("newGraph edges ",n.edges(),n.edge(n.edges()[0]))):i.info("Skipping copy of edge ",l.v,"-->",l.w," rootId: ",o," clusterId:",e)}catch(C){i.error(C)}})}i.debug("Removing node",a),t.removeNode(a)})},"copy"),R=X((e,t)=>{const n=t.children(e);let o=[...n];for(const c of n)J.set(c,e),o=[...o,...R(c,t)];return o},"extractDescendants"),ie=X((e,t,n)=>{const o=e.edges().filter(l=>l.v===t||l.w===t),c=e.edges().filter(l=>l.v===n||l.w===n),a=o.map(l=>({v:l.v===t?n:l.v,w:l.w===t?t:l.w})),r=c.map(l=>({v:l.v,w:l.w}));return a.filter(l=>r.some(h=>l.v===h.v&&l.w===h.w))},"findCommonEdges"),D=X((e,t,n)=>{const o=t.children(e);if(i.trace("Searching children of id ",e,o),o.length<1)return e;let c;for(const a of o){const r=D(a,t,n),u=ie(t,n,r);if(r)if(u.length>0)c=r;else return r}return c},"findNonClusterChild"),k=X(e=>!f.has(e)||!f.get(e).externalConnections?e:f.has(e)?f.get(e).id:e,"getAnchorId"),re=X((e,t)=>{if(!e||t>10){i.debug("Opting out, no graph ");return}else i.debug("Opting in, graph ");e.nodes().forEach(function(n){e.children(n).length>0&&(i.warn("Cluster identified",n," Replacement id in edges: ",D(n,e,n)),b.set(n,R(n,e)),f.set(n,{id:D(n,e,n),clusterData:e.node(n)}))}),e.nodes().forEach(function(n){const o=e.children(n),c=e.edges();o.length>0?(i.debug("Cluster identified",n,b),c.forEach(a=>{const r=O(a.v,n),u=O(a.w,n);r^u&&(i.warn("Edge: ",a," leaves cluster ",n),i.warn("Descendants of XXX ",n,": ",b.get(n)),f.get(n).externalConnections=!0)})):i.debug("Not a cluster ",n,b)});for(let n of f.keys()){const o=f.get(n).id,c=e.parent(o);c!==n&&f.has(c)&&!f.get(c).externalConnections&&(f.get(n).id=c)}e.edges().forEach(function(n){const o=e.edge(n);i.warn("Edge "+n.v+" -> "+n.w+": "+JSON.stringify(n)),i.warn("Edge "+n.v+" -> "+n.w+": "+JSON.stringify(e.edge(n)));let c=n.v,a=n.w;if(i.warn("Fix XXX",f,"ids:",n.v,n.w,"Translating: ",f.get(n.v)," --- ",f.get(n.w)),f.get(n.v)||f.get(n.w)){if(i.warn("Fixing and trying - removing XXX",n.v,n.w,n.name),c=k(n.v),a=k(n.w),e.removeEdge(n.v,n.w,n.name),c!==n.v){const r=e.parent(c);f.get(r).externalConnections=!0,o.fromCluster=n.v}if(a!==n.w){const r=e.parent(a);f.get(r).externalConnections=!0,o.toCluster=n.w}i.warn("Fix Replacing with XXX",c,a,n.name),e.setEdge(c,a,o,n.name)}}),i.warn("Adjusted Graph",p(e)),T(e,0),i.trace(f)},"adjustClustersAndEdges"),T=X((e,t)=>{var c,a;if(i.warn("extractor - ",t,p(e),e.children("D")),t>10){i.error("Bailing out");return}let n=e.nodes(),o=!1;for(const r of n){const u=e.children(r);o=o||u.length>0}if(!o){i.debug("Done, no node has children",e.nodes());return}i.debug("Nodes = ",n,t);for(const r of n)if(i.debug("Extracting node",r,f,f.has(r)&&!f.get(r).externalConnections,!e.parent(r),e.node(r),e.children("D")," Depth ",t),!f.has(r))i.debug("Not a cluster",r,t);else if(!f.get(r).externalConnections&&e.children(r)&&e.children(r).length>0){i.warn("Cluster without external connections, without a parent and with children",r,t);let l=e.graph().rankdir==="TB"?"LR":"TB";(a=(c=f.get(r))==null?void 0:c.clusterData)!=null&&a.dir&&(l=f.get(r).clusterData.dir,i.warn("Fixing dir",f.get(r).clusterData.dir,l));const h=new A({multigraph:!0,compound:!0}).setGraph({rankdir:l,nodesep:50,ranksep:50,marginx:8,marginy:8}).setDefaultEdgeLabel(function(){return{}});i.warn("Old graph before copy",p(e)),G(r,e,h,r),e.setNode(r,{clusterNode:!0,id:r,clusterData:f.get(r).clusterData,label:f.get(r).label,graph:h}),i.warn("New graph after copy node: (",r,")",p(h)),i.debug("Old graph after copy",p(e))}else i.warn("Cluster ** ",r," **not meeting the criteria !externalConnections:",!f.get(r).externalConnections," no parent: ",!e.parent(r)," children ",e.children(r)&&e.children(r).length>0,e.children("D"),t),i.debug(f);n=e.nodes(),i.warn("New list of nodes",n);for(const r of n){const u=e.node(r);i.warn(" Now next level",r,u),u!=null&&u.clusterNode&&T(u.graph,t+1)}},"extractor"),M=X((e,t)=>{if(t.length===0)return[];let n=Object.assign([],t);return t.forEach(o=>{const c=e.children(o),a=M(e,c);n=[...n,...a]}),n},"sorter"),oe=X(e=>M(e,e.children()),"sortNodesByHierarchy"),j=X(async(e,t,n,o,c,a)=>{i.warn("Graph in recursive render:XAX",p(t),c);const r=t.graph().rankdir;i.trace("Dir in recursive render - dir:",r);const u=e.insert("g").attr("class","root");t.nodes()?i.info("Recursive render XXX",t.nodes()):i.info("No nodes found for",t),t.edges().length>0&&i.info("Recursive edges",t.edge(t.edges()[0]));const l=u.insert("g").attr("class","clusters"),h=u.insert("g").attr("class","edgePaths"),C=u.insert("g").attr("class","edgeLabels"),g=u.insert("g").attr("class","nodes");await Promise.all(t.nodes().map(async function(d){const s=t.node(d);if(c!==void 0){const w=JSON.parse(JSON.stringify(c.clusterData));i.trace(`Setting data for parent cluster XXX
|
|
2
|
+
Node.id = `,d,`
|
|
3
|
+
data=`,w.height,`
|
|
4
|
+
Parent cluster`,c.height),t.setNode(c.id,w),t.parent(d)||(i.trace("Setting parent",d,c.id),t.setParent(d,c.id,w))}if(i.info("(Insert) Node XXX"+d+": "+JSON.stringify(t.node(d))),s!=null&&s.clusterNode){i.info("Cluster identified XBX",d,s.width,t.node(d));const{ranksep:w,nodesep:m}=t.graph();s.graph.setGraph({...s.graph.graph(),ranksep:w+25,nodesep:m});const N=await j(g,s.graph,n,o,t.node(d),a),S=N.elem;z(s,S),s.diff=N.diff||0,i.info("New compound node after recursive render XAX",d,"width",s.width,"height",s.height),U(S,s)}else t.children(d).length>0?(i.trace("Cluster - the non recursive path XBX",d,s.id,s,s.width,"Graph:",t),i.trace(D(s.id,t)),f.set(s.id,{id:D(s.id,t),node:s})):(i.trace("Node - the non recursive path XAX",d,g,t.node(d),r),await $(g,t.node(d),{config:a,dir:r}))})),await X(async()=>{const d=t.edges().map(async function(s){const w=t.edge(s.v,s.w,s.name);i.info("Edge "+s.v+" -> "+s.w+": "+JSON.stringify(s)),i.info("Edge "+s.v+" -> "+s.w+": ",s," ",JSON.stringify(t.edge(s))),i.info("Fix",f,"ids:",s.v,s.w,"Translating: ",f.get(s.v),f.get(s.w)),await Z(C,w)});await Promise.all(d)},"processEdges")(),i.info("Graph before layout:",JSON.stringify(p(t))),i.info("############################################# XXX"),i.info("### Layout ### XXX"),i.info("############################################# XXX"),I(t),i.info("Graph after layout:",JSON.stringify(p(t)));let E=0,{subGraphTitleTotalMargin:y}=q(a);return await Promise.all(oe(t).map(async function(d){var w;const s=t.node(d);if(i.info("Position XBX => "+d+": ("+s.x,","+s.y,") width: ",s.width," height: ",s.height),s!=null&&s.clusterNode)s.y+=y,i.info("A tainted cluster node XBX1",d,s.id,s.width,s.height,s.x,s.y,t.parent(d)),f.get(s.id).node=s,P(s);else if(t.children(d).length>0){i.info("A pure cluster node XBX1",d,s.id,s.x,s.y,s.width,s.height,t.parent(d)),s.height+=y,t.node(s.parentId);const m=(s==null?void 0:s.padding)/2||0,N=((w=s==null?void 0:s.labelBBox)==null?void 0:w.height)||0,S=N-m||0;i.debug("OffsetY",S,"labelHeight",N,"halfPadding",m),await K(l,s),f.get(s.id).node=s}else{const m=t.node(s.parentId);s.y+=y/2,i.info("A regular node XBX1 - using the padding",s.id,"parent",s.parentId,s.width,s.height,s.x,s.y,"offsetY",s.offsetY,"parent",m,m==null?void 0:m.offsetY,s),P(s)}})),t.edges().forEach(function(d){const s=t.edge(d);i.info("Edge "+d.v+" -> "+d.w+": "+JSON.stringify(s),s),s.points.forEach(S=>S.y+=y/2);const w=t.node(d.v);var m=t.node(d.w);const N=Q(h,s,f,n,w,m,o);W(s,N)}),t.nodes().forEach(function(d){const s=t.node(d);i.info(d,s.type,s.diff),s.isGroup&&(E=s.diff)}),i.warn("Returning from recursive render XAX",u,E),{elem:u,diff:E}},"recursiveRender"),ge=X(async(e,t)=>{var a,r,u,l,h,C;const n=new A({multigraph:!0,compound:!0}).setGraph({rankdir:e.direction,nodesep:((a=e.config)==null?void 0:a.nodeSpacing)||((u=(r=e.config)==null?void 0:r.flowchart)==null?void 0:u.nodeSpacing)||e.nodeSpacing,ranksep:((l=e.config)==null?void 0:l.rankSpacing)||((C=(h=e.config)==null?void 0:h.flowchart)==null?void 0:C.rankSpacing)||e.rankSpacing,marginx:8,marginy:8}).setDefaultEdgeLabel(function(){return{}}),o=t.select("g");F(o,e.markers,e.type,e.diagramId),Y(),_(),H(),te(),e.nodes.forEach(g=>{n.setNode(g.id,{...g}),g.parentId&&n.setParent(g.id,g.parentId)}),i.debug("Edges:",e.edges),e.edges.forEach(g=>{if(g.start===g.end){const v=g.start,E=v+"---"+v+"---1",y=v+"---"+v+"---2",d=n.node(v);n.setNode(E,{domId:E,id:E,parentId:d.parentId,labelStyle:"",label:"",padding:0,shape:"labelRect",style:"",width:10,height:10}),n.setParent(E,d.parentId),n.setNode(y,{domId:y,id:y,parentId:d.parentId,labelStyle:"",padding:0,shape:"labelRect",label:"",style:"",width:10,height:10}),n.setParent(y,d.parentId);const s=structuredClone(g),w=structuredClone(g),m=structuredClone(g);s.label="",s.arrowTypeEnd="none",s.id=v+"-cyclic-special-1",w.arrowTypeStart="none",w.arrowTypeEnd="none",w.id=v+"-cyclic-special-mid",m.label="",d.isGroup&&(s.fromCluster=v,m.toCluster=v),m.id=v+"-cyclic-special-2",m.arrowTypeStart="none",n.setEdge(v,E,s,v+"-cyclic-special-0"),n.setEdge(E,y,w,v+"-cyclic-special-1"),n.setEdge(y,v,m,v+"-cyc<lic-special-2")}else n.setEdge(g.start,g.end,{...g},g.id)}),i.warn("Graph at first:",JSON.stringify(p(n))),re(n),i.warn("Graph after XAX:",JSON.stringify(p(n)));const c=V();await j(o,n,e.type,e.diagramId,void 0,c)},"render");export{ge as render};
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
const e=`<!-- dashboard -->
|
|
2
|
+
|
|
3
|
+
# 📊 销售数据看板
|
|
4
|
+
|
|
5
|
+
这是一个 Dashboard 模式的示例,所有数据集会自动移到左侧抽屉面板中。
|
|
6
|
+
|
|
7
|
+
## 数据集定义
|
|
8
|
+
|
|
9
|
+
\`\`\`dataset datasetId: sales_2023
|
|
10
|
+
{
|
|
11
|
+
dimensions: ["月份", "销售额", "利润", "订单数"],
|
|
12
|
+
source: [
|
|
13
|
+
{ 月份: "1月", 销售额: 12500, 利润: 3200, 订单数: 156 },
|
|
14
|
+
{ 月份: "2月", 销售额: 13800, 利润: 3500, 订单数: 178 },
|
|
15
|
+
{ 月份: "3月", 销售额: 15200, 利润: 4100, 订单数: 192 },
|
|
16
|
+
{ 月份: "4月", 销售额: 14600, 利润: 3800, 订单数: 185 },
|
|
17
|
+
{ 月份: "5月", 销售额: 16800, 利润: 4500, 订单数: 210 },
|
|
18
|
+
{ 月份: "6月", 销售额: 18200, 利润: 5200, 订单数: 235 }
|
|
19
|
+
]
|
|
20
|
+
}
|
|
21
|
+
\`\`\`
|
|
22
|
+
|
|
23
|
+
\`\`\`dataset datasetId: product_category
|
|
24
|
+
{
|
|
25
|
+
dimensions: ["类别", "销量", "占比"],
|
|
26
|
+
source: [
|
|
27
|
+
{ 类别: "电子产品", 销量: 3500, 占比: 35 },
|
|
28
|
+
{ 类别: "服装", 销量: 2800, 占比: 28 },
|
|
29
|
+
{ 类别: "食品", 销量: 1800, 占比: 18 },
|
|
30
|
+
{ 类别: "图书", 销量: 1200, 占比: 12 },
|
|
31
|
+
{ 类别: "其他", 销量: 700, 占比: 7 }
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
\`\`\`
|
|
35
|
+
|
|
36
|
+
\`\`\`dataset datasetId: region_sales
|
|
37
|
+
{
|
|
38
|
+
dimensions: ["地区", "销售额", "增长率"],
|
|
39
|
+
source: [
|
|
40
|
+
{ 地区: "华东", 销售额: 45000, 增长率: 15.2 },
|
|
41
|
+
{ 地区: "华南", 销售额: 38000, 增长率: 12.8 },
|
|
42
|
+
{ 地区: "华北", 销售额: 32000, 增长率: 10.5 },
|
|
43
|
+
{ 地区: "西南", 销售额: 28000, 增长率: 18.3 },
|
|
44
|
+
{ 地区: "东北", 销售额: 22000, 增长率: 8.7 }
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
\`\`\`
|
|
48
|
+
|
|
49
|
+
## 📈 销售趋势分析
|
|
50
|
+
|
|
51
|
+
::: cell 12
|
|
52
|
+
|
|
53
|
+
\`\`\`echarts
|
|
54
|
+
{
|
|
55
|
+
title: {
|
|
56
|
+
text: "2023年销售趋势",
|
|
57
|
+
left: "center"
|
|
58
|
+
},
|
|
59
|
+
tooltip: {
|
|
60
|
+
trigger: "axis"
|
|
61
|
+
},
|
|
62
|
+
legend: {
|
|
63
|
+
data: ["销售额", "利润"],
|
|
64
|
+
top: 30
|
|
65
|
+
},
|
|
66
|
+
dataset: dataset['sales_2023'],
|
|
67
|
+
xAxis: {
|
|
68
|
+
type: "category"
|
|
69
|
+
},
|
|
70
|
+
yAxis: {
|
|
71
|
+
type: "value"
|
|
72
|
+
},
|
|
73
|
+
series: [
|
|
74
|
+
{
|
|
75
|
+
name: "销售额",
|
|
76
|
+
type: "line",
|
|
77
|
+
smooth: true,
|
|
78
|
+
encode: { x: "月份", y: "销售额" }
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
name: "利润",
|
|
82
|
+
type: "line",
|
|
83
|
+
smooth: true,
|
|
84
|
+
encode: { x: "月份", y: "利润" }
|
|
85
|
+
}
|
|
86
|
+
]
|
|
87
|
+
}
|
|
88
|
+
\`\`\`
|
|
89
|
+
|
|
90
|
+
:::
|
|
91
|
+
|
|
92
|
+
## 📊 产品类别分布
|
|
93
|
+
|
|
94
|
+
::: cell 6
|
|
95
|
+
|
|
96
|
+
\`\`\`echarts
|
|
97
|
+
{
|
|
98
|
+
title: {
|
|
99
|
+
text: "产品类别销量分布",
|
|
100
|
+
left: "center"
|
|
101
|
+
},
|
|
102
|
+
tooltip: {
|
|
103
|
+
trigger: "item",
|
|
104
|
+
formatter: function(params) {
|
|
105
|
+
return params.data['类别'] + ': ' + params.data['销量'] + ' (' + params.data['占比'] + '%)';
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
dataset: dataset['product_category'],
|
|
109
|
+
series: [
|
|
110
|
+
{
|
|
111
|
+
type: "pie",
|
|
112
|
+
radius: "60%",
|
|
113
|
+
encode: {
|
|
114
|
+
itemName: "类别",
|
|
115
|
+
value: "销量"
|
|
116
|
+
},
|
|
117
|
+
label: {
|
|
118
|
+
formatter: function(params) {
|
|
119
|
+
return params.data['类别'] + '\\n' + params.data['占比'] + '%';
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
\`\`\`
|
|
126
|
+
|
|
127
|
+
:::
|
|
128
|
+
|
|
129
|
+
::: cell 6
|
|
130
|
+
|
|
131
|
+
\`\`\`echarts
|
|
132
|
+
{
|
|
133
|
+
title: {
|
|
134
|
+
text: "地区销售额对比",
|
|
135
|
+
left: "center"
|
|
136
|
+
},
|
|
137
|
+
tooltip: {
|
|
138
|
+
trigger: "axis",
|
|
139
|
+
axisPointer: {
|
|
140
|
+
type: "shadow"
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
dataset: dataset['region_sales'],
|
|
144
|
+
xAxis: {
|
|
145
|
+
type: "category"
|
|
146
|
+
},
|
|
147
|
+
yAxis: {
|
|
148
|
+
type: "value"
|
|
149
|
+
},
|
|
150
|
+
series: [
|
|
151
|
+
{
|
|
152
|
+
type: "bar",
|
|
153
|
+
encode: { x: "地区", y: "销售额" },
|
|
154
|
+
itemStyle: {
|
|
155
|
+
color: "#5470c6"
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
]
|
|
159
|
+
}
|
|
160
|
+
\`\`\`
|
|
161
|
+
|
|
162
|
+
:::
|
|
163
|
+
|
|
164
|
+
## 📋 关键指标
|
|
165
|
+
|
|
166
|
+
::: info
|
|
167
|
+
**总销售额**: ¥165,000
|
|
168
|
+
**总利润**: ¥45,300
|
|
169
|
+
**平均增长率**: 13.1%
|
|
170
|
+
**总订单数**: 1,156
|
|
171
|
+
:::
|
|
172
|
+
|
|
173
|
+
## 使用说明
|
|
174
|
+
|
|
175
|
+
在 Dashboard 模式下:
|
|
176
|
+
|
|
177
|
+
1. **左侧抽屉** - 显示所有数据集,可以展开查看详细数据
|
|
178
|
+
2. **搜索功能** - 快速查找特定数据集
|
|
179
|
+
3. **刷新按钮** - 重新加载数据集数据
|
|
180
|
+
4. **导出按钮** - 导出数据集为 JSON 格式
|
|
181
|
+
5. **数据预览** - 展开数据集卡片可查看前3行数据
|
|
182
|
+
|
|
183
|
+
数据集不会在正文中显示,保持看板的简洁性。
|
|
184
|
+
`;export{e as default};
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
const e=`# 数据集功能演示
|
|
2
|
+
|
|
3
|
+
## 定义数据集
|
|
4
|
+
|
|
5
|
+
### 销售数据
|
|
6
|
+
\`\`\`dataset datasetId: sales_data
|
|
7
|
+
{
|
|
8
|
+
dimensions: ["产品", "2020", "2021", "2022"],
|
|
9
|
+
source: [
|
|
10
|
+
{产品: "产品A", 2020: 100, 2021: 120, 2022: 150},
|
|
11
|
+
{产品: "产品B", 2020: 80, 2021: 90, 2022: 110},
|
|
12
|
+
{产品: "产品C", 2020: 60, 2021: 70, 2022: 85}
|
|
13
|
+
]
|
|
14
|
+
}
|
|
15
|
+
\`\`\`
|
|
16
|
+
|
|
17
|
+
### 使用数据集绘制图表
|
|
18
|
+
\`\`\`echarts
|
|
19
|
+
{
|
|
20
|
+
dataset: dataset['sales_data'],
|
|
21
|
+
title: {
|
|
22
|
+
text: "产品销售趋势",
|
|
23
|
+
left: "center"
|
|
24
|
+
},
|
|
25
|
+
"tooltip": {
|
|
26
|
+
"trigger": "axis"
|
|
27
|
+
},
|
|
28
|
+
"legend": {
|
|
29
|
+
"data": ["2020", "2021", "2022"],
|
|
30
|
+
"top": "10%"
|
|
31
|
+
},
|
|
32
|
+
"xAxis": {
|
|
33
|
+
"type": "category"
|
|
34
|
+
},
|
|
35
|
+
"yAxis": {
|
|
36
|
+
"type": "value"
|
|
37
|
+
},
|
|
38
|
+
"series": [
|
|
39
|
+
{
|
|
40
|
+
"name": "2020",
|
|
41
|
+
"type": "bar",
|
|
42
|
+
"encode": {
|
|
43
|
+
"x": "产品",
|
|
44
|
+
"y": "2020"
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"name": "2021",
|
|
49
|
+
"type": "bar",
|
|
50
|
+
"encode": {
|
|
51
|
+
"x": "产品",
|
|
52
|
+
"y": "2021"
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"name": "2022",
|
|
57
|
+
"type": "bar",
|
|
58
|
+
"encode": {
|
|
59
|
+
"x": "产品",
|
|
60
|
+
"y": "2022"
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
]
|
|
64
|
+
}
|
|
65
|
+
\`\`\`
|
|
66
|
+
|
|
67
|
+
## 多数据集示例
|
|
68
|
+
|
|
69
|
+
### 用户统计数据
|
|
70
|
+
\`\`\`dataset datasetId: user_stats
|
|
71
|
+
{
|
|
72
|
+
dimensions: ["月份", "新增用户", "活跃用户", "付费用户"],
|
|
73
|
+
source: [
|
|
74
|
+
{月份: "1月", 新增用户: 1200, 活跃用户: 3500, 付费用户: 450},
|
|
75
|
+
{月份: "2月", 新增用户: 1800, 活跃用户: 4200, 付费用户: 680},
|
|
76
|
+
{月份: "3月", 新增用户: 1500, 活跃用户: 4800, 付费用户: 820},
|
|
77
|
+
{月份: "4月", 新增用户: 2200, 活跃用户: 5200, 付费用户: 950}
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
\`\`\`
|
|
81
|
+
|
|
82
|
+
### 组合图表
|
|
83
|
+
\`\`\`echarts
|
|
84
|
+
{
|
|
85
|
+
dataset: dataset['user_stats'],
|
|
86
|
+
title: {
|
|
87
|
+
text: "用户增长分析",
|
|
88
|
+
left: "center"
|
|
89
|
+
},
|
|
90
|
+
"tooltip": {
|
|
91
|
+
"trigger": "axis"
|
|
92
|
+
},
|
|
93
|
+
"legend": {
|
|
94
|
+
"data": ["新增用户", "活跃用户", "付费用户"],
|
|
95
|
+
"top": "10%"
|
|
96
|
+
},
|
|
97
|
+
"xAxis": {
|
|
98
|
+
"type": "category"
|
|
99
|
+
},
|
|
100
|
+
"yAxis": {
|
|
101
|
+
"type": "value"
|
|
102
|
+
},
|
|
103
|
+
"series": [
|
|
104
|
+
{
|
|
105
|
+
"name": "新增用户",
|
|
106
|
+
"type": "bar",
|
|
107
|
+
"encode": {
|
|
108
|
+
"x": "月份",
|
|
109
|
+
"y": "新增用户"
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"name": "活跃用户",
|
|
114
|
+
"type": "line",
|
|
115
|
+
"encode": {
|
|
116
|
+
"x": "月份",
|
|
117
|
+
"y": "活跃用户"
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"name": "付费用户",
|
|
122
|
+
"type": "line",
|
|
123
|
+
"encode": {
|
|
124
|
+
"x": "月份",
|
|
125
|
+
"y": "付费用户"
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
]
|
|
129
|
+
}
|
|
130
|
+
\`\`\``;export{e as default};
|