<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cherry Markdown - 图表工具栏测试</title>
<link rel="stylesheet" type="text/css" href="../packages/cherry-markdown/dist/cherry-markdown.css" />
<link rel="Shortcut Icon" href="./logo/favicon.ico" />
<link rel="Shortcut Icon" href="../logo/favicon.ico" />
<link rel="Bookmark" href="../logo/favicon.ico" />
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cherry-markdown"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script src="../packages/cherry-markdown/dist/cherry-markdown.js"></script>
<script type="module">
const cherryInstance = new Cherry({
id: 'cherry-markdown',
value: `# Cherry Markdown 图表工具栏测试
## 工具栏配置示例
### 方式1：使用独立的图表工具栏
\`\`\`javascript
{
toolbars: {
toolbar: ['bold', 'italic', '|', 'lineTable', 'barTable', 'radarTable', 'mapTable']
}
}
\`\`\`
### 方式2：使用组合式图表工具栏（推荐）
\`\`\`javascript
{
toolbars: {
toolbar: ['bold', 'italic', '|', 'proTable']
}
}
\`\`\`
## 图表示例
### 折线图表格
| :line: {title: 折线图,} | Q1 | Q2 | Q3 | Q4 |
| :-: | :-: | :-: | :-: | :-: |
| 产品A | 120 | 150 | 180 | 200 |
| 产品B | 90 | 110 | 140 | 170 |
| 产品C | 60 | 80 | 100 | 130 |
### 柱状图表格
| :bar: {title: 柱状图,} | Q1 | Q2 | Q3 | Q4 |
| :-: | :-: | :-: | :-: | :-: |
| 销售额 | 1200 | 1500 | 1800 | 2100 |
| 利润 | 300 | 450 | 600 | 750 |
### 雷达图表格
| :radar: {title: 雷达图,} | 技术能力 | 沟通能力 | 管理能力 | 创新能力 | 执行能力 |
| :-: | :-: | :-: | :-: | :-: | :-: |
| 张三 | 85 | 80 | 75 | 90 | 88 |
| 李四 | 78 | 90 | 85 | 82 | 80 |
| 王五 | 90 | 75 | 88 | 85 | 92 |
### 地图表格
| :map:{title: 地图, mapDataSource: https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json,} | 数值 |
| :-: | :-: |
| 北京 | 520 |
| 上海 | 680 |
| 广东 | 850 |
| 四川 | 380 |
| 江苏 | 590 |
| 浙江 | 420 |
`,
toolbars: {
toolbar: [
'bold', 'italic', 'strikethrough', '|',
'color', 'header', '|',
'list', 'ol', 'ul', 'checklist', '|',
'proTable', '|',
'link', 'image', 'code', '|',
'togglePreview', 'fullScreen'
]
},
editor: {},
previewer: {
dom: false,
className: 'cherry-editor',
enablePreviewerBubble: true
}
});
</script>
</body>
</html>