echarts 在扇形终点加小球 根据容器变化而变化

<template>
  <div class="demoFour">
    <vue-echarts
      ref="circle"
      :options="AXIS_OPTION"
      :autoresize="true"
    ></vue-echarts>
  </div>
</template>

<script>
  export default {
    name: 'DemoTwo',
    data () {
      const AXIS_OPTION = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        series: [
          {
            // 圆的半径
            radius: ['45%', '50%'],
            // 圆心
            center: ['50%', '50%'],
            type: 'pie',
            startAngle: 220,
            cursor: 'default',
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 13, // 显示
                itemStyle: {
                  color: 'rgb(22,55,106)',
                },
              },
              {
                value: 5, // 隐藏
                itemStyle: {
                  color: 'rgba(65,105,225,0)',
                },
              },
            ],
          },
          {
            // 圆的半径
            radius: ['45%', '50%'],
            // 圆心
            center: ['50%', '50%'],
            type: 'pie',
            cursor: 'default',
            hoverAnimation: false,
            startAngle: 220,
            markPoint: {
              symbol: 'circle',
              symbolSize: 12,
              cursor: 'default',
              itemStyle: {
                normal: {
                  color: '#449AFF',
                  shadowBlur: 5,
                  shadowColor: '#fff',
                },
                emphasis: { color: '#449AFF' },
              },
              data: [ //小球坐标
                {
                  name: '耗时',
                  x: '',
                  y: '',
                },
              ],
            },
            /* 标签*/
            label: {
              /* 数值*/
              normal: {
                show: false,
                position: 'inside',
              },
            },
            data: [
              {
                value: 7,
                itemStyle: {
                  normal: { color: '#449AFF' },
                  emphasis: { color: '#449AFF' },
                },

              },
              {
                value: 9,
                itemStyle: {
                  color: 'rgba(65,105,225,0)',
                },
              },
            ],
          },
        ],
      }
      return {
        AXIS_OPTION,
        CIRCLE_PROPORTION: 260, // 圆显示占比
        circleData: 0.6, // 数据百分比

      }
    },
    mounted () {
      this.handleData(this.circleData)
    },
    methods: {
      handleData (dataProportion) {
        // 获取容器宽高
        const width = this.$refs.circle.$el.clientWidth
        const height = this.$refs.circle.$el.clientHeight

        // 设置显示比例
        const proportion = this.CIRCLE_PROPORTION * dataProportion
        const shadowProportion = 360 - proportion
        this.AXIS_OPTION.series[1].data[0].value = proportion
        this.AXIS_OPTION.series[1].data[1].value = shadowProportion

        // 获取扇形半径
        const circleR = (parseInt(this.AXIS_OPTION.series[0].radius[1]) - parseInt(this.AXIS_OPTION.series[0].radius[0])) / 2
        const r = this.handleHeightWidth(width, height) * (parseInt(this.AXIS_OPTION.series[0].radius[0]) + circleR) / 200

        // 计算点半径
        const spotR = this.handleSpotR(width, height)
        this.AXIS_OPTION.series[1].markPoint.symbolSize = spotR

        const deleteShadowC = (r * Math.PI * 2) * (3 / 4) // 去掉阴影后的周长
        const arcLength = deleteShadowC * dataProportion - (deleteShadowC / 2) // 弧长
        const arcAngle = arcLength * 360 / (2 * Math.PI * r) // 角度
        const x = Math.sin(arcAngle * Math.PI / 180) * r // x坐标长度
        const y = Math.cos(arcAngle * Math.PI / 180) * r // y坐标长度
        const xProportion = x / width * 100 // x百分比
        const yProportion = y / height * 100 // y百分比
        this.AXIS_OPTION.series[1].markPoint.data[0].x = 50 + xProportion + '%'
        this.AXIS_OPTION.series[1].markPoint.data[0].y = 50 - yProportion + '%'
      },
      // 处理点的大小
      handleSpotR (width, height) {
        var R
        if (width > height) {
          R = -((height * parseInt(this.AXIS_OPTION.series[0].radius[1]) -
            height * parseInt(this.AXIS_OPTION.series[0].radius[0])) /
            100 /
            2)
        } else if (width < height) {
          R = -((width * parseInt(this.AXIS_OPTION.series[0].radius[1]) -
            width * parseInt(this.AXIS_OPTION.series[0].radius[0])) /
            100 /
            2)
        } else {
          R = (width * parseInt(this.AXIS_OPTION.series[0].radius[1]) -
            height * parseInt(this.AXIS_OPTION.series[0].radius[0])) /
            100 /
            2
        }
        return R
      },
      // 处理半径
      handleHeightWidth (width, height) {
        if (width > height) {
          return height
        } else {
          return width
        }
      },
    },
  }
</script>

<style scoped>
  .demoFour {
    width: 500px;
    height: 500px;
    border: 1px solid red;
  }
</style>