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