vue 中使用 @antv/g2图表库

1.安装npm install @antv/g2 --save
2.使用
2.1引入文件和基础配置

import { Chart } from '@antv/g2';

2.2 创建 div 图表容器

<div id="container"></div>

2.3 编写图表绘制代码
2.3.1new Chart() 创建 Chart 图表对象，指定图表所在的容器 id、图表的宽高、边距等信息；
2.3.2chart.data() 载入图表数据源；
2.3.3使用图形语法进行图表的绘制；
2.3.4chart.render() 渲染图表。
完整代码如下：

// index.js文件
import { Chart } from '@antv/g2';  //引入
const data = [   //模拟假数据
  { year: '1951 年', sales: 38 },
  { year: '1952 年', sales: 52 },
  { year: '1956 年', sales: 61 },
  { year: '1957 年', sales: 145 },
  { year: '1958 年', sales: 48 },
  { year: '1959 年', sales: 38 },
  { year: '1960 年', sales: 38 },
  { year: '1962 年', sales: 38 },
];
const chart = new Chart({  //创建 Chart 图表对象
  container: 'container',
  autoFit: true,
  height: 500,
});

chart.data(data); // 载入图表数据源
chart.scale('sales', {  // 自动调整最小值最大值
  nice: true, 
});

chart.tooltip({  // tooltip提示
  showMarkers: false
});
chart.interaction('active-region');

chart
	.interval()
	.position('year*sales')
	adjust('stack')
        .position('percent')  //映射x,y轴，一个的话
        .color('item')   //必须要加，不然不显示，包含了色调、饱和度和亮度
        .label('percent', percent => ({  // 数据标签，一般在图上面
          content: res => `${res.item}: ${percent}%`,
        })) // 将数据值映射到图形的文本上的方法
        .tooltip('year*sales', (year, sales) => ({  // data中的数据返回，用作提示
          name: year,
          value: title === '订单总量' ? `${sales} 单` : `￥${sales}`,
        })) // 加载初始化数据，，year是纵轴标题，scales是横轴标题

// 声明需要进行自定义图例字段： 'item'
      chart.legend('item', {
        position: 'right', // 图例显示位置
        custom: true, // 关键字段，告诉 G2，要使用自定义的图例
        items: data.map((obj, index) => ({
          name: obj.item,
          value: obj.count,
          marker: {
            symbol: 'square',
            style: {
              r: 5,
              fill: chart.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
            },
          },
        })),
        itemValue: {
          style: {
            fill: '#999999',
          },
          formatter: val => (title === '订单总量' ? `${val} 单` : `￥${val}`), // 格式化 itemValue 内容
        },
      })
chart.render();

// index.html文件
<div id="container" />