```tsx
//index.js
import React, { useState, useRef, useLayoutEffect } from 'react';
import Taro, { useReady } from '@tarojs/taro';
import { View, Canvas } from '@tarojs/components';
import uCharts from '../lib/u-charts-original';
// import './index.scss';

interface ColumnChartProps {
  // 可以添加 props 定义
}

function ColumnChartComponent(_props: ColumnChartProps) {
  const [cWidth, setCWidth] = useState(750);
  const [cHeight, setCHeight] = useState(500);
  const [pixelRatio, setPixelRatio] = useState(1);

  // 使用 ref 存储图表实例
  const uChartsInstanceRef = useRef<Record<string, any>>({});

  const drawCharts = (id: string, data: any) => {
    const query = Taro.createSelectorQuery();
    query.select('#' + id).fields({ node: true, size: true }).exec(res => {
      if (res[0]) {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');
        const chart = new uCharts({
          type: "column",
          context: ctx,
          width: canvas.width,
          height: canvas.height,
          categories: data.categories,
          series: data.series,
          // pixelRatio: pixelRatio,
          animation: true,
          background: "#FFFFFF",
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          padding: [15, 15, 0, 5],
          enableScroll: false,
          legend: {},
          xAxis: {
            disableGrid: true
          },
          yAxis: {
            data: [
              {
                min: 0
              }
            ]
          },
          extra: {
            column: {
              type: "group",
              width: 30,
              activeBgColor: "#000000",
              activeBgOpacity: 0.08
            }
          }
        });
        uChartsInstanceRef.current[id] = chart;
      } else {
        console.error("[uCharts]: 未获取到 context");
      }
    });
  }

  const getServerData = () => {
    //模拟从服务器获取数据时的延时
    setTimeout(() => {
      //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
      let res = {
        categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
        series: [
          {
            name: "目标值",
            data: [35, 36, 31, 33, 13, 34]
          },
          {
            name: "完成量",
            data: [18, 27, 21, 24, 6, 28]
          }
        ]
      };
      drawCharts('vTsUbNQurVfZNRMaupTQjygMuEHwuTNT', res);
    }, 500);
  }

  const tap = (e: any) => {
    uChartsInstanceRef.current[e.target.id]?.touchLegend(e);
    uChartsInstanceRef.current[e.target.id]?.showToolTip(e);
  }

  useLayoutEffect(() => {
    console.debug('useReady')
    const sysInfo = Taro.getSystemInfoSync();
    // console.debug('sysInfo', sysInfo)
    const pr = sysInfo.pixelRatio;
    //这里的第一个 750 对应 css .charts 的 width
    const cw = 750 / 750 * sysInfo.windowWidth;
    //这里的 500 对应 css .charts 的 height
    const ch = 500 / 750 * sysInfo.windowWidth;
    setCWidth(cw);
    setCHeight(ch);
    setPixelRatio(pr);

    // 直接在这里获取数据
    getServerData();
  });

  const canvasProps = { style: { width: cWidth, height: cHeight } };
  return (
    <View>
      <Canvas
        {...canvasProps}
        canvas-id="vTsUbNQurVfZNRMaupTQjygMuEHwuTNT"
        id="vTsUbNQurVfZNRMaupTQjygMuEHwuTNT"
        type="2d"
        // className="charts"
        onTouchEnd={tap}
      />
    </View>
  );
}

// 默认导出
export default ColumnChartComponent;

// 命名导出，保持向后兼容
export const ColumnChartOriginal2D = ColumnChartComponent;

// /*index.scss*/
// .charts{
//   width: 750rpx;
//   height: 500rpx;
// }
```