记录一个使用echars图表过程中的小问题
这是我第一次使用的步骤
1.引入echars依赖:终端输入如下命令
cnpm i install echarts --save
2.使用的vue页面中导入echars
import * as echarts from “echarts”;
3.创建Dom展示图表
<div >
<div id="echarRef" style="height: 300px;width: 400px;border: 1px solid #ebebeb;border-radius: 2px;"></div>
</div>
4.获取Dom,初始化图表并使用setOption()方法设置图表数据
onMounted(async () => {
//根据id获取dom元素
let myChart = echarts.init(document.getElementById("echarRef"));
myChart.setOption({
title: { text: "用户" },
tooltip: {},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
},
yAxis: {},
series: [
{
name: "用户量",
type: "line",
data: [5, 20, 36, 10, 10, 20],
},
],
});
window.onresize = function () {//自适应大小
myChart.resize();
};
})
运行之后,发现报错如下:
原因是因为:Dom没有完成加载时,echarts.init() 就已经开始执行了,获取不到Dom,无法进行操作
解决方法如下:
第一种:给echarts.init()设置定时器,延迟此操作,代码调整如下
onMounted(async () => {
setTimeout(() => {aa()}, 1000)
})
const aa = () => {
let myChart = echarts.init(document.getElementById("echarRef"));
myChart.setOption({
title: { text: "CPU使用率" },
tooltip: {},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
},
yAxis: {},
series: [
{
name: "用户量",
type: "line",
data: [5, 20, 36, 10, 10, 20],
},
],
});
window.onresize = function () {//自适应大小
myChart.resize();
};
}