Vuejs2.X组件化-阿里的G2图表组件

Yuqi 发布于2019-08-20 14:17 / 736人阅读

摘要：前言的组件化开发是一个非常不错的机制一处开发多处引用，不仅降低的维护成本，提高了开发效率，而且多带带的组件有多带带的视图和交互数据逻辑，使得系统层次更加分明。接下来就开始我们的组件化之旅。

前言

vue 的组件化开发是一个非常不错的机制."一处开发,多处引用"，不仅降低的维护成本，提高了开发效率，而且多带带的组件有多带带的视图和交互数据逻辑，使得系统层次更加分明。若有问题可加群264591039与我讨论~转载文章请标明出处！

开发场景

数据可视化是我们互联网常见的功能，所以难免我们会在项目中插入图表等，找到一个还算可以的图形插件，阿里的G2图形库，详情请参见G2官网。接下来就开始我们的Vue G2组件化之旅。

脚手架搭建helloworld

先用脚手架工具 vue-cli搭建一个vue的helloworld项目(Vue的相关教程请看Vue官网)，按照readme文档正常运行该项目。

安装G2插件

在package.json的目录下用npm包管理工具安装G2插件库

npm install --save-dev g2

我用到的版本是2.2.1，现在最新的好像是2.2.2，应该也没什么问题，不过我没测试过

新建G2Line.vue单文件组件

在components目录下新建G2Line.vue文件（当前是以线形图为例的组件）。
在template标签中新增标签

在script标签中引入G2并开始先关操作代码：

import G2 from "g2";
  export default {
    data () {
      return {
        chart: null
      };
    },
    props: {
      charData: {
        type: Array,
        default: function () {
          return {
            data: [{"mzkId": 112, "strftime": "2017-01-11", "value": 9275501},  // 测试数据，根据自己需求自己设置数据
              {"mzkId": 112, "strftime": "2017-01-12", "value": 9281904},
              {"mzkId": 112, "strftime": "2017-01-13", "value": 9290777},
              {"mzkId": 112, "strftime": "2017-01-14", "value": 9297913},
              {"mzkId": 112, "strftime": "2017-01-15", "value": 9306918},
              {"mzkId": 112, "strftime": "2017-01-16", "value": 9315641}]
          };
        }
      },
      id: String
    },
    mounted: function () {
//      this.drawChart();       // 第一步想到的是创建的时候更新图表，但是这个不适用于异步请求接口获取相关数据，所以采用下面的监听的方式
    },
    beforeUpdate: function () {
//      this.drawChart();
    },
    watch: {
      charData: function (val, oldVal) {    // 监听charData，当放生变化时，触发这个回调函数绘制图表
        console.log("new: %s, old: %s", val, oldVal);
        this.drawChart(val);
      }
    },
    methods: {
      drawChart: function (datas) {
        // 如果图形存在则删除再创建，这个地方感觉稍微有点坑
        // 具体的G2 api函数说明请看上面提供的官网地址，此处不再逐一说明
        this.chart && this.chart.destroy();
        let data = datas;
        this.chart = new G2.Chart({
          id: this.id,
          width: 1000,
          height: 250
        });
        this.chart.source(data, {
          strftime: {
            alias: "日期",
            type: "cat",
            range: [0, 1]
          },
          value: {
            alias: "数量值(人)"
          }
        });
        this.chart.line().position("strftime*value").size(2);
        this.chart.point().position("strftime*value").color("#757373")
          .shape("circle")
          .label("value", {offset: 20, label: {fill: "#000"}});
        this.chart.animate(false);
        this.chart.render();
      }
    }
  }

App.vue引入组件并渲染图表

在app.vue中引入上一步新建的G2Line.vue组件，并加载到当前vue实例中

获取服务端数据之后，在template中创建组件标签，并将serverData发送给子组件G2Line

刷新界面，成功看到页面图表的渲染

私有云 idc机房托管 linux的组件服务器的组件 android的四大组件 php各组件的用途

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81519.html

三大图表库：ECharts 、 BizCharts 和 G2，该如何选择？

摘要：最近阿里正式开源的图表库基于技术栈，各个图表项皆采用了组件的形式，贴近的使用特点。相关文档组件化阿里的图表组件手拉手，用开发动态刷新组件文档地址一安装通过引入二引用成功安装完成之后，即可使用或进行引用。最近阿里正式开源的BizCharts图表库基于React技术栈，各个图表项皆采用了组件的形式，贴近React的使用特点。同时BizCharts基于G2进行封装，Bizcharts也继承了G2相...

draveness 2019-04-23 13:19 评论0 收藏0
[BizCharts学习笔记] --- 数据可视化

摘要：所以笔者选择了，为什么会选择一是因为它是阿里出品，经历了一年左右的打磨已经完全适应在使用其次是它支持自由定制，不会像那样高度封装，所以在开发复杂图表的时候会更加得心应手。只是阿里图表库中的一员。实际上，在数据可视化这一块笔者并没有很多的开发经历和经验，不过正是因为这个问题笔者才决定学习一门数据可视化框架来弥补自己在这一方面的不足。在这个大数据统治的时代，数据能给我们提供前所未有的便捷...

CoffeX 2019-08-23 11:56 评论0 收藏0
阿里巴巴图表库 Bizcharts 正式开源

摘要：写在前面阿里巴巴于去年开放了它的内部图表库初版，在这一年的时间里，新增了许多特性，并对渲染细节及渲染性能进行大幅度的调优。在阿里内部多个部门多条业务线里反复打磨了两年之久后，于去年年底对外开源。写在前面阿里巴巴于去年开放了它的内部图表库 Bizcharts 初版，在这一年的时间里，Bizcharts 新增了许多特性，并对渲染细节及渲染性能进行大幅度的调优。本文将简单的介绍阿里开源...

Yangder 2019-08-23 11:35 评论0 收藏0
蚂蚁金服可视化图形语法 G2 3.3 发布：琢·磨

摘要：更好的阅读体验，请移步语雀是蚂蚁金服数据可视化解决方案的一个子产品，是一套数据驱动的高交互的可视化图形语法。欢迎共建是一套数据驱动的高交互的可视化图形语法。 showImg(https://segmentfault.com/img/remote/1460000016710544); 更好的阅读体验，请移步语雀 G2 是蚂蚁金服数据可视化解决方案 AntV 的一个子产品，是一套数据驱动的...

TZLLOG 2019-08-23 12:23 评论0 收藏0