图表

图表组件用于数据可视化，支持多种图表类型。

数据源

在 Meta2d Designer 中，默认推荐使用 dataset.source 作为数据源，以行列式的数据表形式描述数据（第一行通常为维度名，后续行为数据行）,这样更容易处理数据源。

数据映射方式 绑定的

TIP

绑定字段的数据格式必须复合 echarts 的 dataset.source 的格式

行列式示例

{
  "dataset": {
    "source": [
      ["product", "2015", "2016", "2017"],
      ["Matcha Latte", 43.3, 85.8, 93.7],
      ["Milk Tea", 83.1, 73.4, 55.1],
      ["Cheese Cocoa", 86.4, 65.2, 82.5]
    ]
  },
  "xAxis": { "type": "category" },
  "yAxis": {},
  "series": [{ "type": "bar" }]
}

维度与 encode 示例

{
  "dataset": {
    "dimensions": ["product", "sales", "profit"],
    "source": [
      { "product": "A", "sales": 120, "profit": 32 },
      { "product": "B", "sales": 98, "profit": 20 }
    ]
  },
  "series": [
    {
      "type": "bar",
      "encode": { "x": "product", "y": "sales" }
    },
    {
      "type": "line",
      "encode": { "x": "product", "y": "profit" }
    }
  ]
}

绑定数据点

TIP

属性名支持通过点运算符进行多层级定位，以基础折线图为例：

• 当图表使用的是dataset.source来作为数据源时，那么属性名就可以填写 "echarts.option.dataset.source"。
• 如果我们想给 pen.echarts.option.series[0].data[0] （一月）这个数据值绑定变量，那么属性名可以填写 "echarts.option.series.0.data.0"。
• 想统一更新当前 echarts 所有数据，也可以填写 "echarts.option.series.0.data”，但是需要保证推送的数据也是一个数组的形式。
• 想更新 x 轴数据，可以填写 echarts.option.xAxis.data。
• 其他图表按照 echarts 配置格式来即可。

注意：需要保证推送的点位数据格式和对应属性原有的数据格式完全一致！！！

使用建议

• 优先使用 dataset 统一管理数据，方便多图表复用同一数据源以及在数据源过滤器中更好的数据格式处理
• echarts 目前使用编辑器来处理，可以替换成任何图形的配置