vue3 echarts使用

<template>
  <div id="app-container-radr">
    <div
      ref="chartRef"
      class="radar"
      :style="{ height:height + 'px'}"
    ></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
const { proxy } = getCurrentInstance();

const chartRef = ref(null);
let chart = ref(null);
const width = ref(300);
const height = ref(200);

const data = reactive({
  option :{
  xAxis: {
    type: 'category',
    data: ['极限温度', '极限湿度', '极限压力', '极限蒸汽']
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {},
  series: [
    {
      data: [4, 3, 2, 1],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba( 228, 57, 97, 0.2)'
      }
    }
  ]
}
});

const { option } = toRefs(data);
const props = defineProps({
  optionsData: {
    type: Object,
    default: undefined,
  },
}); 

function getInit() {
  const screenWidth = window.innerWidth; 
  if (screenWidth <= 1360) { 
    height.value = 280;
  } else if (screenWidth > 1360) { 
    height.value = 280;
  } else { 
    height.value = 280; // 默认宽度
  }
  // console.log('数据',option.value);
  // console.log( '盒子',chartRef.value)
  chart.value = echarts.getInstanceByDom(chartRef.value) || echarts.init(chartRef.value);
  // 渲染图表
  chart.value.setOption(option.value);  
  window.addEventListener("resize", () => chart.value.resize());
}

onMounted(() => {
  getInit();
});

onUpdated(() => {
  getInit();
});

watchEffect(() => { 
  // console.log(props.optionsData);
});
</script>

<style lang="scss" scoped>
.radar {
  // width: 300px;
  height: 280px;
}
</style>