SceneV

Appearance

图表 ​

图表组件用于数据可视化，支持多种图表类型，支持自定义扩展。

初始化js脚本 ​

TIP

初始化js脚本需返回echarts的option配置。 并且优先级比option配置更高，如果存在初始化脚本，那么option配置就不在生效

SceneV Preview

1. 数据源 ​

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

数据映射方式 绑定的

TIP

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

行列式示例 ​
json
{
  "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 示例 ​
json
{
  "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" }
    }
  ]
}

2. 绑定数据点 ​

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 配置格式来即可。

WARNING

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

使用建议 ​

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

3. 批量设置主题色 ​

通过配置 echarts.option.color 属性，可以批量设置图表的主题色。该属性接受一个颜色数组，ECharts 会按照数组顺序循环使用这些颜色作为系列（series）的颜色。

json
{
  "color": [
    "#5470c6",
    "#91cc75",
    "#fac858",
    "#ee6666",
    "#73c0de",
    "#3ba272",
    "#fc8452",
    "#9a60b4",
    "#ea7ccc"
  ],
  "dataset": { ... },
  "series": [ ... ]
}

这样，图表中的各个系列将自动使用定义好的颜色序列，无需为每个系列单独设置颜色。

SceneV PreviewSceneV Preview