parkBigScreen2/src/components/companySummary/talent.vue

<!--
 描述: 人才队伍
 作者: Jack Chen
 日期: 2020-05-09
-->

<template>
  <div class="talent-container">
    <div class="chart" id="chart_left2"></div>
    <div class="dataText">
      <div class="item">
        <span class="p1 blue">{{ chartData.alipayPayAmount }}元</span>
        <span class="p1 blue">{{ GetPercent(chartData.alipayPayAmount, 0.1) }}%</span>
      </div>
      <div class="item">
        <span class="p1 green">{{ chartData.weixinPayAmount }}元</span>
        <span class="p1 green">{{ GetPercent(chartData.weixinPayAmount, 0.1) }}%</span>
      </div>
      <div class="item">
        <span class="p1 y">{{ chartData.casePayAmount }}元</span>
        <span class="p1 y">{{ GetPercent(chartData.casePayAmount, 0.1) }}%</span>
      </div>
      <div class="item">
        <span class="p1 r">{{ chartData.robotPayAmount }}元</span>
        <span class="p1 r">{{ GetPercent(chartData.robotPayAmount, 0.1) }}%</span>
      </div>
      <div class="item">
        <span class="p1 b">{{ chartData.unionPayAmount }}元</span>
        <span class="p1 b">{{ GetPercent(chartData.unionPayAmount, 0.1) }}%</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    chartData: {
      type: Object,
      required: true,
    },
  },
  name: "talent",
  data() {
    return {

    }
  },
  created() {

  },
  mounted() {
    setTimeout(() => {
      // console.log(this.chartData)
      this.getEchartLeft2();
    }, 500);

  },
  methods: {
    GetPercent(num, total) {
      num = parseFloat(num);
      total = parseFloat(total);
      if (isNaN(num) || isNaN(total)) {
        return "-";
      }
      return total <= 0 ? "0%" : (Math.round(num / total * 100) / 100.00);
    },
    getEchartLeft2() {
      let myChart = echarts.init(document.getElementById('chart_left2'));
      let scaleData = [{
        name: '支付宝支付',
        value: this.chartData.alipayPayAmount
      }, {
        name: '微信支付',
        value: this.chartData.weixinPayAmount
      }, {
        name: '现金支付',
        value: this.chartData.casePayAmount
      }, {
        name: '机器人支付',
        value: this.chartData.robotPayAmount
      },
      {
        name: '银联支付',
        value: this.chartData.unionPayAmount
      },
      ];
      let rich = {
        white: {
          color: '#ddd',
          align: 'center',
          padding: [3, 0]
        }
      };
      let placeHolderStyle = {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0
        }
      };
      let data = [];
      let legendData = [];
      for (let i = 0; i < scaleData.length; i++) {
        data.push({
          value: scaleData[i].value,
          name: scaleData[i].name,
          itemStyle: {
            normal: {
              borderWidth: 6,
            }
          }
        });
        legendData.push(scaleData[i].name);
      }
      // console.log(legendData)

      let option = {
        title: {
          text: `总金额： ${this.chartData ? this.chartData.totalAmount || 0 : 0}  元`,
          top: 20,
          left: 200,
          textStyle: {
            //文字颜色
            color: '#fff',
          }

        },
        legend: {
          right: 210,
          orient: 'vertical',
          top: 60,
          bottom: 20,
          data: legendData,
          icon: "circle",
          textStyle: {
            //文字颜色
            color: '#fff',
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            clockWise: false,
            radius: ['30%', '68%'],
            center: ['20%', '50%'],
            hoverAnimation: true,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'inside',
                  color: '#ffffff',
                  formatter: (params) => {
                    let percent = 0;
                    let total = 0;
                    for (let i = 0; i < scaleData.length; i++) {
                      total += scaleData[i].value;
                    }
                    percent = ((params.value / total) * 100).toFixed(0);
                    if (params.name !== '') {
                      // return params.name + '\n{white|' + '占比' + percent + '%}';
                      return percent + '%';
                    } else {
                      return '';
                    }
                  },
                  rich: rich
                },
                //         label: {
                //    //echarts饼图内部显示百分比设置
                //    show: true,
                //    position: "inside", //outside 外部显示  inside 内部显示
                //    formatter: `{d}%`,
                //    color: "#ffffff", //颜色
                //    fontSize: 12 //字体大小
                //  },
                labelLine: {
                  length: 10,
                  length2: 30,
                  show: true,
                  color: '#00ffff'
                }
              }
            },
            data: data
          },

        ]
      }

      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {

  }
};
</script>

<style lang="scss" scoped>
.p1:first-child {
  margin-right: .6rem;
}

.blue {
  color: #4786FF;
}

.green {
  color: #91CC75;
}

.y {
  color: #FAC858;
}

.r {
  color: #EE6666;
}

.b {
  color: #73C0DE;
}

.talent-container {
  position: relative;

  .chart {
    height: 3rem;
  }

  .dataText {
    position: absolute;
    right: 0.45rem;
    top: 0.75rem;

    .item {
      margin-bottom: .03rem;

      .p1 {
        font-size: .12rem;
      }
    }

  }

}
</style>