antV G2在vue中的使用

最新推荐文章于 2024-07-25 10:39:29 发布

kleinBlue.

最新推荐文章于 2024-07-25 10:39:29 发布

阅读量1.5k

点赞数 4

分类专栏： web前端 Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_43299703/article/details/120487293

版权

本文档详细介绍了如何在Vue项目中使用antV G2来创建双折线图，包括安装、组件引入、模板创建、数据声明、图表方法的编写，并解决了在Vue中图表宽度自适应的问题，提出通过$nextTick或setTimeout来确保图表正确显示。同时，推荐查阅antV官方文档以获取更多关于G2的快速上手和API信息。

摘要由CSDN通过智能技术生成

以双折线图为例记录，最终效果图

安装

npm install @antv/g2 --save

在需要的vue文件中引入

import G2 from '@antv/g2';          //引入G2
import { Chart } from "@antv/g2";   //或者只引入需要用到的G2组件，我要用Chart
const DataSet = require('@antv/data-set'); //antV中用DataSet作为数据集，可以对原始数据进行操作，比如格式转换之类的，以供图表方法使用，当然也可以不用，不管什么方法只要把数据格式转变成它需要的格式就可以了

创建template

<template>
    <div id="chartDiv"></div>       <--图表会显示在这个div中</-->
<template>

声明数据

//双折线，vs是一条，vk是一条。此处假如后端返给我的是这种格式，后面要进行转换
data() {
    return {
        chartDataDouble: [      
            { time: "周一", vs: 1234, vk: 124 },
            { time: "周二&#