目次
第 1 章 はじめに
- 要件: これはかなり前のプロジェクトの要件でした。当時、私はアプリの初心者でした。uniapp によって作成されたアプリ プロジェクトでグラフ統計を実行するという要件がありました。最初は、それができると思いました。使ってみたら、互換性の高いこんなプラグインがあることがわかったので、新しいツールを試してみましたが、うまくいくまで丸一日かかったので、記録を残しておこうと思いました将来の使用のために。
- 互換性の確認: echarts
- 公式 Web サイトからの原文である uCharts を表示します - uCharts は、キャンバス API に基づいて開発されたチャート ライブラリであり、すべてのフロントエンド アプリケーションに適しています。開発者は、Web、iOS、Android (ユニapp / taro)、さまざまな小規模プログラム (WeChat/Alipay/Baidu/Toutiao/Feishu/QQ/Kuaishou/DingTalk/Taobao/JD/360)、Kuai Apps、およびキャンバス API をサポートするその他のプラットフォーム。
uChart 公式 Web サイト: uCharts 公式 Web サイト - Qiuyun uCharts クロスプラットフォーム チャート ライブラリ
第 2 章 プラグイン uCharts のインストール
- プラグインのインストールを見つける
- 新しいプラグインをインストール -> プラグイン マーケットに移動してインストールします
- 必要な uChart を検索して見つけます
- ダウンロードして自分のプロジェクトにインポートします
- ただ選択してください
- インポート成功
第 3 章 uChart の使用
- 公式ウェブサイトに従ってください
- インポートが成功したら、直接使用できるようになります
<template>
<view>
<view class="charts-box">
<qiun-data-charts type="column" :chartData="chartData" />
</view>
</view>
</template><script>
export default {
data() {
return {
chartData: {},
};
},
onReady() {
this.getServerData();
},
methods:{
getServerData() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
let res = {
categories: ["2016","2017","2018","2019","2020","2021"],
series: [
{
name: "目标值",
data: [35,36,31,33,13,34]
},
{
name: "完成量",
data: [18,27,21,24,6,28]
}
]
};
this.chartData = JSON.parse(JSON.stringify(res));
}, 500);
},
}
}
</script> <style lang="scss">
.charts-box {
width: 100%;
height: 1200rpx;
}
</style>- レンダリング
- 使用に問題がないことを示しています
- 特定の用途については、デモに基づいて最初のドラフトを作成し、その後詳細を修正します。
第4章 注意事項
プロジェクトで次の問題が発生した場合は、まず公式 Web サイトにアクセスしてそれが含まれているかどうかを確認し、それから独自に調査してください。
