G2-- 2 面积图并为提示添加单位

最新推荐文章于 2023-01-07 22:56:23 发布

蒲公英

最新推荐文章于 2023-01-07 22:56:23 发布

阅读量395

点赞数

分类专栏： G2 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45158253/article/details/119954222

版权

G2 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

代码可直接在官网里运行

import { Chart } from '@antv/g2';

    const data = [
      {
        Data: '2021-07-24 8:00',
        sales: 57
      },
      {
        Data: '2021-07-24 12:00',
        sales: 55
      },
      {
        Data: '2021-07-24 16:00',
        sales: 60
      },
      {
        Data: '2021-07-24 20:00',
        sales: 54
      },
      {
        Data: '2021-07-24 24:00',
        sales: 57
      },
      {
        Data: '2021-07-25 4:00',
        sales: 56
      },
      {
        Data: '2021-07-25 8:00',
        sales: 62
      },
      {
        Data: '2021-07-25 12:00',
        sales: 60
      },
      {
        Data: '2021-07-25 16:00',
        sales: 55
      },
      {
        Data: '2021-07-25 20:00',
        sales: 58
      },
      {
        Data: '2021-07-25 24:00',
        sales: 60
      },
      {
        Data: '2021-07-26 4:00',
        sales: 57
      },
      {
        Data: '2021-07-26 8:00',
        sales: 55
      },
      {
        Data: '2021-07-26 12:00',
        sales: 57
      },
      {
        Data: '2021-07-26 16:00',
        sales: 58
      },
      {
        Data: '2021-07-26 20:00',
        sales: 60
      },
      {
        Data: '2021-07-26 24:00',
        sales: 57
      }
    ];
    const chart = new Chart({
      container: 'container',
      autoFit: true,
      height: 500,
      padding: [100, 100, 100, 100]
    });
    chart.data(data);
    chart.scale('Data', {
      range: [0, 1],
      tickCount: 10,
      type: 'timeCat'
    });
    chart.scale('sales', {
      nice: true,
      min: 40,
      alias: '当前水位',
    });

    chart.axis('sales', {
      label: {
        formatter: text => {
          return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ' m';
        }
      }
    });
    chart.tooltip({
      showCrosshairs: true,
    });

    chart.line().position('Data*sales');
    chart.area().position('Data*sales').tooltip('Data*sales', (Data: any, sales: any) => {
      return {
        name: Data,
        value: sales + 'm',
      };
    });
    chart.render();