VChart 仪表盘如何自定义标题的显示位置？-灵析社区

## 解决方案 Solution 你可以配置指标卡 `indicator`。指标卡默认显示在图表中间，你可以配置一个 y 方向的偏移量。indicator 也支持多行文本，以及分别设置样式： indicator: [ { visible: true, title: { style: { text: 'Normal', dy: 100, fill:'rgb(99,110,124)', fontSize: 40, fontWeight: 800 } }, content: [ { visible: true, style: { fontSize: 20, dy: 100, fill:'rgb(193,200,204)', fontWeight: 800, text: 'Quality' } } ] } ], ## 代码示例 Code Example 代码参考 Code Example const pointerPath = "M-0.020059 -0.978425 C-0.018029 -0.9888053 -0.013378 -1 0 -1 C0.01342 -1 0.01812 -0.989146 0.0201 -0.978425 C0.02161 -0.9702819 0.0692 -0.459505 0.09486 -0.184807 C0.10298 -0.097849 0.1089 -0.034548 0.11047 -0.018339 C0.11698 0.04908 0.07373 0.11111 0.00002 0.11111 C-0.07369 0.11111 -0.117184 0.04991 -0.110423 -0.018339 C-0.103662 -0.086591 -0.022089 -0.9680447 -0.020059 -0.978425Z"; const circlePath = "M1 0 C1 0.55228 0.55228 1 0 1 C-0.552285 1 -1 0.55228 -1 0 C-1 -0.552285 -0.552285 -1 0 -1 C0.55228 -1 1 -0.552285 1 0Z"; const spec = { type: "gauge", data: [ { id: "id0", values: [ { type: "目标A", value: 0.6 } ] } ], radiusField: "type", angleField: "value", seriesField: "type", outerRadius: 0.8, innerRadius: 0.7, startAngle: -225, endAngle: 45, indicator: [ { visible: true, offsetY: '50%', title: { style: { text: "Normal", fill: "rgb(99,110,124)", fontSize: 40, fontWeight: 800 } }, content: [ { visible: true, style: { fontSize: 20, fill: "rgb(193,200,204)", fontWeight: 800, text: "Quality" } } ] } ], gauge: { type: "circularProgress", cornerRadius: 10, progress: { style: { fill: { gradient: "conical", stops: [ { offset: 0, color: "#4FC6B4" }, { offset: 1, color: "#31679E" } ] } } }, track: { style: { fill: "#ccc" } } }, pointer: { width: 0.5, height: 0.5, style: { path: pointerPath, fill: "#5A595E" } }, pin: { style: { path: circlePath, fill: "#888" } }, pinBackground: { width: 0.08, height: 0.08, style: { path: circlePath, fill: "#ddd" } } }; ## 结果展示 Results 在线效果参考：[https://codesandbox.io/s/gauge-indicator-tvh2hd](https://link.segmentfault.com/?enc=JE55%2BLwpu8KmJ2C8g%2BcGGg%3D%3D.ak%2BaIBaa8uTClf3%2BIO4g4SRfFPb5Fz6hPDUYC7SEMe8%2B2ZnDxplOYhCImlmJYAFg)  ## 相关文档 Related Documentation 相关教程：[https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts...](https://link.segmentfault.com/?enc=6lVY7465Fm924mfodzixLw%3D%3D.j6Mh7OA9Jk3ILxh7CD1H6IJP0fMx%2FwN2DZDWj0%2FQwWAiFd069KN9NA3aBIAE3GjxEjMgIhZQs5URM2CJFyNoYRKxYNicJdnyzE42n2q5YwY%3D) 相关 api：[https://visactor.io/vchart/option/gaugeChart#indicator.offsetY](https://link.segmentfault.com/?enc=B0tX2Mg02jJoDiNwfxLpTw%3D%3D.m4YVWzjSjJWrOuwgXT1Pk2YzsmgE5%2BYm0Azy3OvFGTJAq0CLjM7dsT7N8nHg0dcSZZtAaCZ8xu0%2B%2FEfZC7rw0Q%3D%3D) github：[https://github.com/VisActor/VChart](https://link.segmentfault.com/?enc=HBAEu2UPTsrkQWqqKkermA%3D%3D.iYLzblWX3iCOLg3bMHHIsq4wCIA%2BMgxSExmyisYkZhUVWbvgQNPVJ0S5QCzrhzHe)