qy_bigScreen/src/components/echart/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 = {
        baseOption: {
          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
            }
          ]
        },
        media: [
          {
            query: {
              maxWidth: 317
            },
            option: {
              legend: {
                right: 30,
                top: 'center',
                textStyle: {
                  rich: {
                    name: {
                      fontSize: 14
                    },
                    num: {
                      fontSize: 16
                    }
                  }
                }
              },
              // 中心图片配置(关键代码)
              graphic: [
                {
                  left: '8%', // 调整图片位置
                  top: '26%', // 调整图片位置
                  z: -10,
                  bounding: 'raw',
                  rotation: 0, // 旋转
                  origin: [64.5, 32.5], // 中心点
                  scale: [1.0, 1.0], // 缩放
                  // 设置图片样式
                  style: {
                    image: centerImg,
                    width: 110,
                    height: 110,
                    opacity: 1
                  }
                }
              ],
              series: [
                {
                  type: 'pie',
                  radius: ['50%', '55%'],
                  emphasis: {
                    label: {
                      rich: {
                        c: {
                          fontSize: 22,
                          lineHeight: 28
                        },
                        b: {
                          fontSize: 16
                        }
                      }
                    }
                  }
                }
              ]
            }
          }
        ]
      }
      myChart.setOption(option)
      this.$LoopShowTooltip(myChart, option.baseOption, { loopSeries: true, interval: 4000 })
    }
  }
}

</script>

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

</style>