思源笔记图表 ECharts 小白教程

本贴最后更新于 341 天前,其中的信息可能已经时移俗易

思源内置了有 echarts 图表的功能,但估计不是程序员的都不会使用,特此教学。

问:怎么在思源内插入图表?

答:在思源内输入 /chart 可以看到右图这样菜单,选择第一项即可 图片.png图表选项

这实际上是插入了一个代码块,图表所需要的代码是一段 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 渲染出来的效果如下

图片.png

问:好像很复杂的样子,不懂 JSON

答:不要担心这是小白教程,感谢 百度图说 https://tushuo.baidu.com/ 它提供了一个在线编辑图表并且可以导出数据的功能 (虽然我很不喜欢百度,但不得不说类似于 百度脑图还有这个产品 很不错)

图片.png百度图说页面预览

点击右侧图表上方会弹出一个工具栏,再点击显示代码

图片.png显示工具栏的图表

图片.png显示代码

直接复制该代码到思源的图标块中试试,很遗憾会报错如下

图片.png

这是因为他所提供的代码虽然看起来很像 JSON 但实际上是 js

下面的 挂件块 run-code 中的代码提供了一个简单的从 js 转换到 json 的功能 (这个挂件块可能加载有点慢,耐心等待)

我们将之前复制的 js 代码粘贴到上方挂件块下面渲染出来的文本框内,流程如下图图片.png

然后将上面点击复制后得到的 JSON 代码填入思源图表内应当可以得到类似下表这样的显示了

图片.png

教程完毕 🎉

有缘再见

链接到此文档的相关文档

../record/每日总结/2021/8 月.html#20210824162057-8rx41oj思源图表小白教程

by 崮生 from 崮生 • 一些随笔 🎨,欢迎 赞助本文
本文欢迎分享与聚合,全文转载未经授权( 联系我)不许可。

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 133
    捐赠者 订阅者

    居然还有这么强大的功能,发现了新大陆啊

  • dammy
    支持者 订阅者

    👍 学到了

  • haojiao
    支持者 订阅者

    学习了,有没有免费的数学公式转换网站推荐呢

    1 回复
  • Dawn99
    支持者 订阅者

    mathpix 就挺不错的,免费的每月似乎是 50 个识别。

  • LeonNote 2 评论
    订阅者

    [挂件块 run-code]怎么使用?看了您另外一篇文章说要配置 nginx 来绕过访问,在什么地方可以配置?

    image.png

    那是开发插件才需要配置的,使用不需要,不过新版思源的兼容性我还没测
    llej
    我刚刚更新了一下我的思源到 1.39 发现之前的还是可以使用的
    llej
  • zhibian
    捐赠者 订阅者

    不错,学习,正在看。

  • zzl2019528
    订阅者

    这个有办法自动提取数据嘛? 比如给每天的效率打分,然后加上 tag,最终在周/月度图表中进行汇总制图

  • Zerolfl

    使用的时候点击“复制 JSON 代码”没有反应,粘贴的内容还是原来的 js 格式代码,请问要怎么操作呢?

    1 回复
  • Zerolfl

    接上一条评论,调用浏览器的控制台看到如下报错:image.png

  • zllz4 1
    捐赠者 订阅者

    可以试下不用剪贴板

    const html =`
        <pre id="text" contenteditable="true">string 显示在此</pre>
        </br>
        <textarea rows="10" cols="100">将百度图说提供的代码复制到这里</textarea >
        <button onclick="document.getElementById('text').innerText = JSON.stringify(eval('('+document.querySelector('textarea').value+')'),null,2)">复制JSON代码</button>
    `
    
请输入回帖内容 ...