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

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

<script>
import { getHomePageListApi } from '@/api/phaseTwo/homePage'
export default {
  data() {
    return {
      chartData: {},
      opts: {
        timing: 'easeOut',
        duration: 1000,
        rotate: false,
        rotateLock: false,
        color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
        padding: [5, 5, 5, 5],
        fontSize: 13,
        fontColor: '#666666',
        dataLabel: false,
        dataPointShape: true,
        dataPointShapeType: 'solid',
        touchMoveLimit: 60,
        enableScroll: false,
        enableMarkLine: false,
        legend: {
          show: true,
          position: 'bottom',
          lineHeight: 20,
          float: 'center',
          padding: 0,
          margin: 5,
          backgroundColor: 'rgba(0,0,0,0)',
          borderColor: 'rgba(0,0,0,0)',
          borderWidth: 0,
          fontSize: 12,
          fontColor: '#666666',
          hiddenColor: '#CECECE',
          itemGap: 10
        },
        title: {
          name: '总数量',
          fontSize: 15,
          color: '#666666',
          offsetX: 0,
          offsetY: 0
        },
        subtitle: {
          name: 0,
          fontSize: 25,
          color: '#7cb5ec',
          offsetX: 0,
          offsetY: 0
        },
        extra: {
          ring: {
            ringWidth: 15,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 10,
            border: true,
            borderWidth: 3,
            borderColor: '#FFFFFF',
            centerColor: '#FFFFFF',
            customRadius: 70,
            linearType: 'none'
          },
          tooltip: {
            showBox: true,
            showArrow: true,
            showCategory: false,
            borderWidth: 0,
            borderRadius: 0,
            borderColor: '#000000',
            borderOpacity: 0.7,
            bgColor: '#000000',
            bgOpacity: 0.7,
            gridType: 'solid',
            dashLength: 4,
            gridColor: '#CCCCCC',
            boxPadding: 3,
            fontSize: 13,
            lineHeight: 20,
            fontColor: '#FFFFFF',
            legendShow: true,
            legendShape: 'auto',
            splitLine: true,
            horizentalLine: false,
            xAxisLabel: false,
            yAxisLabel: false,
            labelBgColor: '#FFFFFF',
            labelBgOpacity: 0.7,
            labelFontColor: '#666666'
          }
        }
      }
    }
  },
  mounted() {
    this.getServerData()
  },
  methods: {
    getServerData() {
      getHomePageListApi().then(res => {
        const { pgNum, jgNum, gkNum, dhNum, qtNum } = res.data.workerMsgBean
        const amountNum = pgNum + jgNum + gkNum + dhNum + qtNum
        this.opts.subtitle.name = amountNum
        setTimeout(() => {
          let data = {
            series: [
              {
                data: [
                  {
                    name: '普工',
                    value: pgNum,
                    legendText: `普工  ${((pgNum / amountNum) * 100).toFixed(2)}%       ${pgNum}`
                  },
                  {
                    name: '技工',
                    value: jgNum,
                    legendText: `技工  ${((jgNum / amountNum) * 100).toFixed(2)}%       ${jgNum}`
                  },
                  {
                    name: '高空',
                    value: gkNum,
                    legendText: `高空  ${((gkNum / amountNum) * 100).toFixed(2)}%       ${gkNum}`
                  },
                  {
                    name: '电焊',
                    value: dhNum,
                    legendText: `电焊  ${((dhNum / amountNum) * 100).toFixed(2)}%       ${dhNum}`
                  },
                  {
                    name: '其他',
                    value: qtNum,
                    legendText: `其他  ${((qtNum / amountNum) * 100).toFixed(2)}%       ${qtNum}`
                  }
                ]
              }
            ]
          }
          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)
      uni.navigateTo({ url: `/pages/realName/index/pages/personList?xxx=${currenRows.name}` })
    }
  }
}
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-container {
  width: 100%;
  height: 100%;
}
</style>