react canvas 自定义 柱状图 tooltip

使用canvas写一个柱状图

背景

在项目开发中, 项目中只是用一个柱状图，无需使用第三方组件库(@ant-design/charts, G2, G2Plot, echarts等)，自定义一个图表，定制化程度高，第三方组件库限制性大，自定义程度低。

功能说明

柱状图, 响应式，自定义tooltip样式

import React, { useEffect, useRef, useState } from 'react';
import styles from './IncomeRecord.less';

const config = { // 配置相关参数
    width: 640,
    height: 330,
    strokeCole: "#E5E5E5",
    fontSize: "14px",
    fontColor: "#858585",
    paddingLeft: 20,
    paddingTop: 20,
    paddingRight: 20,
    paddingBottom: 20,
    rowNum: 6, // 行数
    columnNum: 7, // 列数
    textX: ['01/03', '01/04', '01/05', '01/06', '01/07', '01/08', '01/09'], // 行文本
    offlineBillingData: [10, 20, 30, 0, 80, 60, 0],
    consultationData: [20, 20, 70, 50, 10, 0, 60],
    consultationColor: "#4F5EE5",
    offlineBillingColor: "#37962B",
    columnMaxNum: 100, // Y轴最大数
    columnSpacingWifth: 20, // 列距
    textYOffset: 24, // Y轴文字偏移量
    textXOffset: 4, // X轴文字偏移量
    chartXOffset: 24, // 柱状图X轴偏移量
    chartYOffset: 24, // 柱状图Y轴偏移量
}

const IncomeTrend: React.FC = () => {
    const refCanvas = useRef(null);
    const refCanvasWrap = useRef(null);
    const [chartWidth, setChartWidth] = useState(640);
    const [position, setPosition] = useState({ x: 0, y: 0 })
    const [currentData, setCurrentData] = useState({ x: 0, y: 0, d: "01/01", v: true })

    useEffect(() => {
        function resize(e: any) {
            const wrap: