VisActor VBI
  • 简体中文

      • Legend

      border

      border

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "legend": {
    "enable": true,
    "border": false,
    "position": "rt",
    "maxSize": 2
  },
  "dataset": [
    {
      "date": "2019",
      "region": "east",
      "city": "A",
      "profit": 1,
      "sales": 2,
      "discount": 0.5
    },
    {
      "date": "2019",
      "region": "east",
      "city": "B",
      "profit": 3,
      "sales": 6,
      "discount": 0.5
    },
    {
      "date": "2019",
      "region": "east",
      "city": "C",
      "profit": 3,
      "sales": 6,
      "discount": 0.5
    },
    {
      "date": "2019",
      "region": "east",
      "city": "D",
      "profit": 5,
      "sales": 10,
      "discount": 0.5
    },
    {
      "date": "2019",
      "region": "east",
      "city": "E",
      "profit": 4,
      "sales": 8,
      "discount": 0.5
    },
    {
      "date": "2020",
      "region": "north of east",
      "city": "A",
      "profit": 1,
      "sales": 2,
      "discount": 0.5
    },
    {
      "date": "2020",
      "region": "north of east",
      "city": "B",
      "profit": 3,
      "sales": 6,
      "discount": 0.5
    },
    {
      "date": "2020",
      "region": "north of east",
      "city": "C",
      "profit": 3,
      "sales": 6,
      "discount": 0.5
    },
    {
      "date": "2020",
      "region": "north of east",
      "city": "D",
      "profit": 5,
      "sales": 10,
      "discount": 0.5
    },
    {
      "date": "2020",
      "region": "north of east",
      "city": "E",
      "profit": 4,
      "sales": 8,
      "discount": 0.5
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      enable

      enable

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "legend": {
    "enable": false
  },
  "dataset": [
    {
      "date": "2019",
      "profit": 10,
      "sales": 20
    },
    {
      "date": "2020",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2021",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2022",
      "profit": 50,
      "sales": 100
    },
    {
      "date": "2023",
      "profit": 40,
      "sales": 80
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      labelColor

      labelColor

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "legend": {
    "enable": true,
    "position": "rt",
    "labelFontSize": 12,
    "labelColor": "#000",
    "labelFontWeight": "bold"
  },
  "dataset": [
    {
      "date": "2019",
      "profit": 10,
      "sales": 20
    },
    {
      "date": "2020",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2021",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2022",
      "profit": 50,
      "sales": 100
    },
    {
      "date": "2023",
      "profit": 40,
      "sales": 80
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      labelFontSize

      labelFontSize

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "legend": {
    "enable": true,
    "position": "rt",
    "labelFontSize": 12,
    "labelColor": "#000",
    "labelFontWeight": "bold"
  },
  "dataset": [
    {
      "date": "2019",
      "profit": 10,
      "sales": 20
    },
    {
      "date": "2020",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2021",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2022",
      "profit": 50,
      "sales": 100
    },
    {
      "date": "2023",
      "profit": 40,
      "sales": 80
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      labelFontWeight

      labelFontWeight

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "legend": {
    "enable": true,
    "position": "rt",
    "labelFontSize": 12,
    "labelColor": "#000",
    "labelFontWeight": "bold"
  },
  "dataset": [
    {
      "date": "2019",
      "profit": 10,
      "sales": 20
    },
    {
      "date": "2020",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2021",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2022",
      "profit": 50,
      "sales": 100
    },
    {
      "date": "2023",
      "profit": 40,
      "sales": 80
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      maxSize

      maxSize

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "legend": {
    "enable": true,
    "position": "rt",
    "maxSize": 2
  },
  "dataset": [
    {
      "date": "2019",
      "region": "east",
      "city": "A",
      "profit": 1,
      "sales": 2,
      "discount": 0.5
    },
    {
      "date": "2019",
      "region": "east",
      "city": "B",
      "profit": 3,
      "sales": 6,
      "discount": 0.5
    },
    {
      "date": "2019",
      "region": "east",
      "city": "C",
      "profit": 3,
      "sales": 6,
      "discount": 0.5
    },
    {
      "date": "2019",
      "region": "east",
      "city": "D",
      "profit": 5,
      "sales": 10,
      "discount": 0.5
    },
    {
      "date": "2019",
      "region": "east",
      "city": "E",
      "profit": 4,
      "sales": 8,
      "discount": 0.5
    },
    {
      "date": "2020",
      "region": "north of east",
      "city": "A",
      "profit": 1,
      "sales": 2,
      "discount": 0.5
    },
    {
      "date": "2020",
      "region": "north of east",
      "city": "B",
      "profit": 3,
      "sales": 6,
      "discount": 0.5
    },
    {
      "date": "2020",
      "region": "north of east",
      "city": "C",
      "profit": 3,
      "sales": 6,
      "discount": 0.5
    },
    {
      "date": "2020",
      "region": "north of east",
      "city": "D",
      "profit": 5,
      "sales": 10,
      "discount": 0.5
    },
    {
      "date": "2020",
      "region": "north of east",
      "city": "E",
      "profit": 4,
      "sales": 8,
      "discount": 0.5
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      position

      position

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "legend": {
    "enable": true,
    "position": "bl"
  },
  "dataset": [
    {
      "date": "2019",
      "profit": 10,
      "sales": 20
    },
    {
      "date": "2020",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2021",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2022",
      "profit": 50,
      "sales": 100
    },
    {
      "date": "2023",
      "profit": 40,
      "sales": 80
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      staticLegend

      设置 interactive: false，仅关闭图例悬停、选择、聚焦和筛选；沿用既有布局和标记样式。

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "donut",
  "dataset": [
    {
      "category": "消费者",
      "share": 62
    },
    {
      "category": "其他客户",
      "share": 38
    }
  ],
  "dimensions": [
    {
      "id": "category",
      "encoding": "color"
    }
  ],
  "measures": [
    {
      "id": "share",
      "alias": "订单占比",
      "encoding": "angle",
      "format": {
        "type": "number",
        "suffix": "%",
        "fractionDigits": 1
      }
    }
  ],
  "label": {
    "enable": false
  },
  "color": {
    "colorScheme": [
      "#56dabb",
      "#c1f3e6"
    ]
  },
  "legend": {
    "interactive": false,
    "position": "bottom",
    "border": false,
    "shapeType": "circle",
    "labelFontSize": 10
  }
}

  return <VSeedRender vseed={vseedConfig} />
}