g2 plot示例

qq_45575528

于 2024-07-27 21:53:00 发布

阅读量65

点赞数 1

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/qq_45575528/article/details/140741891

版权

折线图示例

import React, { useEffect } from 'react';
import { Line } from '@antv/g2plot';


function LineCharts() {
    useEffect(() => {
        fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
            .then((res) => res.json())
            .then((data) => {
                const line = new Line('container', {
                    data,
                    xField: 'year',
                    yField: 'value',
                    seriesField: 'category',
                    xAxis: {
                        type: 'time',
                    },
                    yAxis: {
                        label: {
                            // 数值格式化为千分位
                            formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
                        },
                        tickInterval:1900, //控制刻度间距
                    },
                });
    
                line.render();
            });
    }, [])
    return <div>
        <div className="container" id='container'></div>
    </div>
}

export default LineCharts;