幽灵资源网 Design By www.bzswh.com
一,在vue原型中使用
1.首先安装antv/g2
yarn add @antv/g2 --save
2.在main.js中挂在到vue原型实例中
const G2 = require('@antv/g2') Vue.prototype.$G2 = G2
3.在vue文件中可以直接在mounted生命周期中直接使用
<template> <div> <div id="c1"></div> </div> </template> <script> export default { mounted() { this.initComponent(); }, data() { return { msg: "", chart: null, data: [ { genre: "Sports", sold: 275 }, { genre: "Strategy", sold: 115 }, { genre: "Action", sold: 120 }, { genre: "Shooter", sold: 350 }, { genre: "Other", sold: 150 } ] }; }, methods: { initComponent() { const chart = new this.$G2.Chart({ container: "c1", width: 600, height: 300 }); chart.source(this.data); chart .interval() .position("genre*sold") .color("genre"); this.chart = chart; this.chart.render(); } } }; </script>
二,按需引用
1.还是安装atv/g2
yarn add @antv/g2 --save
2.直接在组件中按需引入
<template> <div> <div id="l1"></div> </div> </template> <script> import { Chart } from "@antv/g2"; export default { data() { return { year: [ { year: "1991", value: 3 }, { year: "1992", value: 4 }, { year: "1993", value: 3.5 }, { year: "1994", value: 5 }, { year: "1995", value: 4.9 }, { year: "1996", value: 6 }, { year: "1997", value: 7 }, { year: "1998", value: 9 }, { year: "1999", value: 13 } ] }; }, mounted() { this.initLineChart() }, methods: { initLineChart() { const chart = new Chart({ container: "l1", autoFit: true, height: 500 }); chart.data(this.year); chart.scale({ year: { range: [0, 1] }, value: { min: 0, nice: true } }); chart.tooltip({ showCrosshairs: true, // 展示 Tooltip 辅助线 shared: true }); chart .line() .position("year*value") .label("value"); chart.point().position("year*value"); chart.render(); } } }; </script> <style scoped> </style>
示例代码
<template> <div> <div><h1 style="color: white">{{title}}</h1></div> <span> <div id="c1"></div> <div id="mountNode"></div> </span> </div> </template> <script> import G2 from '@antv/g2'; export default { name: "spectaculars", data(){ return{ title:'地区货品跟进看板', 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:600, height:300 }, basicBarChartProp:{ container:'mountNode', size:{'width':500,'height':300}, data:[ { country: '巴西', population: 18203 }, { country: '印尼', population: 23489 }, { country: '美国', population: 29034 }, { country: '印度', population: 104970 }, { country: '中国', population: 131744 } ] } } }, methods:{ test:function () { const data = this.basicColumnChartProp.data; // Step 1: 创建 Chart 对象 const chart = new G2.Chart({ container: this.basicColumnChartProp.container, // 指定图表容器 ID width : this.basicColumnChartProp.width, // 指定图表宽度 height : this.basicColumnChartProp.height // 指定图表高度 }); // Step 2: 载入数据源 chart.source(data); // Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴 chart.interval().position('genre*sold').color('genre') // Step 4: 渲染图表 chart.render(); }, basicBarChart:function () { let data = this.basicBarChartProp.data; let chart = new G2.Chart({ container: this.basicBarChartProp.container, width:this.basicBarChartProp.size.width, height:this.basicBarChartProp.size.height }); chart.source(data); chart.axis('country', { label: { offset: 12 } }); chart.coord().transpose(); chart.interval().position('country*population'); chart.render(); } }, mounted() { this.test(); this.basicBarChart(); }, beforeCreate () { document.querySelector('body').setAttribute('style', 'background:#000000') }, beforeDestroy () { document.querySelector('body').removeAttribute('style') } } </script> <style scoped> </style>
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...