如何实现百分比条形和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=...Online demo：https://codesandbox.io/s/bar-chart-and-tgi-chart-8fkprk?file=...相关文档 Related DocumentationVChart组合图教程：https://visactor.bytedance.net/vchart/guide/tutorial_docs/Cha...组合图配置项：https://visactor.bytedance.net/vchart/option/commonChart#typegithub：https://github.com/VisActor/VChart