ReportPlusデータレポートセンターアプレット
このアプレットは、主にuchartsおよびwyb-tableプラグインによって実装されたデータレポート機能を使用します。著者のQiuyunとSirWの優れたオープンソースプロジェクトに感謝します。
ダウンロードリンク
无偿开源！你们的start是我的动力！
クイックエクスペリエンス
特徴
- uni-appの最も人気のあるチャートuChartsプラグインは、チャート表示を完了するために使用されます。プラグインには、詳細なドキュメント、シンプルで便利な呼び出し、および優れたパフォーマンスとエクスペリエンスがあります。uchartsチャートプラグイン。
- wyb-tav = bleプラグインを使用して、テーブル機能を完了し、チャートの並べ替え、スクロール、およびその他の多くの機能をサポートします。開始するのは非常に便利です。テーブルフォームプラグイン
- ページ、チャート、およびテーブルはすべてカプセル化されており、ユーザーはデータをアセンブルするだけでページレイアウトをすばやく完成させることができます。
ReportPlusページ
-
包括的なレポート
-
メンバーレポート
他のチャートには対応するプラグインファイルがあるため、data-progressとtext-blockによってカプセル化されたパラメーターのみが説明されています。
-
プログレスバー（data-progress）
アラム タイプ 説明する ataType ストリング 合格しなかった場合は目標値と現在値が表示されず、合格した場合は表示されます。 xpect ストリング 目標値 わあ ストリング 今の価値 alue ストリング 現在の達成値/目標値 -
テキストブロック
パラメータ タイプ 説明する 親切 ストリング 使用するテキストブロックのタイプを示します バックグラウンド ストリング 背景色 コンテンツ 配列 テキストボックス内のテキストの内容
- 種類の現在の値：1、2、3、4、5（注：コンテンツ内：テキストはテキストに配置され、数値は値に配置され、colortextはテキストの色、colorvalueは数値の色です）
- 1：2層に分かれており、上層は純粋な数字、下層は純粋なテキスト組版タイプです。
{
"kind":1,
"background":["#3EB2F5","#9374F7"],
"content":[
{"text":"","value":"5860","colortext":"","colorvalue":"#fff","size":"44rpx"},
{"text":"新增微好友","value":"","colortext":"#fff","colorvalue":"","size":"24rpx"}
]
}
- 2：上部テキスト+数字、下部テキスト+数字植字タイプの2つのレイヤーに分割
{
"kind":2,
"background":["#B678FD","#4A64F9"],
"content":[
{"text":"环比增长","value":"3.2%","colortext":"#fff","colorvalue":"#fff","size":"24rpx"},
{"text":"同比增长","value":"1.1%","colortext":"#fff","colorvalue":"#fff","size":"24rpx"}
]
}
- 3：3層に分かれており、上層は純粋な数字、中層は純粋なテキスト、下層は左右のブロックに分かれており、左下層のテキスト+数字、右下層のテキスト+数字の植字タイプ
{
"kind":3,
"background":["#B678FD","#4A64F9"],
"content":[
{"text":"","value":"38%","colortext":"","colorvalue":"#fff","size":"44rpx"},
{"text":"小程序购买活跃会员占比","value":"","colortext":"#fff","colorvalue":"","size":"24rpx"},
{"text":"同比","value":"2.5%","colortext":"#fff","colorvalue":"#fff","size":"20rpx"},
{"text":"环比","value":"3.2%","colortext":"#fff","colorvalue":"#fff","size":"20rpx"}
]
}
- 4：3つのレイヤーに分かれており、上層は純粋なテキスト、中層は純粋な数字、下層のテキスト+数字、植字タイプは
{
"kind":4,
"background":["#F0F0F0","#F0F0F0"],
"content":[
{"text":"已评价数","value":"","colortext":"#000","colorvalue":"","size":"24rpx"},
{"text":"","value":"161","colortext":"","colorvalue":"#09A1FD","size":"44rpx"},
{"text":"增长","value":"","colortext":"#000","colorvalue":"","size":"20rpx"},
{"text":"up","value":"325","colortext":"#DF297D","colorvalue":"#f25287","size":"20rpx"}
]
}
- 5：5層に分かれています。詳しくは会員運営・現役会員のセクションをご覧ください。
{
"kind":5,
"background":["#F77E89","#F7953B"],
"content":[
{"text":"会员销售占比","value":"","colortext":"#fff","colorvalue":"","size":"24rpx"},
{"text":"","value":"80%","colortext":"","colorvalue":"#fff","size":"44rpx"},
{"text":"环比","value":"81.5%","colortext":"#fff","colorvalue":"#fff","size":"20rpx"},
{"text":"同比","value":"-81.3%","colortext":"#fff","colorvalue":"#fff","size":"20rpx"},
{"text":"平均参考水平","value":"85%","colortext":"#fff","colorvalue":"#fff","size":"20rpx"}
]
},
一般的な問題
問題1：グラフの読み込みに失敗したり、エラーページが直接表示されたりすることがあります
- 理由：canvasIdが繰り返されているため、グラフを読み込めません。canvasIdが失われているため、DOMを取得できません。
- 解決策：コンポーネントにcanvasIdを定義してください。これは、純粋な数値、変数、繰り返し、および可能な限り長くすることはできません。WeChatアプレットの基本ライブラリを確認し、2.16に変更してください。 0または基本ライブラリの最新バージョン。親要素または親コンポーネントがv-ifを使用して表示を制御しているかどうかを確認してください。使用している場合は、v-showに変更し、v-showのロジックをコンポーネントにバインドしてください。 。
質問2：チャートをクリックしてもプロンプト情報が表示されないか、クリック位置が不正確です
- 理由：コンポーネントにネストされたコンポーネント+ 2Dモードが有効+コンポーネントで使用されているスクロールビューラベル。これにより、グラフの位置が不正確になります。
- 解決策：属性を追加します：inScrollView =” true”：pageScrollTop =” pageScrollTop”：ontouch =” true”、ここで、pageScrollTopは上からの現在のスクロールの高さです
その他の質問については、 Qiuyunチャートコンポーネントツール->よくある質問を参照してください。
後の計画
- レポートページを追加する
- qiun-data-chartsでより多くのデータコムの使用法を探る
マニュアル
uchartの公式ウェブサイト
でテーブルプラグインを使用するための手順
QQグループ
- グループ番号：878946748（グループに入る際の注意事項）