思源 Chart 萌新使用指南

基础教程

可参考： 思源笔记图表 ECharts 小白教程

但由于该教程中的“百度图说”已经下线了，可以使用 https://www.lddgo.net/base/class?classID=6 这个网站代替。

进阶教程

如果 https://www.lddgo.net/base/class?classID=6 这个网站的图例无法满足你的需求，也可以参考官网示例。

官网中，复制 js 示例代码中的，option 里的内容即可，可根据自己的实际情况修改数据，如图。

如果，有些复杂的示例中有 js 代码的，可以在最底部添加 console.log(option)，然后打开浏览器开发者工具，然后打开控制台（windows: Ctrl+Shift+I；macOS: Cmd+Option+I），复制刚才打印的 option 对象，然后粘贴到思源 chart 块中即可。

当然，这种方法还是太过麻烦，还有一种更方便的方法，可以在 chart 块中先写个立即函数，然后返回 option 变量，然后把 echarts 官网的代码直接粘贴到立即函数中即可。

这样，还有个好处，还可以通过思源 api 动态生成 option 的数据。可参考： 思源笔记折腾记录 echarts- 热力图 -2023 年文档统计

立即函数如下：

(() => {
    //代码粘贴到这里
    return option;
})()

注意 ，立即函数的最后面不要加 ; 号，会报错，因为这个立即函数在一个函数参数里。

这里还有一些其他的示例可供参考：https://juejin.cn/post/7078834647005822983

当然，如果想个性化和支持更多功能，还推荐认真看看官方的教程：https://echarts.apache.org/handbook/zh/how-to/chart-types/bar/basic-bar

源码分析

基本上，以上掌握了就能很好的利用 echarts 了。

但你可能遇到一些问题，不知道怎么排查，或者你想看看官方的源码是怎么实现的。

可打开思源控制台（windows: Ctrl+Shift+I；macOS: Cmd+Option+I），然后打开源代码选项卡，然后找到 main.js 文件，然后搜索，一共出现 2 个，找到第 2 个即可，如图。

由图可知，chart 块里输入的数据来自 l 变量，而 l 变量的值来自块元素的 data-content 属性。

如果有问题，也可以在这里加断点调试。

当然，如果想看未压缩的源码可以到这里查看：https://github.com/siyuan-note/siyuan/blob/687421fe62beb6bddd46c69a263c485bb1fe6619/app/src/protyle/render/chartRender.ts#L45