使用 bizcharts 在react中、AntDesign中实现图表（柱状图、折线图、饼图等）

ゞ浴缸里的玫瑰 2023-06-13 11:25 39阅读 0赞

（1）安装依赖：

> npm install bizcharts --save
> 
> npm install @antv/data-set

（2）[图表构成的使用][Link 1]

（3）完整代码：

【柱状图】

import React, { Component } from 'react';
    import {
        Chart,
        Geom,
        Axis,
        Tooltip,
        Legend,
    } from "bizcharts";
    import DataSet from "@antv/data-set";
    
    
    /**
     * 使用bizCharts完成图表
     */
    class Line1 extends Component {
    
        render() {
            const data = [
                {
                    name: "London",
                    "Jan.": 18.9,
                    "Feb.": 28.8,
                    "Mar.": 39.3,
                    "Apr.": 81.4,
                    May: 47,
                    "Jun.": 20.3,
                    "Jul.": 24,
                    "Aug.": 35.6
                },
                {
                    name: "Berlin",
                    "Jan.": 12.4,
                    "Feb.": 23.2,
                    "Mar.": 34.5,
                    "Apr.": 99.7,
                    May: 52.6,
                    "Jun.": 35.5,
                    "Jul.": 37.4,
                    "Aug.": 42.4
                }
            ];
            const ds = new DataSet();
            const dv = ds.createView().source(data);
            dv.transform({
                type: "fold",
                fields: ["Jan.", "Feb.", "Mar.", "Apr.", "May", "Jun.", "Jul.", "Aug."],
                // 展开字段集
                key: "月份",
                // key字段
                value: "月均降雨量" // value字段
            });
            return (
                <div>
                    <Chart height={400} data={dv} forceFit>
                        <Axis name="月份" />
                        <Axis name="月均降雨量" />
                        <Legend />
                        <Tooltip
                            crosshairs={
       {
                                type: "y"
                            }}
                        />
                        <Geom
                            type="interval"
                            position="月份*月均降雨量"
                            color={"name"}
                            adjust={[
                                {
                                    type: "dodge",
                                    marginRatio: 1 / 32
                                }
                            ]}
                        />
                    </Chart>
                </div>
            )
        }
    }
    export default Line1;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

【折线图】：

import React, { Component } from 'react';
    import {
        Chart,
        Geom,
        Axis,
        Tooltip,
        Legend,
    } from "bizcharts";
    import DataSet from "@antv/data-set";
    
    
    /**
     * 使用bizCharts完成图表
     */
    class Line1 extends Component {
    
        render() {
            const data = [
                {
                    month: "Jan",
                    city: "Tokyo",
                    temperature: 7
                },
                {
                    month: "Jan",
                    city: "London",
                    temperature: 3.9
                },
                {
                    month: "Feb",
                    city: "Tokyo",
                    temperature: 6.9
                },
                {
                    month: "Feb",
                    city: "London",
                    temperature: 4.2
                },
                {
                    month: "Mar",
                    city: "Tokyo",
                    temperature: 9.5
                },
                {
                    month: "Mar",
                    city: "London",
                    temperature: 5.7
                },
                {
                    month: "Apr",
                    city: "Tokyo",
                    temperature: 14.5
                },
                {
                    month: "Apr",
                    city: "London",
                    temperature: 8.5
                },
                {
                    month: "May",
                    city: "Tokyo",
                    temperature: 18.4
                },
                {
                    month: "May",
                    city: "London",
                    temperature: 11.9
                },
                {
                    month: "Jun",
                    city: "Tokyo",
                    temperature: 21.5
                },
                {
                    month: "Jun",
                    city: "London",
                    temperature: 15.2
                },
                {
                    month: "Jul",
                    city: "Tokyo",
                    temperature: 25.2
                },
                {
                    month: "Jul",
                    city: "London",
                    temperature: 17
                },
                {
                    month: "Aug",
                    city: "Tokyo",
                    temperature: 26.5
                },
                {
                    month: "Aug",
                    city: "London",
                    temperature: 16.6
                },
                {
                    month: "Sep",
                    city: "Tokyo",
                    temperature: 23.3
                },
                {
                    month: "Sep",
                    city: "London",
                    temperature: 14.2
                },
                {
                    month: "Oct",
                    city: "Tokyo",
                    temperature: 18.3
                },
                {
                    month: "Oct",
                    city: "London",
                    temperature: 10.3
                },
                {
                    month: "Nov",
                    city: "Tokyo",
                    temperature: 13.9
                },
                {
                    month: "Nov",
                    city: "London",
                    temperature: 6.6
                },
                {
                    month: "Dec",
                    city: "Tokyo",
                    temperature: 9.6
                },
                {
                    month: "Dec",
                    city: "London",
                    temperature: 4.8
                }
            ];
            const cols = {
                month: {
                    range: [0, 1]
                }
            };
            return (
                <div>
                    <Chart height={400} data={data} scale={cols} forceFit>
                        <Legend />
                        <Axis name="month" />
                        <Axis
                            name="temperature"
                            label={
       {
                                formatter: val => `${val}°C`
                            }}
                        />
                        <Tooltip
                            crosshairs={
       {
                                type: "y"
                            }}
                        />
                        <Geom
                            type="line"
                            position="month*temperature"
                            size={2}
                            color={"city"}
                            shape={"smooth"}
                        />
                        <Geom
                            type="point"
                            position="month*temperature"
                            size={4}
                            shape={"circle"}
                            color={"city"}
                            style={
       {
                                stroke: "#fff",
                                lineWidth: 1
                            }}
                        />
                    </Chart>
                </div>
            )
        }
    }
    export default Line1;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 1][]

\-------完。以上图表是使用 bizcharts  来完成的。

[更多详细的文档，查看bizcharts官网。][Link 1]

[Link 1]: https://bizcharts.net/products/bizCharts/docs/chart
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191117130459951.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191117131239363.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70