antd使用g2plot统计图表(7)

特性
📦 开箱即用、默认好用的高质量统计图表
🎨 提炼自企业级产品的视觉语言和设计规范
📊 响应式图表：致力于解决图表在任何数据和显示尺寸下的基本可读性问题
🔳 图层化设计方法：在 G2Plot 体系下，图表不仅仅只是各不相关的实例，图层概念的引入提供了多图表组合叠联动，共同讲述一个数据故事的可能性

https://antv.vision/zh
https://g2plot.antv.vision/zh/docs/manual/introduction

一、基本步骤

安装g2plot

npm install @antv/g2plot --save

之后便可使用 import 或 require 进行引用：

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

二、使用

step1: 创建图表容器

<a-row :gutter="2">
      <a-col :span="12">
        <div id="container" style="width: 100%"></div>
        <div id="g2-Area" style="width: 100%"></div>
      </a-col>
      <a-col :span="12">
        <div id="g2-Column" style="width: 100%"></div>
        <div id="g2-Pie" style="width: 100%"></div>
      </a-col>
    </a-row>

step2: 引入数据。G2Plot 的数据源格式是 JSON 数组，数组的每个元素是一个标准 JSON 对象，部分图表除外。
step3: 创建并渲染图表

const line = new Line('container', {
  data,
  xField: 'year',
  yField: 'value',
});

line.render();

三、完整代码

<template>
  <div>
    <a-card :bordered="false">
      <div style="display: flex; flex-wrap: wrap">
        <head-info title="参与项目" content="8" :bordered="true"/>
        <head-info title="本周完成case数" content="32" :bordered="true"/>
        <head-info title="团队内排名" content="3/61"/>
      </div>
    </a-card>
    <a-row :gutter="2">
      <a-col :span="12">
        <div id="container" style="width: 100%"></div>
        <div id="g2-Area" style="width: 100%"></div>
      </a-col>
      <a-col :span="12">
        <div id="g2-Column" style="width: 100%"></div>
        <div id="g2-Pie" style="width: 100%"></div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
//引入g2plot
import { Line, Area, Column, Pie} from '@antv/g2plot';
import HeadInfo from "@/components/tool/HeadInfo";

const data = [
  { type: '郑先森', value: 27 },
  { type: '曹先森', value: 25 },
  { type: '王先森', value: 18 },
  { type: '李先森', value: 15 },
  { type: '张先森', value: 10 },
  { type: '其他', value: 5 },
];

export default {
  name: 'Demo',
  components: {HeadInfo},
  data() {
    return {
      data,
    }
  },
  mounted() {
    fetch('https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json')
        .then((res) => res.json())
        .then((data) => {
          const linePlot = new Line('container', {
            data,
            xField: 'year',
            yField: 'gdp',
            seriesField: 'name',
            yAxis: {
              label: {
                formatter: (v) => `${(v / 10e8).toFixed(1)} B`,
              },
            },
            legend: {
              position: 'top',
            },
            smooth: true,
            // @TODO 后续会换一种动画方式
            animation: {
              appear: {
                animation: 'path-in',
                duration: 5000,
              },
            },
          });
          linePlot.render();
        });
    fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
        .then((res) => res.json())
        .then((data) => {
          const area = new Area('g2-Area', {
            data,
            xField: 'Date',
            yField: 'scales',
            xAxis: {
              tickCount: 5,
            },
            animation: false,
            slider: {
              start: 0.1,
              end: 0.9,
              trendCfg: {
                isArea: true,
              },
            },
          });
          area.render();
        });
    fetch('https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json')
        .then((data) => data.json())
        .then((data) => {
          const stackedColumnPlot = new Column('g2-Column', {
            data,
            isStack: true,
            xField: 'year',
            yField: 'value',
            seriesField: 'type',
            label: {
              // 可手动配置 label 数据标签位置
              position: 'middle', // 'top', 'bottom', 'middle'
            },
            interactions: [{ type: 'active-region', enable: false }],
            columnBackground: {
              style: {
                fill: 'rgba(0,0,0,0.1)',
              },
            },
          })
          stackedColumnPlot.render();
        });

    const piePlot = new Pie('g2-Pie', {
      appendPadding: 10,
      data,
      angleField: 'value',
      colorField: 'type',
      radius: 1,
      innerRadius: 0.6,
      label: {
        type: 'inner',
        offset: '-50%',
        content: '{value}',
        style: {
          textAlign: 'center',
          fontSize: 14,
        },
      },
      interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
      statistic: {
        title: false,
        content: {
          style: {
            whiteSpace: 'pre-wrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
          },
          content: 'AntV\nG2Plot',
        },
      },
    });
    piePlot.render();
  }
}
</script>

<style scoped>
</style>

三、效果演示

用的都是示例，需要时再调后端接口吧。。。。