javascript - vue切换标签页无法在第二个上显示相同的EChart表单（已修复）
问题描述
data () {
return {
mocktab1: mocktab1.monthData,
mocktab2: mocktab2.monthData,
yearTable: mock.DataFactor.yearTable,
nowdata:"",
nowdata1:"",
nowdataA:"",
nowdata1A:"",
startTime:"",
endTime:"",
dataArr:[],
dis1:false,
dis2:false,
}
initAlpha(next){
Indicator.open("Loading ")
this.$axios({
method:"GET",
//Get first substation id
url:"/api/app/DataAnalysis/getSubstation",
}).then((res)=>{
this.$axios({
method:"GET",
url:"/api/app/index/getSubstation"
}).then((res)=>{
console.log(res,"now")
})
// if(!next){
// this.firstId = res.data[0].substation.looplist[0].id
// }
this.$axios({
method:"GET",
url:"/api/app/EnergyAnalysis/intoLineRecordyear?intolineId=" + this.firstId + "&appStartTime=" + this.startTime
}).then((res)=>{
console.log(res)
let data = res.data
this.dataArr = res.data
let arr = []
data.forEach((item)=>{
arr.push(item.pf)
})
if(arr.length == 0){
this.dis1 = true
}else{
this.dis1 = false
setTimeout(()=>{
let eCharts = echarts.init(document.getElementById('enEchar'));
eCharts.clear()
eCharts.setOption(this.optionsthree(arr))
},0)
}
Indicator.close()
})
}).catch((err)=>{
toast("error")
Indicator.close()
})
},
openPicker() {
this.$refs.picker.open();
},
handleConfirm(value){
let mytime = changeTime(value)
this.startTime = mytime.slice(0,4)
this.nowdata = mytime.slice(0,4)
this.nowdata1 = mytime.slice(0,4)
this.endTime = this.nowdata + "-12-31 " + "23:59:59"
this.initThree("next")
console.log(this.startTime)
console.log(this.endTime)
console.log(this.firstId)
},
// energy-echars
optionsthree(data){
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
legend: {
icon: 'circle',
itemWidth: 8,
itemHeight: 8,
itemGap: 13,
data: ['Data1', 'Data2'],
right: '2%',
textStyle: {
fontSize: 12,
color: '#fff',
},
top:'2%'
},
grid: {
left: '12%',
top: '20%',
right: '1%',
bottom: '18%',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Jan',"Feb", 'Mar',"Apr",'May',"Jun",'Jul',"Aug",'Sep',"Oct",'Nov',"Dec"],
axisLine: {
lineStyle: {
color: '#68707A',
width: 1,
type: 'solid'
},
},
axisTick: {
show: false
},
axisLabel: {
color: 'rgba(255,255,255,0.7)'
}
},
yAxis: {
type: 'value',
max:0.95,
nameTextStyle: {
color: '#ffffff',
align: 'left',
padding: [0, 13, 0, 0]
},
splitLine: {
lineStyle: {
color: '#68707A'
}
},
axisLine: {
lineStyle: {
color: '#68707A',
width: 1,
type: 'solid'
},
},
axisTick: {
show: false
},
axisLabel: {
interval: 0 ,
color: 'rgba(255,255,255,0.7)'
}
},
series: [{
name: 'Data',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 2
},
},
itemStyle: {
normal: {
color: '#00BEDB',
}
},
data: data
},{
name: 'Contents',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#00BEDB',
}
},
data: ["0.95","0.95","0.95"]
}]
};
return option
},
initBravo(next){
Indicator.open("Loading ")
this.$axios({
method:"GET",
//Get first substation id
url:"/api/app/DataAnalysis/getSubstation",
}).then((res)=>{
this.$axios({
method:"GET",
url:"/api/app/index/getSubstation"
}).then((res)=>{
console.log(res,"now")
})
// if(!next){
// this.firstId = res.data[0].substation.looplist[0].id
// }
this.$axios({
method:"GET",
url:"/api/app/EnergyAnalysis/intoLineRecordyear?intolineId=" + this.firstId + "&appStartTime=" + this.startTime
}).then((res)=>{
console.log(res)
let data = res.data
this.dataArr = res.data
let arr = []
data.forEach((item)=>{
arr.push(item.pf)
})
if(arr.length == 0){
this.dis2 = true
}else{
this.dis2 = false
setTimeout(()=>{
let eCharts = echarts.init(document.getElementById('enEchar'));
eCharts.clear()
eCharts.setOption(this.optionsthree(arr))
},0)
}
Indicator.close()
})
}).catch((err)=>{
toast("error")
Indicator.close()
})
},
openPicker() {
this.$refs.picker.open();
},
handleConfirm(value){
let mytime = changeTime(value)
this.startTime = mytime.slice(0,4)
this.nowdataA = mytime.slice(0,4)
this.nowdata1A = mytime.slice(0,4)
this.endTime = this.nowdata + "-12-31 " + "23:59:59"
this.initThree("next")
console.log(this.startTime)
console.log(this.endTime)
console.log(this.firstId)
},
// energy-echars
optionsthree(data){
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
legend: {
icon: 'circle',
itemWidth: 8,
itemHeight: 8,
itemGap: 13,
data: ['Data1', 'Data2'],
right: '2%',
textStyle: {
fontSize: 12,
color: '#fff',
},
top:'2%'
},
grid: {
left: '12%',
top: '20%',
right: '1%',
bottom: '18%',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Jan',"Feb", 'Mar',"Apr",'May',"Jun",'Jul',"Aug",'Sep',"Oct",'Nov',"Dec"],
axisLine: {
lineStyle: {
color: '#68707A',
width: 1,
type: 'solid'
},
},
axisTick: {
show: false
},
axisLabel: {
color: 'rgba(255,255,255,0.7)'
}
},
yAxis: {
type: 'value',
max:0.95,
nameTextStyle: {
color: '#ffffff',
align: 'left',
padding: [0, 13, 0, 0]
},
splitLine: {
lineStyle: {
color: '#68707A'
}
},
axisLine: {
lineStyle: {
color: '#68707A',
width: 1,
type: 'solid'
},
},
axisTick: {
show: false
},
axisLabel: {
interval: 0 ,
color: 'rgba(255,255,255,0.7)'
}
},
series: [{
name: 'Data',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 2
},
},
itemStyle: {
normal: {
color: '#00BEDB',
}
},
data: data
},{
name: 'Contents',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#00BEDB',
}
},
data: ["0.95","0.95","0.95"]
}]
};
return option
},抱歉，上周六我只发了界面截图。这里我添加了我的完整的Vue脚本，问题仍然和上一个一样。由于第二页正确显示了带有数据和 X 轴和 Y 轴的 EChart，但是当我将相同的代码复制到第三页时，EChart 不会显示任何内容。为了使脚本简短，我删除了第一页和第三页的代码，以及挂载的 head{} 和方法{}。第三页的脚本和第二页一样，只是把startInitLoad(next)改成了initThree(next)。感谢昨天回复我之前帖子的所有人。
<div id="Tab1">
<div class="enHeadText">Form1</div>
<div class="enCardBox">
<div class="enCardHead">
<div class="enSelectYear" @click="openPicker">{{nowdata1}}year<div class="enSelectBtn"></div></div>
</div>
<div class="enEchars">
<div v-if="dis1">
<p class="nodata" >No Data</p>
<img class="noimg" src="../../../../static/img/noDate@2x.png">
</div>
<div id="enEchar" v-else></div>
</div>
</div>
<div class="entab">
<div class="head">
<div>Data1</div>
<div>Data2</div>
<div>Data3</div>
<div>Data4</div>
</div>
<div class="scroll">
<div class="entable">
<div class="content" v-for="(item,index) in dataArr">
<div>{{item.createTime.slice(0,7)}}</div>
<div>{{item.p}}</div>
<div>{{item.q}}</div>
<div>{{item.pf}}</div>
</div>
</div>
</div>
</div>
<mt-datetime-picker
ref="picker"
type="date"
v-model="nowdata"
year-format="{value} year"
@confirm="handleConfirm"
:visible-item-count="5"
>
</mt-datetime-picker>
</div>
<div id="Tab2">
<div class="enHeadText">Form1</div>
<div class="enCardBox">
<div class="enCardHead">
<div class="enSelectYear" @click="openPicker">{{nowdata1}}year<div class="enSelectBtn"></div></div>
</div>
<div class="enEchars">
<div v-if="dis2">
<p class="nodata" >No Data</p>
<img class="noimg" src="../../../../static/img/noDate@2x.png">
</div>
<div id="enEchar" v-else></div>
</div>
</div>
<div class="entab">
<div class="head">
<div>Data1</div>
<div>Data2</div>
<div>Data3</div>
<div>Data4</div>
</div>
<div class="scroll">
<div class="entable">
<div class="content" v-for="(item,index) in dataArr">
<div>{{item.createTime.slice(0,7)}}</div>
<div>{{item.p}}</div>
<div>{{item.q}}</div>
<div>{{item.pf}}</div>
</div>
</div>
</div>
</div>
<mt-datetime-picker
ref="picker"
type="date"
v-model="nowdata"
year-format="{value} year"
@confirm="handleConfirm"
:visible-item-count="5"
>
</mt-datetime-picker>
</div>解决方案
推荐阅读
- pandas - 根据其他列的 NaN 状态对多列求和
- html - 是否可以在 CSS 内容属性中使用带有 url() 的 HTML 属性中的数据？
- java - Optaplanner 供应已损坏，因为 sourceVariable 的实体无法收回：从未为该值插入实体
- azure - 根据条件限制 Azure 认知搜索结果
- sql - 我想要选择不同的数字作为使用日期时间升序的列
- prestashop - Prestashop 配置无库存产品属性
- arkit - 我试图给modelEntity一个physicsBodyComponet，它只是掉进了深处
- javascript - 通过 Json 响应流以查找匹配：.find 不是函数
- php - Codeigniter：返回带有页眉和页脚的视图
- java - 加载 swagger UI 时对所有服务的 Spring 安全调用