通过太微 5.3 的 \function 功能和 ``` 功能快速创建 Echarts 可视化挂件

linonetwo

在开发可视化插件时，我发现了这种就地创建 echarts 图表的快速方法，可以在一个条目内完成，不需要创建额外条目。

使用带有替代属性值的 echarts 微件

  <$echarts $text=```
    option = {
    }
    ```/>

这里我们使用三重反标 https://tiddlywiki.com/#Substituted Attribute Values，因此可以使用 $(currentTiddler)$ 的方式来使用变量。

复制示例

从 https://echarts.apache.org/examples 复制你喜欢的例子

然后直接将

option = {
    series: [
// ..

这种形式的配置复制了，放到 ``` 包围的里面

定义函数

使用函数定义数据变量

\function days() [{!!! targetTiddler}daysbetween[]]]
\function dayPercentage() [{!!! targetValue}subtract<days>divide{!!!targetValue}multiply[100]floor[]]
\function color() [{!］
\function dateString() [{!!! targetTiddler}get[endDate]] :else[{!!! targetTiddler}get[startDate]]]。+[format:date[YYYY MMM DD]]]

5.3 加入的 function 就是用筛选器表达式定义变量，变量的值就是筛选器表达式的执行结果。

你也可以在三重 ``` 内使用 ${ 过滤器表达式 }$ 语法，但我不推荐这样做，因为这会使行太长，而且这样也没法使用 <<变量名>> 来调试以查看结果。

使用变量

通常数据都在 series.data 中，这适用于只需要单一数据的图表

  <$echarts $text=```
  option = {
    series: [
      {
        data: [{
          value: $(dayPercentage)$,
          name: '$(days)$',

这样就用上了用筛选器表达式计算出来的 dayPercentage 百分比，和 days 天数

多个系列的 JSON 数据，使用 \procedure 和 <$list 微件创建数组形式的多个数据

用 \function 准备数据

与上述类似

\function dayStartDate() [daystart<weekIndex>,<dayIndex>]
\function dayEndDate() [dayend<weekIndex>,<dayIndex>]

\function hoursToday()
  [{!!targetTiddler}tagging[]field:calendarEntry[yes]] :filter[get[startDate]compare:date:gteq<dayStartDate>compare:date:lteq<dayEndDate>] +[counthours[]]
\end
\function hoursEveryDayInWeek() []
\function color() [{!!color}]

注意，这里的 hoursToday 将使用 "dayStartDate "和 "dayEndDate " 作为 "compare "操作符的操作数，所以我们必须先使用两个函数来定义它们。

创建数据系列（ series ）

\procedure series()
<$list filter="[range[0],[3]]" variable="weekIndex">
{
  name: '{{!!targetTiddler}} {{{ [weekstart<weekIndex>format:date[YYYY MMM DD]] }}} - {{{ [weekend<weekIndex>format:date[YYYY MMM DD]] }}}',
  type: 'line',
  areaStyle: {},
  emphasis: {
    focus: 'series'
  },
  data: [
    <$list filter="[range[7]]" variable="dayIndex">
      <<hoursToday>>,
    </$list>
  ]
},
</$list>
\end

Echarts 通常使用多个数据系列（series），因此你可以使用带有 range 过滤运算符的列表微件，类似 for 循环的感觉。

然后你应该就能使用索引（也就是循环下标，这里就是 weekIndex 和 dayIndex）作为某些操作符的操作数来获取数据，如 [weekstart<weekIndex>]和 \function dayStartDate() [daystart<weekIndex>,<dayIndex>] 。

Echarts 接受 JS 样式选项，它允许尾部有逗号，因此你可以使用 <<hoursToday>>, 和

  ]
},
</$list>

用结尾的逗号创建 json 列表。

将结果维基化，在 echarts 选项中使用它们

  <$wikify name="seriesText" text=<<series>>>
    <$echarts $text=```
      option = {
        series: [
          $(seriesText)$
        ],
        title: {
          text: '${[{!!description}]}$'
        },

我们不能在 "替换属性值 " （就是三个 ``` 的语法）中直接使用过程（procedure），因此必须将其先维基化。这需要额外的步骤和额外的缩进，所以我希望将来可以改变这一点 #TiddlyWiki5/issues/8072。

我们目前还是先使用 wikify 运行过程，获取最终的 JSON 文本，存储到 seriesText 变量中，并使用 $(seriesText)$ 渲染该变量。

这样，你就可以在条目中编写 echarts 微件调用，并使用 JSON 风格的数据源。

oeyoews

用到的wikitext 有点多，一般用户都懒得琢磨这些。echarts 的addon 写法其实也挺方便的。 wikitext 不能控制刷新时机

linonetwo

这个是方便在一个条目里搞定所有事情，这样才方便作为模板一键创建。还有这是一个单独的布局，所以应该不会有变更，就不需要考虑刷新时机的问题了。

太微中文论坛