思源内置了有 echarts 图表的功能,但估计不是程序员的都不会使用,特此教学。
问:怎么在思源内插入图表?
答:在思源内输入 /chart
可以看到右图这样菜单,选择第一项即可 图表选项
这实际上是插入了一个代码块,图表所需要的代码是一段 JSON .例如下面这段 JSON
{
"xAxis": {
"type": "category",
"boundaryGap": false,
"data": [
"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"
]
},
"yAxis": {
"type": "value"
},
"series": [
{
"data": [ 820, 932, 901, 934, 1290, 1330, 1320 ],
"type": "line",
"areaStyle": {}
}
]
}
上面这段 JSON 代码 echarts 渲染出来的效果如下
问:好像很复杂的样子,不懂 JSON
答:不要担心这是小白教程,感谢 百度图说 https://tushuo.baidu.com/ 它提供了一个在线编辑图表并且可以导出数据的功能 (虽然我很不喜欢百度,但不得不说类似于 百度脑图还有这个产品 很不错)
百度图说页面预览
点击右侧图表上方会弹出一个工具栏,再点击显示代码
显示工具栏的图表
显示代码
直接复制该代码到思源的图标块中试试,很遗憾会报错如下
这是因为他所提供的代码虽然看起来很像 JSON 但实际上是 js
下面的 挂件块 run-code 中的代码提供了一个简单的从 js 转换到 json 的功能 (这个挂件块可能加载有点慢,耐心等待)
我们将之前复制的 js 代码粘贴到上方挂件块下面渲染出来的文本框内,流程如下图
然后将上面点击复制后得到的 JSON 代码填入思源图表内应当可以得到类似下表这样的显示了
教程完毕 🎉
有缘再见
链接到此文档的相关文档
../record/每日总结/2021/8 月.html#20210824162057-8rx41oj思源图表小白教程
by 崮生 from 崮生 • 一些随笔 🎨,欢迎 赞助本文
本文欢迎分享与聚合,全文转载未经授权( 联系我)不许可。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于