VisActor/VChart

[Demo] demo of funnel chart

Open

#2,657 opened on May 11, 2024

View on GitHub
 (4 comments) (0 reactions) (0 assignees)TypeScript (212 forks)user submission
demosgood first issue

Repository metrics

Stars
 (1,800 stars)
PR merge metrics
 (Avg merge 3d 12h) (15 merged PRs in 30d)

Description

  1. 实现如下漏斗图

  2. 交互状态效果如下

demo中用到的数据如下

[{
        "label": "进入直播间人数",
        "value": 10000,
        "attach": "万",
        "average": 2000
    }, {
        "label": "商品曝光人数",
        "value": 9000,
        "attach": "万",
        "average": 1000
    }, {
        "label": "商品点击人数",
        "value": 5000,
        "attach": "万",
        "average": 500
    }, {
        "label": "创建订单人数",
        "value": 2000,
        "attach": "万",
        "average": 200
    }]

Contributor guide

Research direction
Study the VChart funnel chart documentation and examples to replicate the given design and interactions.
Tech stack
typescript
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
TypeScriptVChart basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60