Antv G2(bizCharts) 点线图 实现

名字

点线图: 不知道怎么命名

效果图

思路

数据： 初始化三条数据， 中间的为显示数据
使用折线图，隐藏折线，隐藏显示数据之外的所有点
X轴：隐藏X轴坐标内容
Y轴：设置y轴内容，y轴标题
注释：添加注释，线条，描述内容

代码（下面有全的子组件代码）

// 1、导入Chart图表
import { Chart } from "@antv/g2";
// 2、初始化图表
useEffect(() => {
    (async () => {
        const chartBox = new Chart({
            container: 'c3',
            autoFit: true,
            width: width,
            height: height,
            title: true
        })
        await setChartBox(chartBox) // 设置图表 chart
        const newData = cloneDeep(cData) // 复制数据 useState引用数据用新的地址替换
        newData.splice(1,1, data) // props接收到的显示的那条数据内容
        await setData(() => newData) // 设置新数据
    })()
}, [])
// 3、图表渲染
const setChart = () => {
    const margin = 1 / 3 // 3为数据列表长度
    chart.clear()
    chart.data(cData);
    chart.scale({
        date: {
        	// 坐标轴起始位置修改  一般[0 , 1]
            range: [margin / 2, 1 - margin / 2],
        },
        num: {
        	// 起始位置不变 末尾位置留白 给标题挤出空间
            range: [0, 1 - margin / 2],
            min: 0, // 设置坐标轴最小值
            max: max,// 设置坐标轴最大值
            nice: true, // 不设置最大值最小值的时候 会根据数据内容自动变化
        },
    });

    chart.tooltip(false); // 关闭提示

    // 坐标轴 X
    chart.axis('date', {
        label: {
            // 返回空字符串 隐藏横坐标文字内容
            formatter: (text) => ""
        }
    })
    // 坐标轴 Y
    chart.axis('num', {
        title: {
            text: cTitle, // 标题内容
            autoRotate: false,
            position: "end",
            offset: -10,
            textStyle: {
                textAlign: 'start', // 文本对齐方向，可取值为： start middle end
                fontSize: '12', // 文本大小
                fontWeight: 'bold', // 文本粗细
                textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
            },
        },
        label: {
            formatter: (text) => text
        }
    })
    // 隐藏折线
    chart.line().style({
        stroke: "transparent" // 设置透明颜色
    }).position('date*num');
    // 隐藏点
    chart
        .point()
        .size(2) // 控制点的大小
        .position('date*num')
        .label("name", (val) => {
            // 关联文字 设置样式
            if (val) {
            	// 吐槽文本内容字段 一会text 一会content 全是试出来的
                return {
                	content: val, // 格式化文字 不给默认显示关联字段的值
                    offsetX: 12, // 距离设置点的X偏移量
                    offsetY: 12, // 距离设置点的Y偏移量
                    style: {
                        fill: dataColor,
                        fontSize: 12,
                    },
                }
            }
        })
        .style("num*name", ((val, name) => {
            // 只显示有名字的那个点 其他点隐藏
            if (name) {
                return {
                    stroke: dataColor,
                    fill: dataColor
                }
            }
            // 其他点 隐藏
            return {
                stroke: "transparent",
                lineWidth: 0
            }
        }))
    // 注释
    chart.annotation().line({
        top: true,
        start: [-0.5, averageNum], // 起始位置 第一个参数为X起始位置  第二个为Y
        end: [2.5, averageNum], // 结束位置 第一个参数为X起始位置  第二个为Y
        // 上面X轴通过 改变了起始位置 range: [margin / 2, 1 - margin / 2]
        // 现在又想要注释的横线横穿整个图表 所以向左右扩展
        // -0.5 向左扩展 2.5向右扩展  数字可以想成是数据列表的索引
        style: {
            stroke: contentColor,
            lineWidth: 1,
            lineDash: [3, 3],
        },
        text: {
            position: 'start',
            style: {
                fill: contentColor,
                fontSize: 12,
                fontWeight: 500,
            },
            content: content,
            offsetY: -5,
        },
    });

    chart.render();
}

子组件代码

import React, { useState, useEffect, useRef } from "react";
import "./chart.less"
import { Chart } from "@antv/g2";
import { cloneDeep } from "lodash"
import PropTypes from 'prop-types';

