expr 支持图表等其他块的映射

以前写过 思源笔记图表 ECharts 小白教程 ，对图表功能不熟悉的可以先阅读一下。

下面是一个引述块内包裹了一个图表块：

{ "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": {} } ] }

通过 获取块 kramdown 源码 接口可以得到它的 kramdown 源码如下：

> ‍```echarts
> {
>   "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": {}
>     }
>   ]
> }
> ‍```
> {: id="20240808092645-7leeodx" updated="20240808092645"}
>
{: id="20240808092645-mqc976g" updated="20240808092645"}

那么理论上来说只要 expr 的结果是输出以上内容（除去最后一行，这行是 expr 块的属性，表达式插件会自动添加），那么思源就会显示图标了，想要动态的数据图表只需要在 expr 中动态读取数据并构造对应的图标 json 即可

现在新建一个 expr 块如下， expr 值填写为上面 kramdown 源码去除最后一行的 js 文本字符串，果然正常渲染出了下面的图表

 "> ‍‍```echarts\n> {\n>   \"xAxis\": {\n>     \"type\": \"category\",\n>     \"boundaryGap\": false,\n>     \"data\": [\n>       \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"\n>     ]\n>   },\n>   \"yAxis\": {\n>     \"type\": \"value\"\n>   },\n>   \"series\": [\n>     { \n>         \"data\": [ 820, 932, 901, 934, 1290, 1330, 1320 ],\n>       \"type\": \"line\",\n>       \"areaStyle\": {}\n>     }\n>   ]\n> }\n> ‍‍```\n> {: id=\"20240808092645-7leeodx\" updated=\"20240808092645\"}\n>}"

{ "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": {} } ] }

‍

接下来我给出一个根据其他块数据进行动态渲染图表的样例

假设有数据 a , 一个表达式块内含一个数值：

123

现在使用如下 js 读取该块的数据作为图表的第一个点的值，expr 代码如下：

const data_a = (await expr.exprEvalByID("20240808094354-xiq54n9")) * 3

return `> \`\`\`echarts
> {
>   "xAxis": {
>     "type": "category",
>     "boundaryGap": false,
>     "data": [
>       "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"
>     ]
>   },
>   "yAxis": {
>     "type": "value"
>   },
>   "series": [
>     { 
>         "data": [ ${data_a}, 932, 901, 934, 1290, 1330, 1320 ],
>       "type": "line",
>       "areaStyle": {}
>     }
>   ]
> }
> \`\`\`
> {: id="20240808092645-7leeodx" updated="20240808092645"}
>`

可以看到下面图表的第一个数据点和上面的 expr 块的数值（123）关联了起来， 现在只要修改上面的 expr 块的数值，下面的图标就会在切换页签之后自动更新

{ "xAxis": { "type": "category", "boundaryGap": false, "data": [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ] }, "yAxis": { "type": "value" }, "series": [ { "data": [ 369, 932, 901, 934, 1290, 1330, 1320 ], "type": "line", "areaStyle": {} } ] }

‍

如果需要从思源的数据库或者 table ，或其他什么地方获取数据生成图表也可以这样做，改改 js 就行了，如果你对 js 不熟悉的话而又需要一些动态图表功能的话可以雇佣我来提供技术支持： https://afdian.com/a/llej0

另外如果您已经安装了 expr 插件的话，并不需要更新插件，因为这个功能是从一开始就支持的，只是我现在才有空写教程