vue2中使用AntV 以g2plot为实例

目录
  • 使用AntV以g2plot为例
    • 效果
    • 代码
  • antV g2的简单运用
    • 安装
    • 语法介绍

使用AntV以g2plot为例

效果

代码

nmp 导入:

npm install @antv/g2plot

代码:

<template>
    <div id="app">
        <div id="container"></div>
    </div>
</template>
<script>
    import {
        Bar
    } from '@antv/g2plot';
    export default {
        name: 'App',
        data() {
            return {
                sj: [{
                        year: '1951 年',
                        value: 38
                    },
                    {
                        year: '1952 年',
                        value: 52
                    },
                    {
                        year: '1956 年',
                        value: 61
                    },
                    {
                        year: '1957 年',
                        value: 145
                    },
                    {
                        year: '1958 年',
                        value: 48
                    },
                    
                ]
            }
        },
        mounted() {
            const bar = new Bar('container', {
                data: this.sj,
                xField: 'value',
                yField: 'year',
                seriesField: 'year',
                legend: {
                    position: 'top-left',
                },
            });
            bar.render();
        }
    }
</script>
<style>
</style>

antV g2的简单运用

G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性。

使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。

安装

npm install @antv/g2 --save

成功安装完成之后,即可使用 import 或 require 进行引用。

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

在绘图前我们需要为 G2 准备一个 DOM 容器:

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

数据类型和实现步骤

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({
  container: 'container',
  autoFit: true,
  height: 500,
});
chart.data(data);
chart.scale('sales', {
  nice: true,
});
chart.tooltip({
  showMarkers: false
});
chart.interaction('active-region');
chart.interval().position('year*sales');
chart.render();

语法介绍

1.new Chart() 创建 Chart 图表对象,指定图表所在的容器 id、图表的宽高、边距等信息;

2.chart.data() 载入图表数据源;

3.使用图形语法进行图表的绘制;

4.chart.render() 渲染图表。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 在vue中使用G2图表的示例代码

    G2笔记 G2是蚂蚁金服的一套开源图表插件,因项目需要研究了一下,相比Echarts来说,G2文档比较难懂,网上也没有太多示例,所以在这里记录一些使用G2遇到的问题. 官方推荐在vue项目中使用Viser,它对G2进行了封装,使用起来可能更方便,又研究了一个Viser,结果Viser整个只对viser-react如何使用进行了介绍,对viser-vue一笔带过,官网是这么介绍的: 我们以 viser-react 举例写一个 chore 图为例,viser-vue 和 viser-ng 的用法类似

  • 在vue项目中引用Antv G2,以饼图为例讲解

    我就废话不多说了,大家还是直接看代码吧~ npm install @antv/g2 --save template内容: <template> <div id="pieChart"></div> </template> js部分: ​//引入G2组件 import G2 from "@antv/g2"; ​ export default { name:"", //数据部分 data(){ retur

  • 在Vue中使用antv的示例代码

    一,在vue原型中使用 1.首先安装antv/g2 yarn add @antv/g2 --save 2.在main.js中挂在到vue原型实例中 const G2 = require('@antv/g2') Vue.prototype.$G2 = G2 3.在vue文件中可以直接在mounted生命周期中直接使用 <template> <div> <div id="c1"></div> </div> </templat

  • Vue.js 使用AntV X6的示例步骤

    0x0 前言 因为项目用到流程图,并且需求也算是不详细,所以选择比较灵活的 x6 图形编辑器作为流程图编辑器,从文档来看不算复杂,这边就是作为参考教程. Antv X6 文档 0x1 安装 根据教程提示安装 x6 依赖即可,然后新建个容器进行实例化: <div ref="containerRef" class="area-center-container" /> const data = { // 节点 nodes: [ { id: 'node1', /

  • vue2中使用AntV 以g2plot为实例

    目录 使用AntV以g2plot为例 效果 代码 antV g2的简单运用 安装 语法介绍 使用AntV以g2plot为例 效果 代码 nmp 导入: npm install @antv/g2plot 代码: <template>     <div id="app">         <div id="container"></div>     </div> </template> <sc

  • vue2中组件互相调用实例methods中的方法实现详解

    目录 前言: 开始前: 使用 第一步.定义全局mixin 第二步添加代码提示d.ts声明文件 在项目下新建jsconfig.json 添加shims-vue.d.ts声明文件 添加event-keys.d.ts声明文件 第三步编写webpack插件 新建global-dispatch.js 自动生成event-keys.d.ts 添加vue-path-loader.js webpack loader文件 配置vue.config.js 后记 仓库地址 总结 前言: 大家都知道在vue2中相互调用

  • Vue2中使用axios的3种方法实例总结

    目录 第一种 原始方法 直接在项目中使用(不建议使用) 第二种 将请求挂载到全局( 推荐使用 ) 第三种 将代码进行封装 总结 第一种 原始方法 直接在项目中使用(不建议使用) 这种方法最简单粗暴 优点:不需要做封装,不需要做配置傻瓜式操作,不需要做异步处理 缺点:代码太繁琐,当遇到请求过多的时候,这样写不适合读写 注意:如果你封装的请求有问题解决不掉,可以用这种最原始的方式来解决 <template> <div>{{data}}</div> </template

  • VUE2.0+Element-UI+Echarts封装的组件实例

    本文用Vue2.0+elementUI的panel组件和table组件+echarts的柱状图和折线图实现对结果的展示,实现了表格和图之间的切换和图和表之间的转置. -html <div class="resultDiv"> <div id="panels"> <el-collapse> <el-collapse-item v-for="item in indicators"> <templa

  • vue组件中使用props传递数据的实例详解

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的.  一.基本用法 组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信. 在组件中,使用选项props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字符串数组,一种是对象. 1.1 字符串数组: <div id="app4"> <my-component4 messa

  • Vue3中vuex的基本使用方法实例

    目录 一.基本结构 二.基本使用 三.将store中的数据模块化后的使用 1.模块化 2.使用 补充:如何改变vuex中的属性 总结 一.基本结构 src/store/index.js中,代码如下 // vue3中创建store实例对象的方法createStore()按需引入 import { createStore } from 'vuex' export default createStore({ state: { }, mutations: { }, actions: { }, gette

  • vue2中基于vue-simple-upload实现文件分片上传组件功能

    本文最主要参考的是这一篇,后端也是用django来完成. 大文件上传(秒传/断点续传)_使用Vue-Simple-Uploader插件 --Vue/Django完整实现 https://www.jb51.net/article/206178.htm 参考的代码地址:https://github.com/ClearlightY/FileUpload vue-simple-upload文档:https://github.com/simple-uploader/Uploader <template>

  • 一文搞懂Vue2中的组件通信

    目录 vue 组件通信方式 1.props传参 2.emit,on通信 3.$ref,$children实例通信 4.$parent通信 5.插槽通信(一般不用) 6.$attr,$listener深层双向通信 7.provide,inject依赖注入深层次单向通信 8.$bus事件总线全局通信 vue 组件通信方式 1.父组件将自己的状态分享给子组件使用: 方法:父组件通过子标签传递数据,子组件通过 props 接收 2.子组件改变父组件的状态; 方法:父组件在子标签上通过@abc 提供一个改

  • vue3:vue2中protoType更改为config.globalProperties问题

    目录 protoType替换为config.globalProperties Vue3 vs Vue2 Vue3 的新组件 文件对比 全局 API protoType替换为config.globalProperties 原文地址 在main.js中: vue2 Vue.prototype.$verson = '1.0.0' 使用 this.$verson vue3 Vue.config.globalProperties.$verson = '1.0.0' 使用 <script setup lan

随机推荐