<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跨平台图表库