支持 echarts 图形

README.md

@@ -76,19 +76,20 @@
 + 列表自动补全
 + 粘贴剪切板里面的图片
 + 添加附件到文档
-+ 运行 PHP，nodejs，Python，bash 代码，代码块第一行需要包含以 `--run--` 字符串，示例见下面截图，当然需要安装相关环境
++ 运行 PHP，nodejs，Python，bash 代码，**代码块第一行需要包含以 `--run--` 字符串，示例见下面截图，当然需要安装相关环境**
 + 开启了 HTML 解析，可以直接在文档里面使用 HTML 代码
 + 待办进度条
 + 快速跳转文件，全文搜索文件内容
 + 多仓库切换
 + 生成 TOC 在需要生成目录的地方写入 `[toc]{type: "ol", level: [1,2,3]}` 即可
-+ docx 格式导出，需要安装 [pandoc](https://pandoc.org/)
++ docx 格式导出，**需要安装 [pandoc](https://pandoc.org/)**
++ ECharts 图形支持装 [ECharts](https://echarts.baidu.com/) **Js代码块第一行需要包含以 `--echarts--` 字符串，示例见下面截图**
 + markdown 编辑器 [monaco-editor](https://github.com/Microsoft/monaco-editor)
 + markdown 解析 [markdown-it](https://github.com/markdown-it/markdown-it)
 + GitHub 风格样式和特性 [GitHub Flavored Markdown Spec](https://github.github.com/gfm/)
 + 待办列表 [GitHub-style task lists](https://github.com/revin/markdown-it-task-lists)
 + mermaid 图形 [mermaid](https://github.com/knsv/mermaid)
-+ Plantuml 图形，需要安装 Java，graphviz [markdown-it-plantuml](https://github.com/gmunguia/markdown-it-plantuml)
++ Plantuml 图形，**需要安装 Java，graphviz [markdown-it-plantuml](https://github.com/gmunguia/markdown-it-plantuml)**
 + katex 公式解析 [markdown-it-katex](https://github.com/waylonflinn/markdown-it-katex)
 + 元素属性书写 [markdown-it-attrs](https://github.com/arve0/markdown-it-attrs)
 + 表格解析增强，支持表格标题多行文本，列表等特性 [markdown-it-multimd-table](https://github.com/RedBug312/markdown-it-multimd-table)
@@ -130,6 +131,7 @@
 + [x] 状态栏
 + [x] toc 生成
 + [x] 内置终端
++ [x] EChart 图表
 + [ ] 代码块渲染增加行号
 + [ ] 信息流，定时任务
 + [ ] 标签支持
@@ -144,5 +146,4 @@
 ![截图](./1.png)
 ![截图](./2.png)
 ![截图](./3.png)
-![截图](./5.gif)
-![截图](./6.png)
+![截图](./4.gif)

frontend/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "crypto-js": "^3.1.9-1",
     "dayjs": "^1.6.6",
+    "echarts": "^4.1.0",
     "github-markdown-css": "^2.10.0",
     "highlight.js": "^9.12.0",
     "lodash": "^4.17.10",

frontend/src/components/EChartsPlugin.js

@@ -0,0 +1,85 @@
+import echarts from 'echarts'
+import CryptoJS from 'crypto-js'
+
+const renderHtml = code => {
+  const id = `echart-${CryptoJS.MD5(code).toString()}-${Math.random().toString(36).substr(2)}`
+
+  return `<div class="echarts" id="${id}" data-code="${encodeURIComponent(code)}"></div>`
+}
+
+const EChartsPlugin = md => {
+  const temp = md.renderer.rules.fence.bind(md.renderer.rules)
+
+  md.renderer.rules.fence = (tokens, idx, options, env, slf) => {
+    const token = tokens[idx]
+    const code = token.content.trim()
+    if (token.info === 'js' && code.split(/\n/)[0].trim().includes('--echarts--')) {
+      return renderHtml(code)
+    }
+
+    return temp(tokens, idx, options, env, slf)
+  }
+}
+
+let charts = {}
+
+EChartsPlugin.update = (theme = 'dark', animation = undefined, renderImg = false) => {
+  Object.values(charts).forEach(x => x.chart.dispose())
+  charts = {}
+
+  for (let ele of document.getElementsByClassName('echarts')) {
+    try {
+      const id = ele.getAttribute('id')
+      const code = ele.dataset['code']
+
+      if (code) {
+        const chart = echarts.init(ele, theme)
+        // eslint-disable-next-line
+        eval(`(${decodeURIComponent(code)})(chart)`)
+
+        if (animation !== undefined) {
+          chart.setOption({animation})
+        }
+
+        let img = null
+
+        if (renderImg) {
+          img = new Image()
+          img.width = ele.clientWidth
+          img.height = ele.clientHeight
+          img.src = chart.getDataURL()
+        }
+
+        charts[id] = { chart, img }
+      }
+    } catch (error) {
+      ele.innerText = error
+    }
+  }
+}
+
+EChartsPlugin.preparePrint = () => {
+  EChartsPlugin.update('light', false, true)
+
+  for (let ele of document.getElementsByClassName('echarts')) {
+    while (ele.firstChild) {
+      ele.firstChild.remove()
+    }
+
+    const id = ele.getAttribute('id')
+
+    if (charts[id] && charts[id].img) {
+      ele.appendChild(charts[id].img)
+    }
+  }
+}
+
+window.addEventListener('resize', () => {
+  Object.values(charts).forEach(x => x.chart.resize())
+})
+
+window.addEventListener('beforeprint', () => {
+  EChartsPlugin.update('light', false)
+})
+
+export default EChartsPlugin

frontend/src/components/View.vue

@@ -46,6 +46,7 @@ import MultimdTable from 'markdown-it-multimd-table'
 import Highlight from 'highlight.js'
 
 import MarkdownItToc from './TocPlugin'
+import MarkdownItECharts from './EChartsPlugin'
 import RunPlugin from './RunPlugin'
 import SourceLinePlugin from './SourceLinePlugin'
 import LinkTargetPlugin from './LinkTargetPlugin'
@@ -95,6 +96,7 @@ export default {
         .use(LinkTargetPlugin)
         .use(MultimdTable, {enableMultilineRows: true})
         .use(MarkdownItToc)
+        .use(MarkdownItECharts)
     }
   },
   mounted () {
@@ -105,6 +107,7 @@ export default {
     this.render = _.debounce(() => {
       this.$refs.view.innerHTML = this.markdown.render(this.replaceRelativeLink(this.value))
       MermaidPlugin.update()
+      MarkdownItECharts.update()
       this.updateOutline()
       this.updateTodoCount()
       this.updatePlantumlDebounce()
@@ -239,6 +242,8 @@ export default {
       }
     },
     convertFile (type) {
+      MarkdownItECharts.preparePrint()
+
       const baseUrl = location.origin + location.pathname.substring(0, location.pathname.lastIndexOf('/')) + '/'
 
       this.convert = {
@@ -246,6 +251,7 @@ export default {
         html: this.$refs.view.outerHTML.replace(/src="api/g, `src="${baseUrl}api`),
         type
       }
+      MarkdownItECharts.update()
       setTimeout(() => {
         this.$refs.convertForm.submit()
       }, 300)
@@ -267,6 +273,13 @@ export default {
 }
 </script>
 
+<style>
+.echarts {
+  width: 100%;
+  height: 350px;
+}
+</style>
+
 <style scoped>
 .markdown-body {
   position: relative;

frontend/src/pages/Home.vue

@@ -323,6 +323,10 @@ export default {
 }
 
 @media print {
+  .content {
+    width: 100%;
+  }
+
   .editor, .header, .tree, .status-bar {
     display: none;
   }

frontend/yarn.lock

@@ -2065,6 +2065,12 @@ ecc-jsbn@~0.1.1:
   dependencies:
     jsbn "~0.1.0"
 
+echarts@^4.1.0:
+  version "4.1.0"
+  resolved "http://registry.npm.taobao.org/echarts/download/echarts-4.1.0.tgz#d588c95f73c1a9928b9c73d5b769751c3185bcdc"
+  dependencies:
+    zrender "4.0.4"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "http://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -6630,3 +6636,7 @@ yargs@~3.10.0:
 yeast@0.1.2:
   version "0.1.2"
   resolved "http://registry.npm.taobao.org/yeast/download/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
+
+zrender@4.0.4:
+  version "4.0.4"
+  resolved "http://registry.npm.taobao.org/zrender/download/zrender-4.0.4.tgz#910e60d888f00c9599073f23758dd23345fe48fd"