vue3+g2plot之瀑布图

基础瀑布图 - 每月收支情况

效果预览：

核心代码：

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

const data = [
  {
    type: '日用品', money: 120 },
  {
    type: '伙食费', money: 900 },
  {
    type: '交通费', money: 200 },
  {
    type: '水电费', money: 300 },
  {
    type: '房租', money: 1200 },
  {
    type: '商场消费', money: 1000 },
  {
    type: '红包收入', money: -2000 },
];

const waterfallPlot = new Waterfall('container', {
   
  data,
  xField: 'type',
  yField: 'money',
  appendPadding: [15, 0, 0, 0],
  meta: {
   
    type: {
   
      alias: '类别',
    },
    money: {
   
      alias: '收支',
      formatter: (v) => `${
     v} 元`,
    },
  },
  label: {
   
    style: {
    fontSize: 10, fill: 'rgba(0,0,0,0.65)' },
    layout: [{
    type: 'interval-adjust-position' }],
  },
  total: {
   
    label: '总支出',
    style: {
   
      fill: '#96a6a6',
    },
  },
});

waterfallPlot.render();

变化瀑布图 - 销售量一年的变化情况

效果预览：

核心代码：

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

const data = [
  {
    month: '2019', value: 23000000 },
  {
    month: 'Jan', value: 2200000 },
  {
    month: 'Feb', value: -4600000 },
  {
    month: 'Mar', value: -9100000 },
  {
    month: 'Apr', value: 3700000 },
  {
    month: 'May', value: -2100000 },
  {
    month: 'Jun', value: 5300000 },
  {
    month: 'Jul', value: 3100000 },
  {
    month: 'Aug', value: -1500000 },
  {
    month: 'Sep', value: 4200000 },
  {
    month: 'Oct', value: 5300000 },
  {
    month: 'Nov', value: -1500000 },
  {
    month: 'Dec', value: 5100000 },
];

const waterfallPlot = new Waterfall('container', {
   
  data,
  padding: 'auto',
  appendPadding: [20, 0, 0, 0],
  xField: 'month',
  yField: 'value',
  meta: {
   
    month: {
   
      alias: '月份',
    },
    value: {
   
      alias: '销售量',
      formatter: (v) => `${
     v / 10000000} 亿`,
    },
  },
  /** 展示总计 */
  total: {
   
    label: '2020',
  },
  color: ({
     month, value }) => {
   
    if (month === '2019' || month === '2020') {
   
      return '#96a6a6';
    }
    return value > 0 ? '#f4664a' : '#30bf78';
  },
  legend: {
   
    custom: true,
    items: [
      {
   
        name: 'Increase',
        value: 'increase',
        marker: {
    symbol: 'square', style: {
    r: 5, fill: '#f4664a' } },
      },
      {
   
        name: 'Decrease',
        value: 'decrease',
        marker: {
    symbol: 'square', style: {
    r: 5, fill: '#30bf78' } },
      },
      {
   
        name: 'Total',
        value: 'total',
        marker: {
    symbol: 'square', style: {
    r: 5, fill: '#96a6a6' } },
      },
    ],
  },
  label: {
   
    style: {
   
      fontSize: 10,
    },
    layout: [{
    type: 'interval-adjust-position' }],
    background: {
   
      style: {
   
        fill: '#f6f6f6',
        stroke: '#e6e6e6',
        strokeOpacity: 0.65,
        radius: 2,
      },
      padding: 1.5,
    },
  },
  waterfallStyle: () => {
   
    return {
   
      fillOpacity: 0.85,
    };
  },
});

waterfallPlot.render();

瀑布图 - 数值标签展示绝对值

效果预览：

核心代码：

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

const data = [
  {
    month: '一月', value: 6200000 },
  {
    month: '二月', value: -600000 },
  {
    month: '三月', value: -4100000 },
  {
    month: '四月', value: 3700000 },
  {
    month: '五月', value: -2100000 },
  {
    month: '六月', value: 5300000 },
  {
    month: '七月', value: 3100000 },
  {
    month: '八月', value: -500000 },
  {
    month: '九月', value: 4200000 },
  {
   

原文地址：https://blog.csdn.net/qq_37703224/article/details/140688846

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！