Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] react-vchart 不支持gauge-pointer #3578

Closed
skie1997 opened this issue Dec 18, 2024 · 1 comment
Closed

[Bug] react-vchart 不支持gauge-pointer #3578

skie1997 opened this issue Dec 18, 2024 · 1 comment
Assignees
Labels
bug Something isn't working

Comments

@skie1997
Copy link
Contributor

Version

latest

Link to Minimal Reproduction

null

Steps to Reproduce

<GaugeChart
      height={140}
      outerRadius={1.6}
      innerRadius={1.2}
      startAngle={-180}
      endAngle={0}
      padding={0}
      centerY="90%"
      tooltip={{ visible: false }}
    >
      <Gauge
        animation={false}
        segment={{
          visible: true,
          style: {
            cornerRadius: 99,
            innerPadding: 20,
            fill: {
              type: 'threshold',
              field: 'value',
              domain: [61, 91],
              range: ['#F0A50F', '#EB6200', '#D7312A'],
            },
          },
        }}
        track={{ style: { fill: 'rgba(0, 0, 0, 0.05)' } }}
        radiusField="type"
        seriesField="type"
        angleField="value"
        data={{
          values: [
            { type: 'Level 1', value: 60 },
            { type: 'Level 2', value: 80 },
            { type: 'Level 3', value: 100 },
          ],
        }}
      />
      <Axis
        type="linear"
        orient="angle"
        outerRadius={1.6}
        min={0}
        max={100}
        grid={{ visible: false }}
        label={{
          visible: true,
          dataFilter: data => data.filter(datum => [0, 0.6, 0.8, 1].includes(datum.value)),
        }}
      />
      <Indicator
        offsetY="30%"
        title={{
          style: {
            text: '76',
            fontSize: 42,
            fontWeight: 500,
          },
        }}
        content={{
          style: {
            text: '2024-12-01 00:08:00',
            dy: 10,
            fontSize: 14,
          },
        }}
      />
    </GaugeChart>

Current Behavior

  1. 不知道怎么传入 gaugePointer,试了下在 GaugeChart 传入 pin 属性不生效
  2. 不知道在哪里传递 gaugePointer/segment 的 value

Expected Behavior

支持传入

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

@skie1997 skie1997 added the bug Something isn't working label Dec 18, 2024
@skie1997 skie1997 self-assigned this Dec 18, 2024
@skie1997
Copy link
Contributor Author

跟随正常迭代修复

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants