VUE引入使用G2图表的实现

目录
  • 关于G2图表介绍
  • 使用
  • 模板中使用完整代码(柱状图)
  • 在补充一下世界地图

关于G2图表介绍

G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性
使用 G2,可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表

G2图表官网地址
https://antv.gitee.io/zh

G2图标详细开发手册
https://antv-g2.gitee.io/zh/docs/api/general/chart

使用

第一步:安装G2依赖包

npm instal @antv/g2

第二步:在绘图前需要为 G2 准备一个 DOM 容器

<div id="webInfo"></div>

第三步:引入

import G2 from "@antv/g2";

第四步:在mounted中定义

可先在全局定义let chart = null;

const chart = new G2.Chart({})

chart = new G2.Chart({
        container: "webInfo",//指定图表容器
        forceFit: true,//强制配合
        width: 600, // 指定图表宽度
        height: 306,//高度
        padding: [20, 30, 30, 50],//内边距
})

第五步:载入数据源

/马上更新图表 /
chart.changeData(chartData) 

/仅仅是更新数据,而不需要马上更新图表/
chart.source(chartData) 

/需要更新图表时调用 /
chart.repaint()

扩展清除图形语法

/清理所有/
chart.clear();

模板中使用完整代码(柱状图)

<template>
  <div id="c1"></div>
</template>
<script>
    export default {
        name: "spectaculars",
        data(){
            return{
                basicColumnChartProp:{
                    data:[{ genre: 'Sports', sold: 275 },
                        { genre: 'Strategy', sold: 115 },
                        { genre: 'Action', sold: 120 },
                        { genre: 'Shooter', sold: 350 },
                        { genre: 'Other', sold: 150 }],
                    container:'c1',
                    width:700,
                    height:600
                },
            }
        },
        methods:{
            test(){
                const data = this.basicColumnChartProp.data;
                const chart = new G2.Chart({
                    container: this.basicColumnChartProp.container,
                    width : this.basicColumnChartProp.width,
                    height : this.basicColumnChartProp.height
                });
                chart.source(data);
                chart.interval().position('genre*sold').color('genre')
                chart.render();
            }
        },
        mounted() {
          this.test();
        },
    }
</script>

在补充一下世界地图

(当初项目需求找了G2的地图,感觉API文档有些东西没说明白,这里记录一下)

<template>
  <div id="c1"></div>
</template>
<script>
    const DataSet = require('@antv/data-set');
    export default {
        name: "spectaculars",
        data(){
            return{
                basicColumnChartProp:{
                    container:'c1',
                },
            }
        },
        methods:{
            test(){
              fetch('src/views/dataCenter/data/world/countries.geo.json')
              .then(res => res.json())
              .then(mapData => {
                const chart = new G2.Chart({
                  container:this.basicColumnChartProp.container,
                  forceFit: true,
                  height:700,
                  padding: [10,10]
                });
                chart.tooltip({
                  showTitle: false
                });
                // 同步度量
                chart.scale({
                  longitude: {
                    sync: true
                  },
                  latitude: {
                    sync: true
                  }
                });
                chart.axis(false);
                chart.legend('trend', {
                  position: 'left'
                });

                // 绘制世界地图背景
                const ds = new DataSet();
                const worldMap = ds.createView('back')
                  .source(mapData, {
                    type: 'GeoJSON'
                  });
                const worldMapView = chart.view();
                worldMapView.source(worldMap);
                worldMapView.tooltip(false);
                worldMapView.polygon().position('longitude*latitude').style({
                  fill: '#fff',
                  stroke: '#ccc',
                  lineWidth: 1
                });

                const userData = [
                  { name: 'Russia', value: 86.8 },
                  { name: 'China', value: 106.3 },
                  { name: 'Japan', value: 94.7 },
                  { name: 'Mongolia', value: 98 },
                  { name: 'Canada', value: 98.4 },
                  { name: 'United Kingdom', value: 97.2 },
                  { name: 'United States of America', value: 98.3 },
                  { name: 'Brazil', value: 96.7 },
                  { name: 'Argentina', value: 95.8 },
                  { name: 'Algeria', value: 101.3 },
                  { name: 'France', value: 94.8 },
                  { name: 'Germany', value: 96.6 },
                  { name: 'Ukraine', value: 86.3 },
                  { name: 'Egypt', value: 102.1 },
                  { name: 'South Africa', value: 101.3 },
                  { name: 'India', value: 107.6 },
                  { name: 'Australia', value: 99.9 },
                  { name: 'Saudi Arabia', value: 130.1 },
                  { name: 'Afghanistan', value: 106.5 },
                  { name: 'Kazakhstan', value: 93.4 },
                  { name: 'Indonesia', value: 101.4 }
                ];
                const userDv = ds.createView()
                  .source(userData)
                  .transform({
                    geoDataView: worldMap,
                    field: 'name',
                    type: 'geo.region',
                    as: [ 'longitude', 'latitude' ]
                  })
                  .transform({
                    type: 'map',
                    callback: obj => {
                      // obj.trend = obj.value
                      obj.trend = (obj.value > 100) ? '男性更多' : '女性更多';
                      return obj;
                    }
                  });
                const userView = chart.view();
                userView.source(userDv, {
                  trend: {
                    alias: '每100位女性对应的男性数量'
                  }
                });
                userView.polygon()
                  .position('longitude*latitude')
                  .color('trend', [ '#F51D27', '#0A61D7' ])
                  .opacity('value')
                  .tooltip('name*trend')
                  .animate({
                    leave: {
                      animation: 'fadeOut'
                    }
                  });
                chart.render();
              })
            },
        },
        mounted() {
          this.test();
        },
    }
