web-store-retail-h5/components/distribution/realPerformance.vue

<template>
   <div class="width-auto">
   	  <view class="title">
		{{'真实业绩分布'}}
   	  </view>
        <div class="flex-s">
            <div id="main22" style="width: 690rpx;height: 600rpx;"  :style="myChartStyle"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import { realPerformancePic } from "@/config/distribute.js";
export default {
    name: "recommendTime",
    data(){
        return{
            texts:'',
            pieData: [
            {
                    value: 0,
                    age: 0,
                    name: '左区',
                    itemStyle: {color:'#EE5858'},
                },
                {
                    value: 0,
                    age: 0,
                    name: '右区',
                    itemStyle: {color:'#FBB046'},
                },
               
            ],
            myChartStyle: {
                float: "center",
				   width: "690rpx",
				   height: "750rpx",
                paddingTop: "0",
                // margin: "20px",
            }, //图表样式
        }
    },
   created() {
   	this.getData()
   },
    methods:{
        getData() {
            realPerformancePic().then((res)=>{
                this.pieData[1].value = res.data.rightAchievement
                this.pieData[0].value = res.data.leftAchievement
                this.pieData[1].age = res.data.rightNumber
                this.pieData[0].age = res.data.leftNumber
                setTimeout(()=>{
                    this.ageChart(res.data);
                },50)
            })
        },
        ageChart(datas) {
          let that =this
            var myChart = echarts.init(document.getElementById('main22'));
            var option = {
              legend: {
          // 图例
          // right: "0%",
          left: '33%',
          bottom: '0',
          color: '#999',
          // orient: "vertical",
        },
                series: [
                    {
                        type: "pie",
                        label: {
                            show: true,
                            lineHeight:16,// 行高
                           
                           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: that.pieData
                    },
                ]
            }
            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>