📝 docs(小程序图表库): 新增taro-2d饼图class使用示例文档

- 创建新的markdown文档，展示在Taro框架中使用u-charts库绘制2d饼图的完整class组件示例
- 包含完整的React class组件代码，涵盖生命周期、状态管理、画布初始化和图表渲染逻辑
- 提供配套的SCSS样式文件，确保图表在不同设备上的适配显示
- 详细注释关键步骤，如像素比计算、画布上下文获取和图表配置参数说明

docs/小程序图表库示例/taro-2d饼状图class使用示例.md

@@ -0,0 +1,110 @@
+```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('HPTdeOYFgaHlwidEmFOZkYTRwhnebAad', 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: "pie",
+          context: ctx,
+          width: cWidth * pixelRatio,
+          height: cHeight * pixelRatio,
+          series: data.series,
+          pixelRatio: pixelRatio,
+          animation: true,
+          background: "#FFFFFF",
+          color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
+          padding: [5,5,5,5],
+          enableScroll: false,
+          extra: {
+            pie: {
+              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="HPTdeOYFgaHlwidEmFOZkYTRwhnebAad"
+          id="HPTdeOYFgaHlwidEmFOZkYTRwhnebAad"
+          type="2d"
+          class="charts"
+          onTouchEnd={this.tap}/>
+      </View>
+    )
+  }
+}
+
+/*index.scss*/
+.charts{
+  width: 750rpx;
+  height: 500rpx;
+}
+```