【已解决】ECharts 没有在页面生效

1. 元素高度问题：

   • ECharts 需要一个具有明确高度的容器来渲染图表，也就是说 echartsRef 元素需要一个明确的 div 高度。我项目中的问题就是在 .base-echarts（我项目中的最外层元素） 上设置了高度为 300px，但没有为 .echarts（echartsRef 元素自身） 设置高度。因此需要给 .echarts 也设置一个明确的高度。

2. 异步数据加载：

   • 如果数据是异步加载的（例如通过 API 请求），那么在 onMounted 中初始化图表时，数据可能还没有准备好。可以使用 watchEffect 或其他方式确保数据加载完成后再次更新图表。

3. 模板引用未正确获取：

   • 确保 useTemplateRef 正确获取到了 DOM 元素。可以使用生命周期钩子 onMounted ，将 echarts 实例的创建写在 onMounted 中 ，确保 echartsRef 已经挂载并正确创建 echarts 实例，也可以添加一个简单的 console.log(echartsRef.value) 来检查是否获取到了正确的 DOM 元素。

4. 样式冲突或布局问题：

   • 检查是否有其他样式或布局影响了 .echarts 的显示。确保该元素没有被隐藏或覆盖。

修改建议

<script setup lang="ts">
import * as echarts from "echarts";
import { useTemplateRef, onMounted, watchEffect } from "vue";const echartsRef = useTemplateRef<HTMLElement>("echartsRef");onMounted(() => {const echartsInstance = echarts.init(echartsRef.value!, "light");const options = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};echartsInstance.setOption(options);
});
</script><template><div class="base-echarts"><div class="echarts" ref="echartsRef"></div></div>
</template><style scoped>
.base-echarts {height: 300px;
}
.echarts {width: 100%;height: 100%; /* 确保 .echarts 也有明确的高度 */
}
</style>

进一步调试

• 在 onMounted 中添加 console.log(echartsRef.value) 来确认是否正确获取到 DOM 元素。
• 使用浏览器开发者工具检查 .echarts 元素的实际尺寸和样式，确保它有足够的空间来显示图表。