Rumah > Artikel > hujung hadapan web > 关于vue antV G2-3.X组件化的介绍
这篇文章主要介绍了关于vue antV G2-3.X组件化的介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
从网上看到 阿里系的图表 antv 觉得非常不错,就想整合到vue中使用。参考了Vuejs2.X组件化-阿里的G2图表组件
安装
npm install @antv/g2 --save
创建vue组件 components/G2Line.vue
<template> <p :id="id"></p> </template> <script> import G2 from '@antv/g2' export default { data () { return { chart: null } }, props: { charData: { type: Array, default: function () { return { data: [] } } }, id: String }, mounted () { this.drawChart() }, methods: { drawChart: function () { this.chart && this.chart.destory() this.chart = new G2.Chart({ container: this.id, width: 600, height: 300 }) this.chart.source(this.charData) this.chart.scale('value', { min: 0 }) this.chart.scale('year', { range: [0, 1] }) this.chart.tooltip({ crosshairs: { type: 'line' } }) this.chart.line().position('year*value') this.chart.point().position('year*value').size(4).shape('circle').style({ stroke: '#fff', lineWidth: 1 }) this.chart.render() } } } </script>
修改HelloWorld.vue 引用组件
d477f9ce7bf77f53fbcf36bec1b69b7a e388a4556c0f65e1904146cc1a846bee 5be1d519dcba687de4ce04b528bc9c97654ac07f76a7648344216c1594bcf368 94b3e26ee717c64999d7867364b1b4a3 21c97d3a051048b8e55e3c8f199a54b2 3f1c4e4b6b16bbbd69b2ee476dc4f83a import G2Line from './G2Line.vue' export default { components: { G2Line }, data () { return { serverData: [{ year: '2010', value: 3 }, { year: '2011', value: 4 }, { year: '2012', value: 3.5 }, { year: '2013', value: 5 }, { year: '2014', value: 4.9 }, { year: '2015', value: 6 }, { year: '2016', value: 7 }, { year: '2017', value: 9 }, { year: '2018', value: 13 }] } }, methods: { // 此处省略从服务器获取数据并且赋值给this.serverData // 推荐使用axios请求接口 } } 2cacc6d41bbb37262a98f745aa00fbf0
效果
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
Atas ialah kandungan terperinci 关于vue antV G2-3.X组件化的介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!