```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 = {
            series: [
              {
                data: [{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18},{"name":"五班","value":8}]
              }
            ]
          };
      this.drawCharts('hFZBqQqTarCLkxHkRhJqQzfdJRqCDybT', 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: "ring",
          context: ctx,
          width: cWidth * pixelRatio,
          height: cHeight * pixelRatio,
          series: data.series,
          pixelRatio: pixelRatio,
          animation: true,
          rotate: false,
          rotateLock: false,
          background: "#FFFFFF",
          color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
          padding: [5,5,5,5],
          dataLabel: true,
          enableScroll: false,
          legend: {
            show: true,
            position: "right",
            lineHeight: 25
          },
          title: {
            name: "收益率",
            fontSize: 15,
            color: "#666666"
          },
          subtitle: {
            name: "70%",
            fontSize: 25,
            color: "#7cb5ec"
          },
          extra: {
            ring: {
              ringWidth: 60,
              activeOpacity: 0.5,
              activeRadius: 10,
              offsetAngle: 0,
              labelWidth: 15,
              border: false,
              borderWidth: 3,
              borderColor: "#FFFFFF"
            }
          }
        });
      }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="hFZBqQqTarCLkxHkRhJqQzfdJRqCDybT"
          id="hFZBqQqTarCLkxHkRhJqQzfdJRqCDybT"
          type="2d"
          class="charts"
          onTouchEnd={this.tap}/>
      </View>
    )
  }
}

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