const Charts = (props) => {
    const {
        width,
        height,
        max,
        content,
        contentColor,
        dataColor,
        cTitle,
        data,
        averageNum
    } = props
    const initData = [
        { date: "a", num: 0 },
        { date: "b", num: 0 },
        { date: "c", num: 0 }
    ]
    const [cData, setData] = useState(initData)
    const [chart, setChartBox] = useState(null)
    const chartRef = useRef()

    useEffect(() => {
        (async () => {
            const chartBox = new Chart({
                container: 'c3',
                autoFit: true,
                width: width,
                height: height,
                title: true
            })
            await setChartBox(chartBox)
            const newData = cloneDeep(cData)
            newData.splice(1,1, data)
            await setData(() => newData)
        })()
    }, [])
    // 下面两个useEffect 根据传入内容改变 进行修改
    // 原来写法是这样的 不过现在根据react的dom diff的逻辑 在父组件使用时候传入个key值
    // 要更新的时候 修改下那个key就行了 少量操作问题不大
    // 大量的话 对性能不友好
    useEffect(() => {
    	// initData 初始固定三条数据  修改中间的即可
        if (cData[1].name && chart) {
            chart.clear()
            setChart()
        }
    }, [chart, cData])
	
    useEffect(() => {
        if (cTitle && chart) {
            chart.clear()
            setChart()
        }
    }, [chart, cTitle])

    useEffect(() => {
        (async () => {
            const newData = cloneDeep(cData)
            newData.splice(1,1, data)
            await setData(() => newData)
            if (data && chart) setChart()
        })()
    }, [chart, data])

    const setChart = () => {
        const margin = 1 / 3
        chart.clear()
        chart.data(cData);
        chart.scale({
            date: {
                range: [margin / 2, 1 - margin / 2],
            },
            num: {
                range: [0, 1 - margin / 2],
                min: 0,
                max: max,
                nice: true,
            },
        });

        chart.tooltip(false);

        // 坐标轴
        chart.axis('date', {
            label: {
                // 返回空字符串 隐藏横坐标文字内容
                formatter: (text) => ""
            }
        })
        chart.axis('num', {
            title: {
                text: cTitle,
                autoRotate: false,
                position: "end",
                offset: -10,
                textStyle: {
                    textAlign: 'start', // 文本对齐方向，可取值为： start middle end
                    fontSize: '12', // 文本大小
                    fontWeight: 'bold', // 文本粗细
                    textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
                },
            },
            label: {
                formatter: (text) => text
            }
        })
        // 隐藏折线
        chart.line().style({
            stroke: "transparent"
        }).position('date*num');
        // 隐藏点
        chart
            .point()
            .size(2)
            .position('date*num')
            .label("name", (val) => {
                // 关联文字 设置样式
                if (val) {
                    return {
                        content: val,
                        offsetX: 12,
                        offsetY: 12,
                        style: {
                            fill: dataColor,
                            fontSize: 12,
                        },
                    }
                }
            })
            .style("num*name", ((val, name) => {
                // 只显示有名字的那个点 其他点隐藏
                if (name) {
                    return {
                        stroke: dataColor,
                        fill: dataColor
                    }
                }
                return {
                    stroke: "transparent",
                    lineWidth: 0
                }
            }))
        // 没找到清空annotation的方法 不用key触发更新的话
        // 再次渲染的时候会叠加出现上次的线
        chart.annotation().line({
            top: true,
            start: [-0.5, averageNum],
            end: [2.5, averageNum],
            style: {
                stroke: contentColor,
                lineWidth: 1,
                lineDash: [3, 3],
            },
            text: {
                position: 'start',
                style: {
                    fill: contentColor,
                    fontSize: 12,
                    fontWeight: 500,
                },
                content: content,
                offsetY: -5,
            },
        });

        chart.render();
    }

    return (
        <div className={"chart"}>
            <div id="c3" ref={chartRef} />
        </div>
    )
}
Charts.defaultProps = {
    max: 150,
    data: { date: "c", num: 60, name: "我" },
    width: 300,
    height: 200,
    dataColor: "#fe8140", // 文字 点颜色
    contentColor: "#f4a240", // 横线颜色
    cTitle: "单位: 小时", // 纵坐标轴标题
    content: "团队均值: 75",// 均值说明
    averageNum: 75,// 均值说明
}

Charts.propTypes = {
    max: PropTypes.number,
    data: PropTypes.object.isRequired,
    width: PropTypes.number,
    height: PropTypes.number,
    dataColor: PropTypes.string,
    contentColor: PropTypes.string,
    cTitle: PropTypes.string,
    content: PropTypes.string,
    averageNum: PropTypes.number,
}

export default Charts;

父组件代码

import React from 'react';
import { Button } from "antd"
import Chart3 from "./components/chart3"

class Charts extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            cTitle: "单位: 小时",
            data: { date: "b", num: 120, name: "我" },
            averageNum: 75
        }
    }

    change = () => {
        const { cTitle } = this.state
        const flag = cTitle === "单位: 个"
        const title = flag ? "单位: 小时" : "单位: 个"
        const data = flag ?
            { date: "b", num: 120, name: "我" } :
            { date: "b", num: 55, name: "你" }
        const averageNum = flag ? 75 : 55
        this.setState({
            cTitle: title,
            data: data,
            averageNum: averageNum,
        })
    }

    render () {
        const { cTitle, data, averageNum } = this.state
        // 组件通过key值变化可以触发更新
        return (
            <div className={"chartBox"}> 
                <Chart3
                    cTitle={cTitle}
                    data={data}
                    key={data.num}
                    averageNum={averageNum}
                />
                <Button onClick={this.change}>切换</Button>
            </div>
        )
    }
}

export default Charts;