VisActor/VChart

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

Closed this issue · 1 comments

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

跟随正常迭代修复