欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue2中使用AntV?以g2plot為實(shí)例

 更新時(shí)間:2022年04月28日 10:04:03   作者:cmmboy1990  
這篇文章主要介紹了vue2中使用AntV?以g2plot為實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

使用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)信息輸出方法詳解

    這篇文章主要為大家介紹了Vue build過程取消console debugger控制臺(tái)信息輸出方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-09-09
  • 詳解Vue與VueComponent的關(guān)系

    詳解Vue與VueComponent的關(guān)系

    這篇文章主要為大家介紹了Vue與VueComponent的關(guān)系,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-12-12
  • Vue安裝依賴npm install時(shí)的報(bào)錯(cuò)問題及解決

    Vue安裝依賴npm install時(shí)的報(bào)錯(cuò)問題及解決

    這篇文章主要介紹了Vue安裝依賴npm install時(shí)的報(bào)錯(cuò)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • Vue router安裝及使用方法解析

    Vue router安裝及使用方法解析

    這篇文章主要介紹了Vue router安裝及使用方法解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-12-12
  • 詳解vue 命名視圖

    詳解vue 命名視圖

    這篇文章主要介紹了vue 命名視圖的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-08-08
  • vue實(shí)現(xiàn)移動(dòng)端原生小球滑塊

    vue實(shí)現(xiàn)移動(dòng)端原生小球滑塊

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端原生小球滑塊,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • 基于vue實(shí)現(xiàn)簡(jiǎn)易打地鼠游戲

    基于vue實(shí)現(xiàn)簡(jiǎn)易打地鼠游戲

    這篇文章主要為大家詳細(xì)介紹了基于vue實(shí)現(xiàn)簡(jiǎn)易打地鼠游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • vue踩坑記-在項(xiàng)目中安裝依賴模塊npm install報(bào)錯(cuò)

    vue踩坑記-在項(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)的問題

    這篇文章主要介紹了解決antd Form 表單校驗(yàn)方法無響應(yīng)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • vue前端框架vueuse的useScroll函數(shù)使用源碼分析

    vue前端框架vueuse的useScroll函數(shù)使用源碼分析

    這篇文章主要為大家介紹了vueuse的useScroll函數(shù)源碼分析詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08

最新評(píng)論