Article directory
Preface
uCharts contains many very practical chart components, which saves a lot of trouble in developing the front-end of chart pages. The official documentation for uniapp to add a single chart to a single page is very complete, so I won’t go into details here. This article focuses on solving the problem of a page containing multiple uCharts chart components.
1. Case description
Example: There is an app page that needs to contain a bar chart and a donut chart. The prototype renderings are as follows:
2. Source code analysis
1.Introduce column chart and donut chart components into the template
code show as below:
<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>
Note that the opts and chartDate used by the two chart components must be named differently. For example, a bar chart can be spliced with columns, and a donut chart can be spliced with Rings to facilitate differentiation.
2.Data part
code show as below:
<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>
This part is to splice the data and methods of the two components of the official website. Another issue to note is that the data of the two components must be named differently.
Summarize
The above is what I will talk about today. This article only briefly introduces a small case where a single page of uniapp contains multiple uCharts charts. I hope it can inspire everyone.