vue3+g2plot之直方图

基础直方图

效果预览：

核心代码：

直方图范围刻度

效果预览：

核心代码：

import { Histogram } from '@antv/g2plot';

const data = [

{ value: 1.2 },

{ value: 3.4 },

{ value: 3.7 },

{ value: 4.3 },

{ value: 5.2 },

{ value: 5.8 },

{ value: 6.1 },

{ value: 6.5 },

{ value: 6.8 },

{ value: 7.1 },

{ value: 7.3 },

{ value: 7.7 },

{ value: 8.3 },

{ value: 8.6 },

{ value: 8.8 },

{ value: 9.1 },

{ value: 9.2 },

{ value: 9.4 },

{ value: 9.5 },

{ value: 9.7 },

{ value: 10.5 },

{ value: 10.7 },

{ value: 10.8 },

{ value: 11.0 },

{ value: 11.0 },

{ value: 11.1 },

{ value: 11.2 },

{ value: 11.3 },

{ value: 11.4 },

{ value: 11.4 },

{ value: 11.7 },

{ value: 12.0 },

{ value: 12.9 },

{ value: 12.9 },

{ value: 13.3 },

{ value: 13.7 },

{ value: 13.8 },

{ value: 13.9 },

{ value: 14.0 },

{ value: 14.2 },

{ value: 14.5 },

{ value: 15 },

{ value: 15.2 },

{ value: 15.6 },

{ value: 16.0 },

{ value: 16.3 },

{ value: 17.3 },

{ value: 17.5 },

{ value: 17.9 },

{ value: 18.0 },

{ value: 18.0 },

{ value: 20.6 },

{ value: 21 },

{ value: 23.4 },

];

const histogramPlot = new Histogram('container', {

data,

binField: 'value',

binWidth: 4,

tooltip: {

showMarkers: false,

position: 'top',

},

interactions: [

{

type: 'element-highlight',

},

],

/** range 为 x 轴代表字段，count 为 y 轴统计个数字段 */

meta: {

range: {

min: 0,

tickInterval: 2,

},

count: {

max: 20,

nice: true,

},

},

});

histogramPlot.render();

层叠直方图

效果预览：

核心代码：

整合vue3

创建histogram目录，并创建如下页面：

basic：基础直方图

tick：直方图刻度

stack：层叠直方图

vue3版基础直方图

核心代码：

效果预览：

完整代码：

import {onMounted} from "vue";

import {Histogram, WordCloud} from "@antv/g2plot";

onMounted(async () => {

fetch('/histogram.json')

.then((data) => data.json())

.then((data) => {

const histogramPlot = new Histogram('container', {

data,

binField: 'value',

binWidth: 2,

});

histogramPlot.render();

});

})

<div id="container"></div>

vue3版直方图范围刻度

核心代码：

import { Histogram } from '@antv/g2plot';

const data = [

{ value: 1.2 },

{ value: 3.4 },

{ value: 3.7 },

{ value: 4.3 },

{ value: 5.2 },

{ value: 5.8 },

{ value: 6.1 },

{ value: 6.5 },

{ value: 6.8 },

{ value: 7.1 },

{ value: 7.3 },

{ value: 7.7 },

{ value: 8.3 },

{ value: 8.6 },

{ value: 8.8 },

{ value: 9.1 },

{ value: 9.2 },

{ value: 9.4 },

{ value: 9.5 },

{ value: 9.7 },

{ value: 10.5 },

{ value: 10.7 },

{ value: 10.8 },

{ value: 11.0 },

{ value: 11.0 },

{ value: 11.1 },

{ value: 11.2 },

{ value: 11.3 },

{ value: 11.4 },

{ value: 11.4 },

{ value: 11.7 },

{ value: 12.0 },

{ value: 12.9 },

{ value: 12.9 },

{ value: 13.3 },

{ value: 13.7 },

{ value: 13.8 },

{ value: 13.9 },

{ value: 14.0 },

{ value: 14.2 },

{ value: 14.5 },

{ value: 15 },

{ value: 15.2 },

{ value: 15.6 },

{ value: 16.0 },

{ value: 16.3 },

{ value: 17.3 },

{ value: 17.5 },

{ value: 17.9 },

{ value: 18.0 },

{ value: 18.0 },

{ value: 20.6 },

{ value: 21 },

{ value: 23.4 },

];

const histogramPlot = new Histogram('container', {

data,

binField: 'value',

binWidth: 4,

tooltip: {

showMarkers: false,

position: 'top',

},

interactions: [

{

type: 'element-highlight',

},

],

/** range 为 x 轴代表字段，count 为 y 轴统计个数字段 */

meta: {

range: {

min: 0,

tickInterval: 2,

},

count: {

max: 20,

nice: true,

},

},

});

histogramPlot.render();

刻度效果：

预览效果：

完整代码：

import {onMounted} from "vue";

import {Histogram, WordCloud} from "@antv/g2plot";

onMounted(async () => {

const data = [

{ value: 1.2 },

{ value: 3.4 },

{ value: 3.7 },

{ value: 4.3 },

{ value: 5.2 },

{ value: 5.8 },

{ value: 6.1 },

{ value: 6.5 },

{ value: 6.8 },

{ value: 7.1 },

{ value: 7.3 },

{ value: 7.7 },

{ value: 8.3 },

{ value: 8.6 },

{ value: 8.8 },

{ value: 9.1 },

{ value: 9.2 },

{ value: 9.4 },

{ value: 9.5 },

{ value: 9.7 },

{ value: 10.5 },

{ value: 10.7 },

{ value: 10.8 },

{ value: 11.0 },

{ value: 11.0 },

{ value: 11.1 },

{ value: 11.2 },

{ value: 11.3 },

{ value: 11.4 },

{ value: 11.4 },

{ value: 11.7 },

{ value: 12.0 },

{ value: 12.9 },

{ value: 12.9 },

{ value: 13.3 },

{ value: 13.7 },

{ value: 13.8 },

{ value: 13.9 },

{ value: 14.0 },

{ value: 14.2 },

{ value: 14.5 },

{ value: 15 },

{ value: 15.2 },

{ value: 15.6 },

{ value: 16.0 },

{ value: 16.3 },

{ value: 17.3 },

{ value: 17.5 },

{ value: 17.9 },

{ value: 18.0 },

{ value: 18.0 },

{ value: 20.6 },

{ value: 21 },

{ value: 23.4 },

];

const histogramPlot = new Histogram('container', {

data,

binField: 'value',

binWidth: 4,

tooltip: {

showMarkers: false,

position: 'top',

},

interactions: [

{

type: 'element-highlight',

},

],

/** range 为 x 轴代表字段，count 为 y 轴统计个数字段 */

meta: {

range: {

min: 0,

tickInterval: 2,

},

count: {

max: 20,

nice: true,

},

},

});

histogramPlot.render();

})

<div id="container"></div>

vue3版层叠直方图

核心代码：

效果预览：

完整代码：

import {onMounted} from "vue";

import {Histogram, WordCloud} from "@antv/g2plot";

onMounted(async () => {

fetch('/diamond.json')

.then((res) => res.json())

.then((data) => {

const histogramPlot = new Histogram('container', {

data,

binField: 'depth',

binWidth: 2,

stackField: 'cut',

coloField: 'color',

tooltip: {

showMarkers: false,

position: 'top',

},

interactions: [

{

type: 'element-highlight',

},

],

});

histogramPlot.render();

});

})

<div id="container"></div>

总结

本教程讲解了vue3+g2plot如何绘制直方图，完整代码如下。

人生苦短，我用Python，我是您身边的Python私教~