时间:2021-07-01 10:21:17 帮助过:11人阅读
从网上看到 阿里系的图表 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 引用组件
<template> <p> <g2-line :charData="serverData" :id="'c1'"></g2-line> </p> </template> <script> 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请求接口 } } </script>
效果
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
如何在Vue项目中添加动态浏览器头部title的问题
bootstrap-datatimepicker插件的使用
以上就是关于vue antV G2-3.X组件化的介绍的详细内容,更多请关注Gxl网其它相关文章!