web-retail-h5/components/distribution/placementPerformance.vue

<template>
  <div class="width-auto">
	  <view class="title">
	  	{{$t('APP_ADD_20')}}
		<!-- 奖衔业绩分布 -->
	  </view>
   <div class="flex-s">
      <div
        id="main2"
        style="width: 690rpx;height: 600rpx;"
        :style="myChartStyle"
      ></div>
    </div>
  </div>
</template>

<script>

import * as echarts from "echarts";
import { azAchievement, getPerformance } from "@/config/distribute.js";
export default {
  name: "recommendTime",
  data() {
    return {
      texts: "",
      pieData: [
      
        {
          value: 0,
          age: 0,
          name: this.$t('S_C_18'),
          itemStyle: { color: "#EE5858" },
        },
        {
          value: 0,
          age: 0,
          name: this.$t('S_C_19'),
          itemStyle: { color: "#FBB046" },
        },
      ],
      myChartStyle: {
        float: "center",
        width: "690rpx",
        height: "750rpx",
        paddingTop: "0",
        // margin: "20px",
      }, //图表样式
    };
  },
  mounted() {
  
  },
  created() {
  	  this.getData();
  },
  methods: {
    getData() {
      azAchievement().then((res) => {
        this.pieData[1].value = res.data.rightAchieve;
        this.pieData[0].value = res.data.leftAchieve;
        this.pieData[1].age = res.data.rightPeopleNumber;
        this.pieData[0].age = res.data.leftPeopleNumber;
        setTimeout(() => {
          this.ageChart(res.data);
        }, 50);
      });
    },
    ageChart(datas) {
      var myChart = echarts.init(document.getElementById("main2"));
      let that =this
      var option = {
        legend: {
          // 图例
          // right: "0%",
          left: '33%',
          bottom: "0",
          color: "#999",
          // orient: "vertical",
        },
        series: [
          {
            type: "pie",
            label: {
              show: true,
              // formatter:'{b}:   {c}人\n 业绩:  {d}万',
              formatter: function (data) {
                return (
                  data.data.name +
                  ":" +
                  data.data.age +
                  that.$t('w_0337') +
                  "\n " +
                  that.$t('ENU_TOTAL_V_1') + ':' +
                  data.data.value +
                  that.$t('S_C_58')
                );
              },
           
            
			  normal: {
				  borderWidth:2,
				  formatter: function (data) {
				    return (
				      data.data.name +
				      ":" +
				      data.data.age +
				      that.$t('w_0337') +
				      "\n" +
					   "\n" +
             that.$t('ENU_TOTAL_V_1') + ':' +
				      data.data.value +
              that.$t('S_C_58')
				    );
				  },
          color: "#fff",
				  position:'inside' //默认自适应，水平布局为'top'，垂直布局为'right'，可选为 'inside'|'left'|'right'|'top'|'bottom'
			  }
            },
            radius: "70%", //饼图半径
            data: this.pieData,
			avoidLabelOverlap: false,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.width-auto{
  width: 100%;
	position: relative;
	height: 950rpx;
	background-color: #fff;
	  width: 690rpx;
	  
		border-radius: 20rpx;
		margin: 20rpx auto;
}
.title{
	padding: 20rpx 30rpx ;
	height: 80rpx;
	line-height: 80rpx;
	border-bottom: 10rpx solid #f3f3f3;
	margin-top: 10rpx;
}
::v-deep .el-select .el-input .el-select__caret {
  color: #333;
}
.lines {
  width: 2px;
  height: 470px;
  opacity: 1;
  background: #979797;
  position: absolute;
  bottom: 50px;
  left: 50%;
  margin-left: -110px;
}
.right-lines {
  position: absolute;
  right: 80px;
  top: 140px;
  color: #999;
  font-size: 12px;
}
.item-s {
  padding-bottom: 10px;
  display: flex;
  line-height: 24px;
}
.bg-color {
  width: 40px;
  height: 22px;
  border-radius: 2px;
  margin-left: 5px;
}
.flex-s {
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // width: 700px;
}
.styles {
  position: absolute;
  right: -30px;
  z-index: 111;
  top: 60px;
  /*background: rgba(0,0,0,0.05);*/
  /*border-radius: 4px 4px 4px 4px;*/
}
::v-deep .el-select .el-input__inner {
  border: none;
  background: rgba(0, 0, 0, 0.05);
}
</style>