图形用的antv plot 里面的折线图 没有查到相关案例 要实现的效果如下:
<!DOCTYPE html>
<html>
<body>
<div id="c1"></div>
<div id="c2"></div>
<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.4/g2.min.js"></script>
<script>
const data = [{ genre: 'Sports', sold: 275 }, { genre: 'Strategy', sold: 115 }, { genre: 'Action', sold: 120 },];
const chart1 = new G2.Chart({container: 'c1', height : 300 });
const chart2 = new G2.Chart({container: 'c2', height : 300 });
for(const chart of [chart1,chart2]){
chart.source(data);
chart.interval().position('genre*sold').color('genre')
chart.render();
}
// 线表联动
const connect = (...charts) => {
for(const chartSrc of charts){
for(const chartDest of charts){
if(chartSrc === chartDest){
continue;
}
chartSrc.on('plotmove', e => {chartDest.showTooltip(e);})
chartSrc.on('plotleave', () => {chartDest.hideTooltip();})
}
}
}
connect(chart1,chart2);
</script>
</body>
</html>