📝 docs(小程序图表库): 新增 Taro 2D 柱状图使用示例文档

- 添加完整的 Taro 小程序使用 u-charts 绘制 2D 柱状图的代码示例
- 包含 React 组件实现、样式定义和详细注释
- 提供从数据获取到图表渲染的完整流程演示

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

@@ -0,0 +1,125 @@
+```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;
+}
+```