当前位置：首页 > news >正文

Antv/G2 分组柱状图+折线图双轴图表

news 2025/8/7 0:48:29

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,height=device-height"><title>分组柱状图+折线图双轴图表</title><style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}#chartcontainer {margin: 50px auto;text-align: center;}
</style>
</head>
<body><div id="chartcontainer"></div><script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script><script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.2.8/dist/g2.min.js"></script><script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.11.1/dist/data-set.js"></script><script><!-- 浏览器引入，请使用全局命名空间 G2，如 new Chart() 改为 new G2.Chart，即可运行。 -->const data = [{date: '2023/8/1', type: 'london', value: 4623, rate: 0.33}, {date: '2023/8/1', type: 'tokyo', value: 2208, rate: 0.53}, {date: '2023/8/1', type: 'paris', value: 182, rate: 0.63}, {date: '2023/8/2', type: 'london', value: 6145, rate: 0.13}, {date: '2023/8/2', type: 'tokyo', value: 2016, rate: 0.33}, {date: '2023/8/2', type: 'paris', value: 257, rate: 0.33}, {date: '2023/8/3', type: 'london', value: 508, rate: 0.23},{date: '2023/8/3', type: 'tokyo', value: 2916, rate: 0.03},{date: '2023/8/3', type: 'paris', value: 289, rate: 0.73},{date: '2023/8/4', type: 'london', value: 6268, rate: 0.63}, {date: '2023/8/4', type: 'tokyo', value: 4512, rate: 0.63}, {date: '2023/8/4', type: 'paris', value: 428, rate: 0.53}, {date: '2023/8/5', type: 'london', value: 6411, rate: 0.33}, {date: '2023/8/5', type: 'tokyo', value: 8281, rate: 0.03}, {date: '2023/8/5', type: 'paris', value: 619, rate: 0.13},{date: '2023/8/6', type: 'london', value: 1890, rate: 0.43}, {date: '2023/8/6', type: 'tokyo', value: 2008, rate: 0.53}, {date: '2023/8/6', type: 'paris', value: 87, rate: 0.73},{date: '2023/8/7', type: 'london', value: 4251, rate: 0.03}, {date: '2023/8/7', type: 'tokyo', value: 1963, rate: 0.13}, {date: '2023/8/7', type: 'paris', value: 706, rate: 0.83}]var chart = new G2.Chart({container: 'chartcontainer',autoFit: true,width: 300,height: 300,padding: [80, 80, 50, 80]});chart.data(data);chart.scale({ value: {formatter: (val) => {return val + '万'},sync: true,  nice: true,},          rate: {formatter: (rate) => {return rate + '%'},sync: true,  nice: true,}    });chart.legend('type',{position: 'top' // 设置图例的显示位置       })chart.axis('rate', {grid: null,label: {textStyle: {fill: '#6495ED'}}});chart.interval().position('date*value').color('type').adjust([{type: 'dodge',marginRatio: 1 / 32}])chart.line().position('date*rate').color('type').size(3).shape('smooth');chart.point().position('date*rate').color('type').size(3).shape('circle');chart.render();</script>
</body>
</html>