序文
uCharts には非常に実用的なチャート コンポーネントが多数含まれているため、チャート ページのフロントエンドの開発で多くの手間が省けます。単一のグラフを単一のページに追加するための uniapp の公式ドキュメントは非常に充実しているため、ここでは詳しく説明しません。この記事では、複数の uCharts グラフ コンポーネントを含むページの問題の解決に焦点を当てます。
1. 事例の説明
例: 棒グラフとドーナツ グラフを含める必要があるアプリ ページがあります。プロトタイプのレンダリングは次のとおりです。
2. ソースコード分析
1.縦棒グラフとドーナツ グラフのコンポーネントをテンプレートに導入する
コードは以下のように表示されます。
<template>
<view>
<view>
<p>日收支统计</p>
<qiun-data-charts
type="column"
:opts="optsColumn"
:chartData="chartDataColumn"
/>
</view>
<view>
<p>分类统计</p>
<qiun-data-charts
type="ring"
:opts="optsRing"
:chartData="chartDataRing"
/>
</view>
</view>
</template>
2 つのグラフ コンポーネントで使用される opts と chartDate には異なる名前を付ける必要があることに注意してください。たとえば、棒グラフを縦棒で結合したり、ドーナツ グラフをリングで結合したりして、区別しやすくすることができます。
2.データ部
コードは以下のように表示されます。
<script>
export default {
data() {
return {
chartDataColumn: {
},
optsColumn: {
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: 10,
activeBgColor: "#000000",
activeBgOpacity: 0.08
}
}
},
chartDataRing: {
},
optsRing: {
rotate: false,
rotateLock: false,
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: true,
borderWidth: 3,
borderColor: "#FFFFFF"
}
}
}
};
},
onReady() {
this.getServerData();
},
methods: {
getServerData() {
setTimeout(() => {
let resColumn = {
categories: ["1","2","3","4","5","6"],
series: [
{
name: "支出",
data: [35,36,31,33,13,34]
},
{
name: "收入",
data: [18,27,21,24,6,28]
}
]
};
let resRing = {
series: [
{
data: [{
"name":"一班","value":50},{
"name":"二班","value":30},{
"name":"三班","value":20},{
"name":"四班","value":18,"labelText":"四班:18人"},{
"name":"五班","value":8}]
}
]
};
this.chartDataColumn = JSON.parse(JSON.stringify(resColumn));
this.chartDataRing = JSON.parse(JSON.stringify(resRing));
}, 500);
},
}
};
</script>
この部分は、公式 Web サイトの 2 つのコンポーネントのデータとメソッドをつなぎ合わせます。注意すべきもう 1 つの問題は、2 つのコンポーネントのデータには異なる名前を付ける必要があることです。
要約する
以上が今日お話しする内容です。この記事では、uniapp の 1 ページに複数の uCharts チャートが含まれる小さなケースを簡単に紹介するだけです。この記事が皆さんのインスピレーションになれば幸いです。