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

## 解决方案 Solution 不同图表库的解决方案不一样，根据你给的demo，只需要将配置`markLine.label.``position` 为所需场景。 * `markLine.label.``position` 用来配置标注线的标签位置（标签相对线的相对位置）。 * 当文字标签显示在线的起点时，可配置`position` 为`'start'` * 当文字标签显示在线的终点时，可配置`position` 为`'end'` * 当文字标签显示在线段中间时，可配置`position` 为`'middle'`  ## 代码示例 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":  position: "middle":  position: "end":  ## 相关文档 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)