前言
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
刷新界面，成功看到页面图表的渲染
原文地址：https://yezihaohao.github.io/2017/02/14/Vuejs2-X组件化-阿里的G2图表组件/
