如何实现百分比条形和tgi图的组合？-灵析社区
感觉对了如下图所示，我想使用前端图表库实现百分比条形图和tgi图的组合：  tgi图使用垂直方向的柱子来表示tgi数值，并用折线将不同的柱子链接。两个图表使用不同的坐标轴，请问该如何实现呢？
时光旅人解决方案 Solution
你可以使用@VisActor/VChart实现想要的效果。VChart允许多个series组合在一张图表中，仅需要将图表类型设为common，并在series中添加柱状图和折线图的series，修改折线图的线样式为虚线，点样式为矩形，即可实现图中效果。为了实现柱图与线图使用不同的坐标轴，在axes中，需要配置3个坐标轴：左侧的band轴，底部线图的linear轴，除此之外还需要给柱图配置一个linear轴。你可以将该轴放置在顶部并将visible设为false，并通过调整max属性，指定轴的范围，实现图中的效果。
代码示例 Code Example
图表spec如下：
{
type: 'common',
data: [ { "id": "data",
"values": [ { "x": "2015-09-24", "y": 0.6 }, { "x": "2015-09-25", "y": 0.7 }, { "x": "2015-09-26", "y": 0.71 }, { "x": "2015-09-27", "y": 0.65 }, { "x": "2015-09-28", "y": 0.53 }, { "x": "2015-09-29", "y": 0.55 } ]},
{ "id": "data2",
"values": [ { "x": "2015-09-24", "y": 40 }, { "x": "2015-09-25", "y": 25 }, { "x": "2015-09-26", "y": 31 }, { "x": "2015-09-27", "y": 37 }, { "x": "2015-09-28", "y": 28 }, { "x": "2015-09-29", "y": 22 } ] }
],
series: [
{
type: 'bar',
id:'barSeries',
direction:'horizontal',
dataId:'data',
yField: 'x',
xField: 'y',
},
{
type: 'line',
id:'lineSeries',
direction:'horizontal',
dataId:'data2',
yField: 'x',
xField: 'y',
line:{
style:{
lineDash:[2,5]
}
},
point:{
style:{
symbolType:'rect',
size:10,
scaleX:1,
scaleY:10,
}
}
}
],
axes: [
{
orient: 'left',
seriesId:['barSeries','lineSeries'],
type: 'band',
grid: {
visible: true
}
},
{
orient: 'top',
type: 'linear',
max:1.2,
seriesId:['barSeries'],
grid: {
visible: true
},
visible:false
},
{
orient: 'bottom',
type: 'linear',
seriesId:['lineSeries'],
grid: {
visible: true
},
}
],
}
结果展示 Results
在线效果参考："https://codesandbox.io/s/bar-chart-and-tgi-chart-8fkprk?file=..." (https://link.segmentfault.com/?enc=w9aPIFY8l0DNhbCi84LbtA%3D%3D.mpaT9vbCGeAMAYClXvc3xCD%2FcUsBPepWw4%2FwuRnotSsqinDvZKwORqqMDutgDhOmxDQVbihNBNXw7yyBg2MDRDS2TYFoztjIbzopAPxXjYw%3D)
Online demo："https://codesandbox.io/s/bar-chart-and-tgi-chart-8fkprk?file=..." (https://link.segmentfault.com/?enc=8ha1UKozQGxvIuDekLiX3w%3D%3D.1J6k3CajoI%2F%2BSNeJ25ixpssjiEKqBrMayyYi%2Blm5oyjRurwQXXnyPpLlL2ZljpE2PKNGBi3Kh9jEDVh6E8P1bmTmeRPg87jSXiGMRUWYHbs%3D)
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/7d76fbc489839dc4875610270f40551d.png)
相关文档 Related Documentation
VChart组合图教程："https://visactor.bytedance.net/vchart/guide/tutorial_docs/Cha..." (https://link.segmentfault.com/?enc=TEtVNOFDwOnGV%2F5MNNDoSg%3D%3D.KB6iyHWQHUDFpzfO2DVYwJLIrjrhtlokFNl1CY%2FL2iZhmCUPiBbJmUGePMDvMcFtMKgWHfioDd%2BgGaq9KL%2FdVPwgRN5%2BAdPVHci8mYYXESCNjt9tE3Ml8Bk4cO%2Bg4Hg5)
组合图配置项："https://visactor.bytedance.net/vchart/option/commonChart#type" (https://link.segmentfault.com/?enc=8sqkL3e3sxnaHP4qMk2IXA%3D%3D.GGC025CTU6h2zNvtrzF0rDtPi7FIOwbdHMJCE4M9err9o4nVTxBp5AwvUK7ULacz0IJJRa428RbB0VtEyDVQAw%3D%3D)
github："https://github.com/VisActor/VChart" (https://link.segmentfault.com/?enc=rtBe9ldgE0pIKatEeZQ%2Bow%3D%3D.MLFZezYI26BZe1WYFVty1OPwfdB3emuh2bcI5avBjOHrODZceY5L5fpLjoB121Uc)