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