VisActor VBI

    播放器

    VSeed 支持配置 player 属性来实现数据的自动播放展示。

    Race Scatter

    const vseed = {
  chartType: 'raceScatter',
  dimensions: [
    { id: 'year',    encoding: 'player' },
    { id: 'region',  encoding: 'color'  },
    { id: 'country', encoding: 'label'  },
  ],
  measures: [
    { id: 'income',         encoding: 'xAxis' },
    { id: 'lifeExpectancy', encoding: 'yAxis' },
    { id: 'population',     encoding: 'size'  },
  ],
  dataset: [......],
}

    Race Bar

    const vseed = {
  chartType: 'raceBar',
  dimensions: [
    { id: 'name', encoding: 'yAxis' },
    { id: 'category', encoding: 'color' },
    { id: 'year', encoding: 'player' },
  ],
  measures: [{ id: 'value', encoding: 'xAxis' }],
  dataset: [......],
}

    Race Column

    const vseed = {
  chartType: 'raceColumn',
  dimensions: [
    { id: 'name', encoding: 'xAxis' },
    { id: 'category', encoding: 'color' },
    { id: 'year', encoding: 'player' },
  ],
  measures: [{ id: 'value', encoding: 'yAxis' }],
  dataset: [......]
}

    Race Line

    const vseed = {
  chartType: 'raceLine',
  dimensions: [
    { id: 'date', encoding: 'xAxis' },
    { id: 'category', encoding: 'color' },
  ],
  measures: [{ id: 'sales', encoding: 'yAxis' }],
  dataset: [......],
  config: {
    raceLine: {
      player: {
        autoPlay: true,
        interval: 1000,
        maxCount: 4,
      },
    },
  },
}

    Race Pie

    const vseed = {
  chartType: 'racePie',
  dimensions: [
    { id: 'date', encoding: 'player' },
    { id: 'category', encoding: 'color' },
  ],
  measures: [{ id: 'sales', encoding: 'angle' }],
  dataset: [......],
  config: {
    racePie: {
      player: {
        autoPlay: true,
        interval: 1000,
      },
    },
  },
}

    Race Donut

    const vseed = {
  chartType: 'raceDonut',
  dimensions: [
    { id: 'date', encoding: 'player' },
    { id: 'category', encoding: 'color' },
  ],
  measures: [{ id: 'sales', encoding: 'angle' }],
  dataset: [......],
  config: {
    raceDonut: {
      player: {
        autoPlay: true,
        interval: 1000,
      },
    },
  },
}