<template>
<view>
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="content">出库统计图</block>
</cu-custom>
<view>
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#3a82f8"></uni-segmented-control>
</view>
<view class="charts-box">
<qiun-data-charts
type="pie"
:opts="opts"
:chartData="chartData"
/>
<qiun-data-charts
type="mount"
:opts="opt"
:chartData="chartData"
/>
</view>
</view>
</template>
<script>
import { forEach } from '../../common/luch-request/utils';
export default {
data() {
return {
items: ['日', '月', '年'],
current: 0,
chartData: {},
//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
opts: {
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [15,5,5,5],
enableScroll: false,
legend: {
show:true,
lineHeight:20
},
extra: {
pie: {
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: 0,
labelWidth: 15,
border: true,
borderWidth: 3,
borderColor: "#FFFFFF"
}
}
},
opt: {
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [15,10,0,5],
enableScroll: false,
legend: {
show:false,
},
xAxis: {
disableGrid: true,
rotateLabel:true,
rotateAngle:"45",
},
yAxis: {
data: [
{
min: 0
}
]
},
extra: {
mount: {
type: "bar",
widthRatio: 0.3,
borderWidth: 0,
barBorderRadius: [
50,
50,
50,
50
],
linearType: "custom"
}
}
}
};
},
mounted() {
var today = new Date();
var yesterday = new Date(today.getTime());
this.getServerData(yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate(),'0')
},
methods: {
async getServerData(item,type) {
let that = this
let params = {
item: item,
type: type
}
await that.$http.get('/totalView/totalView/PieChuKu',{params: params}).then(res => {
// 计算总值
const totalValue = res.data.result.reduce((acc, item) => acc + item.value, 0);
// 计算占比并更新数组
if(totalValue==0){
res.data.result.forEach(item => {
item.labelText = '0%';
});
}
else{
res.data.result.forEach(item => {
const percentage = (item.value / totalValue) * 100;
item.labelText = percentage.toFixed(2)+"%";
});
}
let ress = {
series: [
{
data:res.data.result
}
]
};
this.chartData = JSON.parse(JSON.stringify(ress));
}).catch(err => {
that.$tip.alert("网络波动，请重试！")
console.log("err")
})
},
onClickItem(e) {
if (this.current != e.currentIndex) {
this.current = e.currentIndex;
if(this.current=="0"){
var today = new Date();
var yesterday = new Date(today.getTime());
this.getServerData(yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate(),'0')
}
if(this.current=="1"){
var today = new Date();
var yesterday = new Date(today.getTime());
this.getServerData(yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate(),'1');
}
if(this.current=="2"){
var today = new Date();
var yesterday = new Date(today.getTime());
this.getServerData(yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate(),'2');
}
}
}
}
};
</script>
<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
width: 100%;
height: 230px;
}
</style>
地址：演示 - uCharts跨平台图表库
