vue+echarts封装组件

本人可能写的 不好，如有缺点希望指出，一起进步，所有组件类似写法。

/** 圆环图形 */
<template>
  <div
    class="annulusContainer"
    ref="annulusContainer"
    :optionsData="optionsData"
    :grid="grid"
  ></div>
</template>

<script>
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
  toRefs,
  watch,
  markRaw
} from 'vue';
export default defineComponent({
  name: 'annulus',
  props: {
    optionsData: Array,
    grid: {
      type: Object,
      default: () => ({
        left: '0',
        top: '0',
        right: '0',
        bottom: '0',
        containLabel: true
      })
    }
  },
  setup(props) {
    let { proxy } = getCurrentInstance();
    const annulusChartOptions = ref({
      backgroundColor: 'transparent',
      grid: props.grid,
      title: {
        show: true,
        text: '10%',
        x: 'center',
        y: 'center', // 通过x,y将标题(进度)定位在圆环中心
        textStyle: {
          fontSize: '20',
          color: 'white',
          fontWeight: '400',
          fontFamily: 'YouSheBiaoTiHei-Regular, YouSheBiaoTiHei',
          textShadowColor: 'rgba(255, 255, 255, 1)',
          textShadowBlur: '6',
          textShadowOffsetX: '1',
          textShadowOffsetY: '1'
        }
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['65%', '90%'],
          avoidLabelOverlap: false,
          hoverAnimation: false, //鼠标移入变大
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            {
              value: props.optionsData[0],
              name: '',
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(20, 106, 234, 0.800000011920929)' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(61, 173, 255, 1)' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            {
              value: props.optionsData[1],
              name: '',
              itemStyle: {
                color: 'rgba(20, 120, 231, 0.3)'
              }
            }
          ]
        },
        {
          name: '外边框',
          type: 'pie',
          hoverAnimation: false, //鼠标移入变大
          center: ['50%', '50%'],
          radius: ['60%', '60%'],
          label: {
            normal: {
              show: false
            }
          },
          data: [
            {
              value: props.optionsData[0],
              name: '',
              itemStyle: {
                normal: {
                  borderWidth: 1,
                  borderColor: 'rgba(20, 120, 231, 1)'
                }
              }
            },
            {
              value: props.optionsData[1],
              name: '',
              itemStyle: {
                normal: {
                  color: 'transparent'
                }
              }
            }
          ]
        }
      ]
    });
    const annulusContainer = ref(null); // 放echarts实例
    const annulusChart = ref(null);
    // 等容器dom挂载完才能去实例化echarts
    onMounted(() => {
      annulusChart.value = proxy.$echarts.init(annulusContainer.value, 'dark');
      annulusChart.value.setOption(annulusChartOptions.value);
    });
    window.addEventListener('resize', () => {
      annulusChart.value.setOption(annulusChartOptions.value);
    });
    // 监听echarts配置，有变化就更新实例
    watch(
      () => props.optionsData,
      () => {
        annulusChartOptions.value.series[0].data[0].value = props.optionsData[0];
        annulusChartOptions.value.series[0].data[1].value = props.optionsData[1];
        annulusChartOptions.value.series[1].data[0].value = props.optionsData[0];
        annulusChartOptions.value.series[1].data[1].value = props.optionsData[1];
        annulusChart.value.setOption(annulusChartOptions.value);
      },
      { deep: true }
    );
    return {
      annulusContainer
    };
  }
});
</script>
<style lang="scss" scoped>
.annulusContainer {
  width: 100%;
  height: 100%;
}
</style>