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

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

<script>
import * as echarts from "echarts";

import * as api from '@/config/activity.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",
      }, //
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      api.firstPv().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) {
      let that =this
      var myChart = echarts.init(document.getElementById("main1"));
      // var myChart = echarts.init(document.getElementById('main1'))
      var option = {
        legend: {
            // 图例
            // right: "0%",
            left: "33%",
            bottom: "0",
            color: "#999",
            // orient: "vertical",
          },
        series: [
          {
            type: 'pie',
            label: {
              show: true,
              formatter: function (data) {
                console.error(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')
                )
              },
              lineHeight: 20, // 行高
              color: '#fff',
              labelLine: {
                show: false,
              },
              position:'inside'
            },
            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>