YNUtdPlatform/pages/realName/index/components/pie-charts-model-man.vue

<template>
  <view class="charts-container">
    <qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" @getIndex="handleChartClick" />
  </view>
</template>

<script>
import { getHomePageListApi } from '@/api/phaseTwo/homePage'
export default {
  data() {
    return {
      chartData: {},
      opts: {
        color: ['#67cde6', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
        backgroundColor: '#67cde6',
        padding: undefined,
        title: {
          name: '',
          fontSize: 0,
          color: '#2fc25b'
        },
        subtitle: {
          name: '',
          fontSize: 0,
          color: '#666666'
        },
        extra: {
          arcbar: {
            type: 'default',
            width: 14,
            backgroundColor: '#E9E9E9',
            startAngle: 0.75,
            endAngle: 0.25,
            gap: 2,
            linearType: 'none'
          }
        }
      }
    }
  },
  mounted() {
    this.getServerData()
  },
  methods: {
    getServerData() {
      getHomePageListApi().then(res => {
        setTimeout(() => {
          const { workerMsgBean } = res.data

          const maleNum = workerMsgBean.maleNum
          const femaleNum = workerMsgBean.femaleNum
          const dataBoy = maleNum / (maleNum + femaleNum)
          let data = {
            series: [
              {
                name: '',
                color: '#67cde6',
                data: dataBoy
              }
            ]
          }
          this.chartData = JSON.parse(JSON.stringify(data))
        }, 500)
      })
    },
    handleChartClick(index) {
      //   const { currentIndex } = index // 获取当前点击的图表索引
      //   const chartsData = this.chartData.series[0].data
      //   const currenRows = chartsData[currentIndex]
      //   console.log('currenRows选中的工程类型', currenRows.name)
      //   // 电压等级信息
      //   const voltageLevel = {
      //     currentIndex,
      //     name: currenRows.name
      //   }
      //   uni.navigateTo({ url: `/pages/realName/index/pages/project?voltageLevel=${JSON.stringify(voltageLevel)}` })
    }
  }
}
</script>

<style scoped>
.charts-container {
  width: 100%;
  height: 100%;
}
</style>