</script>
  • fetch这个地方官网引入的是文件目录,不是具体的json文件,使用的时候找不到文件
  • fetch引入的json这里是本地的,其次G2官网提供的远程githup地址获取不到这个json文件
  • fetch引入json文件的路径,不是你当前文件到该json的路径,而是index.html到该json文件的地址

到此这篇关于VUE引入使用G2图表的实现的文章就介绍到这了,更多相关VUE使用G2图表内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(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引入使用G2图表的实现

    目录 关于G2图表介绍 使用 模板中使用完整代码(柱状图) 在补充一下世界地图 关于G2图表介绍 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性 使用 G2,可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表 G2图表官网地址 https://antv.gitee.io/zh G2图标详细开发手册 https://antv-g2.gitee.io/zh/docs/api/ge

  • vue+阿里的G2图表-antv+折线图实例

    目录 vue阿里的G2图表-antv+折线图 实现效果 实现步骤 antv g2柱状图与折线图混合使用 这是数据 这是组件 vue阿里的G2图表-antv+折线图 之前使用的图表是echarts+highcharts两个常用图表的,现在的话因为项目需要和别的原因也接触使用了阿里的g2图表,感觉效果还是挺好的,在这里分享下 官网入口 实现效果 实现步骤 第一:安装插件 npm install @antv/g2 --save 第二:lineCharts.vue,注意,图表这类型的数据必须mouned

  • 在vue中如何封装G2图表

    目录 vue封装G2图表 vue引入G2图表 线上示例 特性 介绍一下在vue中使用G2 vue封装G2图表 <template>     <div id="id"></div> </template> <script> import G2 from '@antv/g2' import { DataSet } from '@antv/data-set' export default {     name: 'pie',    

  • vue结合AntV G2的使用踩坑记录

    目录 vue结合AntV G2使用踩坑 AntV-G2语法总结 目的 第一步语法基础 第二步设置坐标轴的外观与度量 第二步创建view vue结合AntV G2使用踩坑 官网使用import G2 from '@antv/g2';引入但是会报一个 "export 'default' (imported as 'G2') was not found in '@antv/g2'  得错误 找了半天原因,最终解决办法 import * as G2 from '@antv/g2' AntV-G2语法总结

  • 在vue中使用echarts图表实例代码详解

    安装vue依赖 使用npm npm install echarts --save 使用yarn yarn add echarts 使用国内的淘宝镜像: //安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org //从淘宝镜像下载 cnpm install echarts -S 引入ECharts 安装好的ECharts会放在node_modules目录下. 全部引入 1.直接在项目代码引入 可以直接在项目代码中

  • Vue中的echarts图表如何实现loading效果

    目录 echarts图表实现loading效果 Vue使用echarts图表总结 安装echarts依赖 创建图表 在页面中的使用(在这里我用的局部引入) echarts图表实现loading效果 main.js 中配置Vue属性ecahrts // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts  data() 初始化数据调用数据 mounted() 周期函数内获取画布节点,并且调用加载loadi

  • vue引入swiper插件的使用实例

    本文介绍了vue引入swiper插件,分享给大家,希望对大家有帮助 步骤一:安装vue, $ npm install vue 步骤二:创建vue项目 # 全局安装 vue-cli $ npm install -g vue-cli $ cd my-project $ npm install $ npm run dev 上面这些就是安装好vue项目,最主要的就是下面的步骤 步骤三:下载好swiper相关的js和css,js放在static目录下,css放在assets目录下. 步骤四:  安装run

  • vue引入jq插件的实例讲解

    今天做官网,把unslider做成指令,但是一直提示$(el).unslider() no a function,一开始我想复杂了,后来在网上看了很多帖子,大多数都是修改webpack.base.config.js,仔细尝试,网上确实是对的,尝试过程中,提醒大家最好把这3个加全,比如unslider插件,(function(){})(window.jQuery) { jQuery: "jquery", "window.jQuery": "jquery&qu

  • vue引入新版 vue-awesome-swiper插件填坑问题

    本文介绍了关于新版 vue-awesome-swiper,分享给大家,具体如下: 问题 为什么我的vue-awesome-swiper组件pagination小圆点不显示问题? 为什么我的vue-awesome-swiper不会自动播放? 为什么我的vue-awesome-swiper没有? 使用 引入(前面的步骤和往常一样) npm install vue-awesome-swiper --save 在 main,js 里引入(全局): import VueAwesomeSwiper from

随机推荐