前段時間有分享一個螞蟻金服推出的資料視覺化解決方案AntV。今天再給大家推薦一款Vue和Antv視覺化元件庫VueG2。

vue-g2 阿里G2視覺化圖表的Vue封裝。包含折線圖、柱狀圖、直方圖、餅圖、環圖、面積圖、雷達圖、液體填充圖等多種圖表型別。

安裝依賴

$ npm i @antv/[email protected] @antv/[email protected] vue-g2 -S

引入

// 在main.js中引入import Vue from 'vue';import 'vue-g2';import App from './App.vue';new Vue({ render: h => h(App)}).$mount('#root')

快速使用

<template> <g2-pie type="pie" :data="data" :axis-name="{ name: '年份', value: 'GDP(億美元)' }" :label-option="{ show: true, offset: 25 }" :padding="[15, 30]" style="height:360px; width:640px;" > </g2-pie></template><script>export default { data () { return { data: [ { name: '2016', value: 1 }, { name: '2017', value: 2 }, { name: '2018', value: 2 }, { name: '2019', value: 3 }, { name: '2020', value: 4 } ] } }}</script>

文件提供了詳細的元件示例。

非常不錯的一個Vue整合AntV/G2圖表元件庫，有需要的不要錯過喲~

end, 附上文件及專案地址。

# 文件地址/file/2020/09/21/20200921104540_2.jpg 倉庫地址https://github.com/wupeiwen/vue-g2

okay，就介紹到這裡。如果大家有其它好的Vue視覺化圖表，歡迎一起交流學習！