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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

页面效果：
在这里插入图片描述

相关阅读:
如何避免手动修改文件名，批量重命名文件的方法
GB28181 编码规则说明
测试接口遇到APP加密？先来了解一下算法思路~
恩智浦半导体基于离子阱研发“经典+量子”解决方案
Java进阶（十二）多线程
pollLast() 和poll啥区别
perspectiveTransform warpPerspective getPerspectiveTransform findHomography
浅谈C++|文件篇
maven解决报错：Could not transfer artifact net.bytebuddy:byte-buddy:jar:1.7.9
购买服务器，并安装宝塔

原文地址：https://blog.csdn.net/HH18700418030/article/details/134447163