前言
uCharts包含了很多非常实用的图表组件，为开发图表页面的前端省事了不少。uniapp在单页面添加单图表的源码，官方文档都已经非常完备了，就不在这里过多赘述。本文集中解决一个页面包含多个uCharts图表组件的问题。
一、案例描述
示例：有app页面，需要包含柱状图和环形图。原型效果图如下：
二、源码解析
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要区分命名。如，柱状图可以拼接column拼接，环形图可以拼接Ring，方便区分。
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>
这部分也就是把官网这2个组件的数据和方法进行拼接。同样要注意的问题是，要对2个组件的数据进行区分命名。
总结
以上就是今天要讲的内容，本文仅仅简单介绍了uniapp单页面包含多个uCharts图表的一个小案例，希望对大家有所启发。