vue2中使用AntV?以g2plot為實(shí)例
使用AntV以g2plot為例
效果
代碼
nmp 導(dǎo)入:
npm install @antv/g2plot
代碼:
<template> ?? ?<div id="app"> ?? ??? ?<div id="container"></div> ?? ?</div> </template>
<script> ?? ?import { ?? ??? ?Bar ?? ?} from '@antv/g2plot'; ?? ?export default { ?? ??? ?name: 'App', ?? ??? ?data() { ?? ??? ??? ?return { ?? ??? ??? ??? ?sj: [{ ?? ??? ??? ??? ??? ??? ?year: '1951 年', ?? ??? ??? ??? ??? ??? ?value: 38 ?? ??? ??? ??? ??? ?}, ?? ??? ??? ??? ??? ?{ ?? ??? ??? ??? ??? ??? ?year: '1952 年', ?? ??? ??? ??? ??? ??? ?value: 52 ?? ??? ??? ??? ??? ?}, ?? ??? ??? ??? ??? ?{ ?? ??? ??? ??? ??? ??? ?year: '1956 年', ?? ??? ??? ??? ??? ??? ?value: 61 ?? ??? ??? ??? ??? ?}, ?? ??? ??? ??? ??? ?{ ?? ??? ??? ??? ??? ??? ?year: '1957 年', ?? ??? ??? ??? ??? ??? ?value: 145 ?? ??? ??? ??? ??? ?}, ?? ??? ??? ??? ??? ?{ ?? ??? ??? ??? ??? ??? ?year: '1958 年', ?? ??? ??? ??? ??? ??? ?value: 48 ?? ??? ??? ??? ??? ?}, ?? ??? ??? ??? ??? ? ?? ??? ??? ??? ?] ?? ??? ??? ?} ?? ??? ?}, ?? ??? ?mounted() { ?? ??? ??? ?const bar = new Bar('container', { ?? ??? ??? ??? ?data: this.sj, ?? ??? ??? ??? ?xField: 'value', ?? ??? ??? ??? ?yField: 'year', ?? ??? ??? ??? ?seriesField: 'year', ?? ??? ??? ??? ?legend: { ?? ??? ??? ??? ??? ?position: 'top-left', ?? ??? ??? ??? ?}, ?? ??? ??? ?}); ?? ??? ??? ?bar.render(); ?? ??? ?} ?? ?} </script>
<style> </style>
AntV g2的簡(jiǎn)單運(yùn)用
G2 是一套基于圖形語法理論的可視化底層引擎,以數(shù)據(jù)驅(qū)動(dòng),提供圖形語法與交互語法,具有高度的易用性和擴(kuò)展性。
使用 G2,你可以無需關(guān)注圖表各種繁瑣的實(shí)現(xiàn)細(xì)節(jié),一條語句即可使用 Canvas 或 SVG 構(gòu)建出各種各樣的可交互的統(tǒng)計(jì)圖表。
安裝
npm install @antv/g2 --save
成功安裝完成之后,即可使用 import 或 require 進(jìn)行引用。
import { Chart } from '@antv/g2';
在繪圖前我們需要為 G2 準(zhǔn)備一個(gè) DOM 容器:
<div id="container"></div>
數(shù)據(jù)類型和實(shí)現(xiàn)步驟
const data = [ ? { year: '1951 年', sales: 38 }, ? { year: '1952 年', sales: 52 }, ? { year: '1956 年', sales: 61 }, ? { year: '1957 年', sales: 145 }, ? { year: '1958 年', sales: 48 }, ? { year: '1959 年', sales: 38 }, ? { year: '1960 年', sales: 38 }, ? { year: '1962 年', sales: 38 }, ]; const chart = new Chart({ ? container: 'container', ? autoFit: true, ? height: 500, }); chart.data(data); chart.scale('sales', { ? nice: true, }); chart.tooltip({ ? showMarkers: false }); chart.interaction('active-region'); chart.interval().position('year*sales'); chart.render();
語法介紹
1.new Chart() 創(chuàng)建 Chart 圖表對(duì)象,指定圖表所在的容器 id、圖表的寬高、邊距等信息;
2.chart.data() 載入圖表數(shù)據(jù)源;
3.使用圖形語法進(jìn)行圖表的繪制;
4.chart.render() 渲染圖表。
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue build過程取消console debugger控制臺(tái)信息輸出方法詳解
這篇文章主要為大家介紹了Vue build過程取消console debugger控制臺(tái)信息輸出方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09Vue安裝依賴npm install時(shí)的報(bào)錯(cuò)問題及解決
這篇文章主要介紹了Vue安裝依賴npm install時(shí)的報(bào)錯(cuò)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06vue實(shí)現(xiàn)移動(dòng)端原生小球滑塊
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端原生小球滑塊,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03基于vue實(shí)現(xiàn)簡(jiǎn)易打地鼠游戲
這篇文章主要為大家詳細(xì)介紹了基于vue實(shí)現(xiàn)簡(jiǎn)易打地鼠游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08vue踩坑記-在項(xiàng)目中安裝依賴模塊npm install報(bào)錯(cuò)
這篇文章主要介紹了vue踩坑記-在項(xiàng)目中安裝依賴模塊npm install報(bào)錯(cuò),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04解決antd Form 表單校驗(yàn)方法無響應(yīng)的問題
這篇文章主要介紹了解決antd Form 表單校驗(yàn)方法無響應(yīng)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10vue前端框架vueuse的useScroll函數(shù)使用源碼分析
這篇文章主要為大家介紹了vueuse的useScroll函數(shù)源碼分析詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08