在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:'地区货品跟进看板',
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>
到此这篇关于在Vue中使用antv的示例代码的文章就介绍到这了,更多相关Vue中使用antv内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue+echarts实现条纹柱状横向图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家详细介绍了vue实现购物车小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要给大家介绍了关于vue3.0关闭eslint校验的3种方法,在实际开发过程中,eslint的作用不可估量,文中将关闭的方法介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue封装一个弹幕组件详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙可以参考一下2022-08-08
这篇文章主要介绍了在vue中axios设置timeout超时的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vuex页面刷新导致数据丢失的解决方案，帮助大家更好的使用vue框架，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了vue中$refs的三种用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
正常情况下Vue推荐用props向子组件参数,但是在特定场景下,使用$attrs会更方便,下面这篇文章主要给大家介绍了关于vue2.x中$attrs使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了解决vue-socket.io接收不到数据问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
今天小编就为大家分享一篇VUE:vuex 用户登录信息的数据写入与获取方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论