ucharts 图表

图表"/>

ucharts 图表

<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-chartstype="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 = thislet 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跨平台图表库