能否给图表添加基于数据值计算的平均线横线？-灵析社区
强哥喝假酒在使用 VChart 图表库时，能否做到类似于下图的效果，在图表中添加标注线表示数据的平均值？ 
一只臭美的Doggg解决方案 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)
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250111/b05b0fdc147321380df43ec3b585336f.png)
相关文档 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)