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

vue:antV G2在vue中的使用(阿里图表,类似echarts)

程序员文章站 2022-04-21 23:48:35
...

效果比echarts好看

vue:antV G2在vue中的使用(阿里图表,类似echarts)

 官方文档:https://g2.antv.vision/zh/docs/manual/getting-started

 转载来源:https://www.jianshu.com/p/a836ae8aeeb7

一、安装

npm install @antv/g2 --save

本人下面这个也安装了

npm install --save @antv/data-set

二、引入

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

三、创建案例

3.1、创建template

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

3.2、数据

//双折线,vs是一条,vk是一条。此处假如后端返给我的是这种格式,后面要进行转换
data() {
    return {
        chartDataDouble: [      
            { time: "周一", vs: 1234, vk: 124 },
            { time: "周二", vs: 1245, vk: 364 },
            { time: "周三", vs: 1456, vk: 428 },
            { time: "周四", vs: 1526, vk: 523 },
            { time: "周五", vs: 1548, vk: 92 },
            { time: "周六", vs: 1798, vk: 242 },
            { time: "周日", vs: 1723, vk: 131 },
        ]
    }
}

3.3、方法

methods: {
    //图表
    initLineChart() {
        const chart = new Chart({       // 创建一个图表
            container: "chartDiv",      // 容器是上面那个div
            autoFit: true,              // 自适应
            height: 300                 // 高度
        });

        const ds = new DataSet();       // 声明数据集 附官方文档 https://g2.antv.vision/zh/docs/manual/dataset/dataset
        const dv = ds.createView().source(this.chartDataDouble);    // 使用上面的数据chartDataDouble创建数据视图dv
        // fold 方式完成了行列转换,如果不想使用 DataSet 直接手工转换数据即可 --官方注释
        dv.transform({                  // 附transform API https://g2.antv.vision/zh/docs/manual/dataset/transform
            type: 'fold',
            fields: ['vs', 'vk'],       // 展开字段集
            key: 'type',                // key字段
            value: 'count'              // value字段
        });
        // 以上的数据转换后一条转为两条,eg:
        // { time: "周一", vs: 1234, vk: 124 }, 转换后=>
        // { "time": "周一", "type": "vs", "count": 1234 },{ "time": "周一", "type": "vk", "count": 124 },
        
        chart.data(dv.rows);            // 现在可以将dv的rows作为数据源
        chart.scale({                   // 之前的chart.source()方法已经替换为chart.data()和chart.scale()
            time: {
                range: [0, 1]           // 输出数据的范围,默认[ 0, 1 ],格式为 [ min, max ],min 和 max 均为 0 至 1 范围的数据 --官方
            },                          // 简单来说就是 这个图标的多少用于显示数据[0,1]就是数据占满横坐标宽度,[0,0.5]就是还余下半个空的横坐标
            count: {
                min: 0,                 // 我的纵坐标count的最小值,不设置的话自动取数据中最小数的作为y=0的起始
                nice: true              // 默认为 true,用于优化数值范围,使绘制的坐标轴刻度线均匀分布。例如原始数据的范围为 [3, 97],如果 nice 为 true,那么就会将数值范围调整为 [0, 100] --官方
            },
        });
        chart.tooltip({
            showCrosshairs: true,       // 展示 Tooltip 辅助线
            shared: true,
            crosshairs: {
                type: 'line'
            }
        });
        chart.axis('count', {           // 坐标轴
            label: {
            formatter: function formatter(val) {
                return val ;            // 这里可以改坐标刻度的形式
            }
            }
        });
        chart.line().position('time*count').color('type').shape('smooth');      //方法都在官方
        chart.point().position('time*count').color('type').size(4).shape('circle').style({
            stroke: '#fff',             // 描边
            lineWidth: 1                // 宽度
        });
        chart.render();                 // 这个图表终于要被渲染展示了...
    },
}

3.4、调用

mounted () {
   this.initLineChart();
},

四、完