在Vue中使用antv的示例代碼
更新時間:2020年06月29日 08:31:30 作者:sxuan
這篇文章主要介紹了在Vue中使用antv的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
一,在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:'地區(qū)貨品跟進看板', 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: 創(chuàng)建 Chart 對象 const chart = new G2.Chart({ container: this.basicColumnChartProp.container, // 指定圖表容器 ID width : this.basicColumnChartProp.width, // 指定圖表寬度 height : this.basicColumnChartProp.height // 指定圖表高度 }); // Step 2: 載入數(shù)據(jù)源 chart.source(data); // Step 3:創(chuàng)建圖形語法,繪制柱狀圖,由 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>
到此這篇關于在Vue中使用antv的示例代碼的文章就介紹到這了,更多相關Vue中使用antv內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
利用Vue v-model實現(xiàn)一個自定義的表單組件
本篇文章主要介紹了利用Vue v-model實現(xiàn)一個自定義的表單組件的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04Vue Cli3 打包配置并自動忽略console.log語句的方法
這篇文章主要介紹了Vue Cli3 打包配置并自動忽略console.log語句的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-04-04使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實例
今天小編就為大家分享一篇使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09