qy_bigScreen/src/views/pageThree/module/yearCircle.vue

<template>
  <div style="height: calc(100% - 200px); display: flex; align-items: center; justify-content: flex-start;">
    <div id="modelType" style="width:400px; height: 230px" />
  </div>
</template>

<script>
export default {
  props: {
    yearAllNum: {
      type: Object,
      require: true,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
    }
  },
  watch: {
    'yearAllNum': {
      handler(val) {
        setTimeout(() => {
          this.initYearCircle()
        }, 100)
      },
      immediate: true,
      deep: true
    }
  },
  created() {
  },
  beforeDestroy() {
  },
  mounted() {
    this.initYearCircle()
  },
  methods: {
    initYearCircle() {
      const optionData = [
        { value: this.yearAllNum.headerLib || 0, name: '总馆' },
        { value: this.yearAllNum.branchLib || 0, name: '分馆' }
      ]
      const myChart = this.$echarts.init(document.getElementById('modelType'))

      function arrCount(arr) {
        let count = 0
        arr.forEach(item => {
          count = count + item.value
        })
        return count
      }
      var centerImg = require('@/assets/images/circle-bg.png')
      const option = {
        tooltip: {
          show: false,
          trigger: 'item',
          position: 'bottom',
          textStyle: {
            color: '#EEF6FF',
            fontSize: '18'
          }
          // backgroundColor: 'rgba(74, 144, 226, 0.84)',
          // formatter: (params) => {
          //   return `<div>${params.seriesName} <br> ${params.data.name}：${this.$parent.formatter(params.data.value)} (${params.percent}%)</div>`
          // }
        },
        legend: {
          orient: 'vertical',
          right: 70,
          top: 55,
          // textStyle: {
          //   color: '#EEF6FF',
          //   padding: [20, 0, 18, 4],
          //   fontSize: '14'
          // },
          itemWidth: 10,
          itemHeight: 10,
          icon: 'circle',
          selectedMode: false,
          data: ['总馆', '分馆'],
          formatter: (name) => {
            // `${name}  ${((flag.value / count).toFixed(2)) * 100 + '%'}`
            const count = arrCount(optionData)
            if (optionData) {
              const flag = optionData?.find(item => name === item.name)
              if (flag) return [`{name|${name}}`, `{num|${((flag.value / count).toFixed(2)) * 100 + '%'}}`]
            } else return name
          },
          textStyle: {
            rich: {
              name: {
                fontSize: 18,
                color: '#EEF6FF',
                fontFamily: 'DingTalk_JinBuTi_Regular',
                padding: [20, 0, 20, 4]
              },
              num: {
                fontSize: 20,
                fontWeight: 600,
                padding: [20, 0, 20, 15],
                color: '#4C90FF',
                fontFamily: 'DingTalk_JinBuTi_Regular'
              }
            }
          }
          // formatter: function(name) {
          //   let tarValue
          //   const count = arrCount(optionData)
          //   for (let i = 0; i < optionData.length; i++) {
          //     if (data[i].name === name) {
          //       tarValue = data[i].value
          //     }
          //   }

          //   return [`{name|${name}}`, `{num|${((tarValue / count).toFixed(2)) * 100 + '%'}}`].join('\n')
          // }
        },
        // 中心图片配置(关键代码)
        graphic: [
          {
            type: 'image',
            id: 'logo',
            left: '8.5%', // 调整图片位置
            top: '22%', // 调整图片位置
            z: -10,
            bounding: 'raw',
            rotation: 0, // 旋转
            origin: [64.5, 32.5], // 中心点
            scale: [1.0, 1.0], // 缩放
            // 设置图片样式
            style: {
              image: centerImg,
              width: 132,
              height: 131,
              opacity: 1
            }
          }
        ],
        series: [
          {
            name: '本年累计借阅',
            type: 'pie',
            left: '-50%',
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: true
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: 'rgba(16,16,21,0.4)'
            },
            emphasis: {
              label: {
                show: true,
                // 自定义文字显示，函数默认params接受当前指向所有属性
                formatter: function(params) {
                  const { value, name } = params
                  return [
                    `{c| ${value}}`,
                    `{b| ${name}}`
                  ].join('\n') // 换行
                },
                rich: {
                  c: {
                    fontSize: 24,
                    fontWeight: 600,
                    color: '#317FFF',
                    fontFamily: 'DingTalk_JinBuTi_Regular',
                    // color: {
                    //   type: 'linear',
                    //   x: 0,
                    //   y: 0,
                    //   x2: 0,
                    //   y2: 1,
                    //   colorStops: [
                    //     {
                    //       offset: 0,
                    //       color: 'red' // 0% 处的颜色
                    //     },
                    //     {
                    //       offset: 1,
                    //       color: 'yellow' // 100% 处的颜色
                    //     }
                    //   ],
                    //   globalCoord: false // 缺省为 false
                    // },
                    lineHeight: 34
                  },
                  b: {
                    fontSize: 18,
                    color: '#fff',
                    fontFamily: 'DingTalk_JinBuTi_Regular'
                  }
                }
              }
            },
            color: ['#317FFF', '#31DFFF'],
            data: optionData
          }
        ]
      }
      myChart.setOption(option)
      this.$LoopShowTooltip(myChart, option, { loopSeries: true, interval: 4000 })
    }
  }
}

</script>

<style lang="scss">
@import "~@/assets/styles/index.scss";
@import "~@/assets/styles/font-some.css";

</style>