教程向-简单的进度图或者仪表图

[dongrentianyu]

简单的进度图其实就是反映一个数值。论坛上有库克马做的简单饼图，可参考下面链接。

• Tiddlywiki 中的圆环图与动画
• TiddlyWiki 中的简单进度饼图

这两个图表比较简单，也挺好用。

这里我们用echarts图谱也简单实现一个。用的是水滴动态形式，所以还需要安装$:/plugins/Gk0Wk/echarts-liquidfill插件。

<$echarts $text="""
option = {
    series: [{
        type: 'liquidFill',
        data: [0.3]
    }]
}""" />

直接复制上面的代码，就可以看到下面的效果。

但通常这个数字是一个动态的。比如通过筛选器来计算已经完成的任务占总任务多少。

那我们要实现这个功能，就需要把data: [0.3]里面的数值换成动态的数值。所以我们就需要用到宏来进行文本替换。这里思路的来源是林一二的最近一年熬夜的天数。

\define liquid-fill-percentage()
option = {
    series: [{
        type: 'liquidFill',
        data: [$(test)$]
    }]
}
\end

首先定义一个宏，这个宏就是要传入里面的test。然后下面我们用let进行赋值。

<$text text={{{[is[tiddler]is[shadow]sort[title]count[]]}}}/>

<$text text={{{[!is[system]sort[title]]}}}/>

<$let
	普通条目={{{[!is[system]sort[title]]}}}
	影子条目={{{ [is[tiddler]is[shadow]sort[title]count[]]}}}
  test={{{[<影子条目>divide<普通条目>]}}}
>

<$echarts $text=<<liquid-fill-percentage>> />

</$let>

在上面代码中，通过两个筛选器，分别展示了影子条目的数量和普通条目的数量。再计算相除的结果。

大概可能会得到一个这样类似的数值。上面text会显示出相应的数值来。

这里用到了let进行赋值和divide进行相除，可以去官方文档中查看对应的条目，获取进一步的知识。

[dongrentianyu]

这种传入单个数据的，比较好实现，主要是通过宏进行文本替换。