ECharts 渲染器

快速入门

npm install echarts

import { echartsRenderer } from '@tiptap-pro/extension-diagrams/echarts'

Diagrams.configure({ renderers: [echartsRenderer()] })

图表类型

ECharts 渲染器绘制折线图、条形图、面积图、散点图、饼图、圆环图、矩阵图、雷达图、漏斗图、仪表图、树图、组合图、树图、桑基图和网络图。

• 矩阵 是彩色单元格的热图，其中包含文本。它的图例列出了每个值。
• 网络布置在一个圆圈上，因此每次绘制时看起来都一样。
• 横向布局。 条形图和组合图可以使用横向布局，并支持系列线条样式、坐标轴和参考线中的所有字段。
• 双击文本可对其进行重命名，请参阅图表中的编辑。
• 动画。 它在编辑器中对图表进行动画处理，除非 animation 选项或用户系统将其关闭。

选项

图表可以存储的选项

图表可以在 spec.renderer.echarts 下存储 ECharts 选项。渲染器将​​它们放置在它构建的 ECharts 选项上，深一层：

editor.commands.updateChartSpec({
  spec: { renderer: { echarts: { grid: { left: 80 }, legend: { icon: 'circle' } } } },
})

• 一个对象 与同名选项合并。
• 任何其他值 将替换它。
• 工具提示的 formatter 和 extraCssText 将被忽略。
• 颜色必须是 CSS 颜色，例如 #1d3557、rgb(…) 或 var(…)。任何其他颜色都会被忽略。
• 带双引号的文本被忽略。带有 ;、<、> 或括号的字体系列也是如此。
• 不是 http: 或 https: 地址的 link 或 sublink 将被忽略。

导出和服务器

toSVG 使用 ECharts 的服务器端渲染，不需要 DOM，因此您可以在 Node.js 中制作 SVG 文件。

toEChartsOption(data, spec, theme) 返回图表的 ECharts 选项，以使用您自己的 ECharts 设置绘制它。