```jsx
//index.js
import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Canvas } from '@tarojs/components';
import uCharts from '../../js_sdk/u-charts/u-charts.js';
import './index.scss';
var uChartsInstance = {};
export default class Index extends Component { 
  constructor(){
    super(...arguments)    
    this.state = {
      cWidth: 750,
      cHeight: 500,
      pixelRatio: 1,
    }
  }

  componentDidMount(){
    const sysInfo = Taro.getSystemInfoSync();
    const pixelRatio = sysInfo.pixelRatio;
    //这里的第一个 750 对应 css .charts 的 width
    const cWidth = 750 / 750 * sysInfo.windowWidth;
    //这里的 500 对应 css .charts 的 height
    const cHeight = 500 / 750 * sysInfo.windowWidth;
    this.setState({cWidth, cHeight, pixelRatio},()=>this.getServerData());
  }

  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]
              }
            ]
          };
      this.drawCharts('OLZxmAZyKqhZNgTuXXHHnjonGNvTpdWa', res);
    }, 500);
  }

  drawCharts = (id, data)=>{
    const { cWidth, cHeight, pixelRatio } = this.state;
    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');
        canvas.width = res[0].width * pixelRatio;
        canvas.height = res[0].height * pixelRatio;
        uChartsInstance[id] = new uCharts({
          type: "column",
          context: ctx,
          width: cWidth * pixelRatio,
          height: cHeight * pixelRatio,
          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
            }
          }
        });
      }else{
        console.error("[uCharts]: 未获取到 context");
      }
    });
  }

  tap = (e)=>{
    uChartsInstance[e.target.id].touchLegend(e);
    uChartsInstance[e.target.id].showToolTip(e);
  }

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

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