VisActor / VChart

VChart, more than just a cross-platform charting library, but also an expressive data storyteller.
https://www.visactor.io/vchart
MIT License
776 stars 45 forks source link

当仪表盘图设置为半圆时,如何使画布高度适应图表高度 #2727

Closed 497363983 closed 1 month ago

497363983 commented 1 month ago

目前,仪表盘图是按照圆心在画布内居中,这使得当仪表盘设置为半圆时,整个chart位于画布的上半部分,下半部分空白。如何配置能消除下面的空白画布?一个简单的例子:

import "./style.css";
import { default as VChart, IGaugeChartSpec } from "@visactor/vchart";

const spec: IGaugeChartSpec = {
  type: 'gauge',
  data: [
    {
      id: 'pointer',
      values: [
        {
          type: 'A',
          value: 0.6
        }
      ]
    },
    {
      id: 'segment',
      values: [
        {
          type: 'Level 1',
          color: '#07A35A',
          value: 0.4
        },
        {
          type: 'Level 2',
          color: '#FFC528',
          value: 0.6
        },
        {
          type: 'Level 3',
          color: '#E33232',
          value: 0.8
        }
      ]
    }
  ],
  gauge: {
    type: 'gauge',
    dataIndex: 1,
    categoryField: 'type',
    valueField: 'value',
    seriesField: 'type',
    segment: {
      style: {
        cornerRadius: 10,
        fill: datum => datum['color']
      }
    },
    label: {
      visible: true,
      position: 'inside-outer',
      offsetRadius: 20,
      style: {
        text: datum => datum['type']
      }
    }
  },
  pointer: {
    style: {
      fill: '#666666'
    }
  },
  categoryField: 'type',
  valueField: 'value',
  outerRadius: 0.9,
  innerRadius: 0.6,
  startAngle: -180,
  endAngle: 0,
  axes: [
    {
      type: 'linear',
      orient: 'angle',
      inside: true,
      outerRadius: 0.9,
      innerRadius: 0.6,
      grid: { visible: false }
    }
  ]
};

const vchart = new VChart(spec, { dom: "container" });
vchart.renderAsync();

// 只为了方便控制太调试用,不要拷贝
(window as any).vchart = vchart;