能否给图表添加基于数据值计算的平均线横线？-灵析社区

## 解决方案 Solution VChart有着丰富的数据标注能力，对于您描绘的场景，只需要在markLine中配置`x: 'average'`即可。 ## 代码示例 Code Example const spec = { type: "bar", data: [ { id: "barData", values: [ { type: "Autocracies", year: "1930", value: 129 }, { type: "Autocracies", year: "1940", value: 133 }, { type: "Autocracies", year: "1950", value: 130 }, { type: "Autocracies", year: "1960", value: 126 }, { type: "Autocracies", year: "1970", value: 117 }, { type: "Autocracies", year: "1980", value: 114 }, { type: "Autocracies", year: "1990", value: 111 }, { type: "Autocracies", year: "2000", value: 89 }, { type: "Autocracies", year: "2010", value: 80 }, { type: "Autocracies", year: "2018", value: 80 }, { type: "Democracies", year: "1930", value: 22 }, { type: "Democracies", year: "1940", value: 13 }, { type: "Democracies", year: "1950", value: 25 }, { type: "Democracies", year: "1960", value: 29 }, { type: "Democracies", year: "1970", value: 38 }, { type: "Democracies", year: "1980", value: 41 }, { type: "Democracies", year: "1990", value: 57 }, { type: "Democracies", year: "2000", value: 87 }, { type: "Democracies", year: "2010", value: 98 }, { type: "Democracies", year: "2018", value: 99 } ] } ], xField: ["year", "type"], yField: "value", seriesField: "type", legends: { visible: true, orient: "top", position: "start" }, markLine: [ { y: "average", label: { visible: true, position: "insideEndTop", text: "Average Country", style: { fill: "#000" }, labelBackground: { visible: false } } } ] }; 在线效果参考：[https://codesandbox.io/s/average-markline-wgfdkg](https://link.segmentfault.com/?enc=13H1l1PCecynlRu%2FPFCoLw%3D%3D.JwgdqiPNdSEgqWG09FswzFHpXTRlWxqUCKLoiykuZ3XBKJWNRb2VU9HWY1vZ6O49%2FldlKMRO30p6oFSUgadWyQ%3D%3D)  ## 相关文档 Related Documentation 图表标注线demo：[https://visactor.io/vchart/demo/marker/mark-line-axis](https://link.segmentfault.com/?enc=DBR2fIQ9xAWZeyg9gj3BlA%3D%3D.LpsJZkND9zDibYBeA01om%2BWpfZnPPJOW26PLP8XLsHSFdH0XimywlwACgc6qrlNa0uUEYmCHOekR3vXsx%2BtnMQ%3D%3D) 图表标注教程：[https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts...](https://link.segmentfault.com/?enc=bP8eIdcVxlnls%2Bhr8O955g%3D%3D.co0BUrs6ZKITuEQRTvQa9lBa8Nfcu5YIUUMZVpDLdK1aL6otIw9tDbtyZhWf1Hbihf9P%2BtK%2FLNMzQoE7%2Ffq5UeVjALVEj6xYD85s9P9%2FF%2Bg%3D) 相关api：[https://visactor.io/vchart/option/barChart#markLine.y](https://link.segmentfault.com/?enc=mw1eoAXbZzfVEnXFqhKnrQ%3D%3D.IV9b%2BegVS6ci49uO08rNDNwqqgjRSeA1aAx4c3Yyhpq%2BkDIDmMS31seJcKwekh2wwRQwPWAF1OOOohH7VnZ4vw%3D%3D) github：[https://github.com/VisActor/VChart](https://link.segmentfault.com/?enc=4pQhbcq6BYy0tBTkcv1thw%3D%3D.R2%2BsPoa6iF4ju01qlpHyNclC%2BLvAxUUbBP7rHq9h7n852X1f9xzQkxPWHBugv0qL)