如何配置MarkLine文字标签的位置，可以配置显示在线起点、终点或者线段中间？-灵析社区

努力的大名

解决方案 Solution 不同图表库的解决方案不一样，根据你给的demo，只需要将配置"markLine.label.``position" 为所需场景。 * "markLine.label.``position" 用来配置标注线的标签位置（标签相对线的相对位置）。 * 当文字标签显示在线的起点时，可配置"position" 为"'start'" * 当文字标签显示在线的终点时，可配置"position" 为"'end'" * 当文字标签显示在线段中间时，可配置"position" 为"'middle'" "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250101/6efec6ec2ec993f685e91acbdeb11b57.png) 代码示例 Code Example 代码参考 Code Example const spec = { type: 'scatter', padding: [12, 20, 12, 12], xField: 'x', yField: 'y', sizeField: 'z', size: { type: 'linear', range: [20, 80] }, axes: [ { orient: 'bottom', type: 'linear', min: 60, max: 95 }, { orient: 'left', type: 'linear', min: 0, max: 200 } ], point: { style: { fillOpacity: 0.25, lineWidth: 1, stroke: '#6690F2', fill: '#6690F2' } }, label: { visible: true, position: 'center', overlap: { avoidBaseMark: false }, style: { stroke: '#fff', lineWidth: 1 } }, markLine: [ { x: 65, label: { visible: true, position: 'end', text: 'Safe fat intake 65g/day', style: { textAlign: 'left', textBaseline: 'top', fill: '#000', dx: 10 }, labelBackground: { visible: false } }, line: { style: { stroke: '#000', lineDash: [0] } } }, { y: 50, label: { visible: true, position: 'end', text: 'Safe sugar intake 50g/day', style: { textAlign: 'right', textBaseline: 'bottom', fill: '#000' }, labelBackground: { visible: false } }, line: { style: { stroke: '#000', lineDash: [0] } } } ], tooltip: { mark: { title: { value: datum => datum.country } } }, data: { id: 'data', values: [ { x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' }, { x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany' }, { x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland' }, { x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands' }, { x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden' }, { x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' }, { x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France' }, { x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway' }, { x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom' }, { x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy' }, { x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia' }, { x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' }, { x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary' }, { x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal' }, { x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand' } ] } }; 结果展示 Results 在线效果参考："https://codesandbox.io/s/mark-line-basic-srhwq3" (https://link.segmentfault.com/?enc=KE3bbdpqkMM8HJQlvvEWvQ%3D%3D.MlTVpEcsCJYwYDgaUjoezCOfiCweRWEG0uZ82hx9AKuTGwzBSUWcvFE6oDjO3HzF) position: "start": "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250101/bc7186a6e16ccda440625932125e45f9.png) position: "middle": "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250101/5fa3ea79e0b94e92d767de780e74dcc1.png) position: "end": "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250101/5809065f452ff09d390f9e915ec201f8.png) 相关文档 Related Documentation markLine demo："https://www.visactor.io/vchart/demo/marker/mark-line-basic" (https://link.segmentfault.com/?enc=bSpspcsc%2BMv7Q0Ayg8kITw%3D%3D.2apbJfk7Dvt8CoN5%2Bt1B5tAOCJHSCgL405orL8Gg3jxLPtY2uDlCeg6hhzHWFGO4YEZHdJryBBrIMSEBgDuzcg%3D%3D) markLine教程："https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Conc..." (https://link.segmentfault.com/?enc=xV5CuY%2F4BeGSUWiFnIFuHA%3D%3D.NuHTBJQUCgaYXnP3gcF1xNG9hw0FZ%2Fg%2BRVKMAci4%2B4%2BX37Cz%2FAJ50Zj2xZ%2FS25vHolB%2FUGK%2F7auykghuE4MPn7qeQQO0JJF%2F6EUw36Sih6M%3D) 相关api："https://www.visactor.io/vchart/option/barChart#markLine.label..." (https://link.segmentfault.com/?enc=RiPiXHXEEKKoAWL%2BY6hGTg%3D%3D.02fX5GiXvKvfjXR7%2FC2Z8gd2lVUBrkj0TeMwRxAIxa5sEChuHV9OniMd%2F3B8cx0RO4BVsmD4cWUrncvanDzysWv5FeXyslyDUTXyfEMCB9U%3D) github："https://github.com/VisActor/VChart" (https://link.segmentfault.com/?enc=h6bvd5bYtjcFDybF9uqkiw%3D%3D.A1zfrzEq27NqXy23Vo%2ByvjjarnoVBpMb2DjDcIwayHW3VQV01D%2FOEigzSjnr8dTu)