思源 Chart 萌新使用指南

基础教程

可参考：https://ld246.com/article/1630851751280

但由于该教程中的“百度图说”已经下线了，可以使用 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的数据。可参考：https://ld246.com/article/1681651522673

立即函数如下：

(() => {
    //代码粘贴到这里
    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文件，然后搜索echarts.init，一共出现2个，找到第2个即可，如图。

​​

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

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

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

‍