欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 中使用 @antv/g2图表库

程序员文章站 2022-04-21 21:36:19
...

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" />