序文
-
ユニアプリではデータの表示が必要になることが多く、この状況に対応して、異なるプラットフォームでの表示に対応するためのサードパーティ製パッケージが開発されました。
-
uCharts の使用方法は PC 上の Echarts と似ており、ユニアプリで uCharts を使用する方が軽くて快適です。
-
ただし、このサードパーティ製パッケージにはメリットとデメリットがあり、また落とし穴もあるので、以下で一つずつ説明していきます。
uCharts の使用上の注意事項と落とし穴の回避
-
まず、このパッケージを hb プラグイン マーケットからダウンロードするときに、広告を見る必要があるかもしれません...
-
公式ドキュメントは確かに非常に明確で有益ですが、少し慣れるだけで十分です。ただし、オンライン デバッグとカスタマイズの要件には料金が必要です。
-
このコンポーネントをユニアプリで使用すると、配置、子と親、固定配置、非表示などの CSS 属性の影響を受け、表示は正常になりますが、クリックしても無反応になります。データ上で「データ」ポップアップボックスは表示されません。
-
これに関してネットではcanasidを追加するなどと書かれていますが、大きな効果はなく、ソースコードを変更した場合は削除するのではなく追加することをお勧めします。
-
ページ上で使用する場合は、各アイコンをグローバル コンポーネント (コンポーネントの長さと幅 100) にカプセル化し、ページ上で直接使用することをお勧めします。
-
各アイコンのパディング属性は非常に重要で、親コンポーネントのレイアウトを修正しやすくするために、上から右、下から左の負の値にすることができます。
-
uCharts は、タイトルなどを含む、例内のさまざまなグラフィック データ形式を変更できず、一致することのみが可能です。
-
x 軸と y 軸の単位は、x 軸で直接有効になります。有効にするには、y 軸をオンにする必要があります。ドキュメントをお読みください。
uCharts パッケージのアドレス
プラグイン マーケット アドレス: Qiuyun ucharts echarts 高性能クロスエンド チャート コンポーネント - DCloud プラグイン マーケット
パッケージドキュメントのアドレス: uCharts 公式 Web サイト - Qiuyun uCharts クロスプラットフォーム チャート ライブラリ
コード
1. プラグイン マーケットにアクセスします - プラグインをダウンロードし、HBuilderX にインポートします。
2. グローバル コンポーネント コンポーネント ファイルに移動します - 右クリックして新しいコンポーネントを作成します - 同じ名前のディレクトリを作成し (非常に重要)、failure-rate という名前の scss を作成します
コードは次のとおりです - 公式ドキュメントを確認してください - 幅と高さに注意してください - 100 - 親コンポーネントの幅と高さを使用します
<template>
<view style="width: 100% ;height: 100%">
<qiun-data-charts type="line" :opts="calleqopts" :chartData="calleqdata" />
</view>
</template>
<script>
export default {
name: "failure-rate",
// 接受父组件传递数据
props: ['data'],
watch: {
data: {
deep: true,
handler(newVal) {
console.log('执行了', newVal);
// 监听data的变化，数据变化时候更新图标
// x轴数据
this.categories = newVal.xdata
// 数据
this.calleqdata.series[0].name = newVal.series[0].name
this.calleqdata.series[0].data = newVal.series[0].data
this.calleqdata.series[1].name = newVal.series[1].name
this.calleqdata.series[1].data = newVal.series[1].data
}
}
},
data() {
return {
// 报警故障配置
calleqopts: {
// 数据颜色
color: ["#1890FF", "#ffc370", ],
// 内边距-矫正父组件布局
padding: [-5, 0, 0, -5],
// 是否显示折线图每个节点数据
dataLabel: false,
// 是否在每个节点-显示节点
dataPointShape: false,
// 是否开启滚动条-配合x轴itemCount出现x轴滚动条
enableScroll: false,
// 图例配置
legend: {
// 把图例放在图表上方
position: "top",
},
// x轴配置
xAxis: {
// 单位
title: '日期',
// 单位横移偏移量
titleOffsetX: '-20',
// 不绘制纵向网格
disableGrid: true
},
// y轴配置
yAxis: {
// 虚线-实线
gridType: "dash",
// 虚线单位
dashLength: 2,
// 开启y轴单位
showTitle: true,
// y轴配置
data: [{
// 不写最大最小值-自增长
// min: 0,
// max: 150,
// y轴单位
title: '数量',
}]
},
extra: {
line: {
// 曲线圆滑模式
type: "curve",
// 折线的宽度
width: 2,
// 点击弹出框时，节点样式
activeType: "hollow",
// 自定义渐变色
linearType: "custom",
// 开启阴影
onShadow: true,
// 水平动画
animation: "horizontal"
}
}
},
// 报警故障数据
calleqdata: {
// x轴数据
categories: [],
// 表格数据 - 一个对象就是一个数据
series: [{
// 数据名
name: "",
// 数据渐变
linearColor: [
[
0,
"#1890FF"
],
[
0.25,
"#00B5FF"
],
[
0.5,
"#00D1ED"
],
[
0.75,
"#00E6BB"
],
[
1,
"#90F489"
]
],
// 阴影部分
setShadow: [
3,
8,
10,
"#1890FF"
],
// 数据量
data: []
},
{
name: "",
linearColor: [
[
0,
"#FAC858"
],
[
0.33,
"#FFC371"
],
[
0.66,
"#FFC2B2"
],
[
1,
"#FA7D8D"
]
],
setShadow: [
3,
8,
10,
"#FC8452"
],
data: []
}
]
},
};
},
}
</script>3. 親コンポーネントにアクセスして使用します。コンポーネントはミニプログラム仕様に準拠しているため、登録せずに直接使用できます。コードは次のとおりです。
<template>
<view class="failceshi">
<i>折线图</i>
<view class="failceshi-item">
<failure-rate :data="calltendency" />
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 报警率趋势
calltendency: {},
};
},
onLoad() {
// 模拟掉接口
this.getcalltendency()
},
onReady() {
// 模拟掉接口
// this.getcalltendency()
},
methods: {
getcalltendency() {
console.log('发送数据');
setTimeout(() => {
let a = {
xdata: ["2018", "2019", "2020", "2021", "2022", "2023"],
series: [{
name: '电话',
data: [15, 45, 15, 45, 15, 45]
},
{
name: '短信',
data: [95, 125, 95, 125, 95, 125]
}
]
}
// 传递数据
this.calltendency = a
console.log('发送完毕');
}, 2000)
}
}
}
</script>
<style lang="scss">
.failceshi {
i {
color: skyblue;
font-weight: 700;
font-size: 38rpx;
margin-left: 50rpx;
}
.failceshi-item {
width: 100vw;
height: 400rpx;
}
}
</style>4. インターフェイスを呼び出して実際のデータを渡します - サブコンポーネントで渡されたデータをリッスンして操作します
要約:
このプロセスを経て、uni-app がチャート表示 (単位付きの折れ線グラフ) に uCharts を使用していることに最初の強い印象を持つと思いますが、実際の開発では状況が明らかに異なりますので、その原理を理解する必要があります。 、その原点から離れることなく変わることはありません。さあ、労働者を殴ってください！
欠点があればご指摘ください、ありがとうございます - Feng Guo Wuhen