Vue引入echarts图表不显示问题解决总结
起因就是学弟在使用Vue+vite引入echart无法显示,具体代码如下:
看起来确实没有什么问题,所以我怀疑是他引入的问题,于是我让他重新引入,结果还是没有解决。然后我就自己去试了试。
最后这段代码成功了。
<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
onMounted(() => {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 绘制图表
myChart.setOption({
title: {
text: "ECharts 入门示例",
},
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
});
});
</script>
<template>
<div
id="main"
style="width: 400px; height: 400px"
></div>
</template>
然后就开始深究这段代码成功的原因,原来是生命周期的问题,默认echarts的那种写法会发生在mounted这里,此时页面渲染已经完成了,而这段代码将操作写在了OnMounted这样就会可以在页面渲染成功前就准备好数据,其实总结下来,所有与页面有关的数据我们多一个写在OnMounted。