使用echarts时遇到的问题

echarts因为数据差距较大导致y轴在高度不够的情况下显示不全

正常情况下

echarts因为数据差距较大导致y轴在高度不够的情况下显示不全

在添加grid之后显示正常，grid是echarts中用来配置组件离容器的距离

  grid: {
    left: '5%',
    right: '5%',
    top: '10%',
    bottom: '10%',
  }
  

多次调用同一个封装好的echarts图表只能显示一个

提示dom上已初始化了一个图表实例。

通过传入不同的变量id可以解决这个问题

// 父组件
<AnalEcharts domId="my-component" />
<AnalEcharts domId="main" />

// 封装的echarts子组件
div :id="domId" style="width: 235px; height: 48px"></div>

使用el-popover时echarts组件从隐藏状态切换到显示状态时，无法正确渲染

<el-popover @show="showPopo" trigger="hover" width="590" popper-class="itemPopover">
    <template #reference>
        <div>查看</div>
    </template>
    <template #default style="width: 590px;height: 242px;">
      <AccLarge />
    </template>
</el-popover>

无法获取DOM宽度或高度。请检查dom.clientWidth和dom.clientHeight。它们不应为0。例如，您可能需要在window.onload的回调函数中调用此函数。

原因是父元素或任何包含该 DOM 元素的祖先元素在初始化时是隐藏的（例如 display: none），那么子元素的尺寸也会是零。

可以通过在echarts的DOM元素上添加v-if来解决此问题

 <AccLarge v-if="isShowPop" />

页面刷新之后echarts组件接收不到数据

通过watch监听props变换可以解决

let props =  defineProps(['param'])
watch(props, (newVal, oldVal) => {
    console.log(newVal,oldVal,'watch');
});