$refs中设置style时style时undefind问题
由于vue特殊的生命周期机制,在vue的生命周期中 ,created不能够来拿到DOM元素,所以,this.$refs.xxx就不能取到,这个时候就需要在mounted中去设置style不能再created之前
vue 官网中ref 下有一段话 “关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs
也不是响应式的,因此你不应该试图用它在模板中做数据绑定。”
也就是说 ref 只有等页面加载完成好之后你才能调用 this. r e f s , 如 果 你 使 用 v − i f 、 v − f o r 渲 染 页 面 的 话 , 那 么 在 刚 开 始 页 面 没 没 渲 染 之 前 你 是 拿 不 到 t h i s . refs ,如果你使用v-if 、v-for渲染页面的话,那么在刚开始页面没没渲染之前你是拿不到this. refs,如果你使用v−if、v−for渲染页面的话,那么在刚开始页面没没渲染之前你是拿不到this.refs 的,所以要等到页面渲染之后拿才可以
解决办法:
1、如果你在mounted里获取this. r e f s , 因 为 d o m 还 未 完 全 加 载 , 所 以 你 是 拿 不 到 的 , u p d a t e 阶 段 则 是 完 成 了 数 据 更 新 到 D O M 的 阶 段 ( 对 加 载 回 来 的 数 据 进 行 处 理 ) , 此 时 , 就 可 以 使 用 t h i s . refs,因为dom还未完全加载,所以你是拿不到的, update阶段则是完成了数据更新到 DOM 的阶段(对加载回来的数据进行处理),此时,就可以使用this. refs,因为dom还未完全加载,所以你是拿不到的,update阶段则是完成了数据更新到DOM的阶段(对加载回来的数据进行处理),此时,就可以使用this.refs了
2、如果写在method中,那么可以使用 this.$nextTick(() => {}) 等页面渲染好再调用,这样就可以了
3、或者加个定时器延时加载this.$refs(这个方法还没有试)
而今天的问题是因为我把this.$refs写在了created中所以拿不到DOM
Echarts简单使用
安装cnpm install echarts --save
html页面引入
<script src="echarts.min.js"></script>
页面中引入
import echarts from "echarts";
mounted:{
var myChart = echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
var option = {
title: {
text: "堆叠区域图"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985"
}
}
},
legend: {
data: ["华东", "华南", "华北", "西部", "其他"]
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
y2:150
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
}
],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "邮件营销",
type: "line",
stack: "总量",
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: "联盟广告",
type: "line",
stack: "总量",
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: "视频广告",
type: "line",
stack: "总量",
areaStyle: {},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: "直接访问",
type: "line",
stack: "总量",
areaStyle: {},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: "搜索引擎",
type: "line",
stack: "总量",
label: {
normal: {
show: true,
position: "top"
}
},
areaStyle: {},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
//这个是为了获取数据后来进行数据的替换
let res = await getshuju();
console.log(res);
option.series = res.data.data.series;
option.xAxis = res.data.data.xAxis;
console.log(option.xAxis[0]);
option.xAxis[0].axisLabel = { interval: 0 };
// option.legend=res.data.data.legend
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}