Skip to content

X
x-training
提交 35b07d87 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

修改图表

上级 df174608
隐藏空白字符变更
内嵌 并排
正在显示 包含 74 行增加 和 158 行删除
src/pages/result/index.vue
浏览文件 @ 35b07d87
...@@ -120,7 +120,7 @@ export default { ...@@ -120,7 +120,7 @@ export default {
if (response.data.length < 7) { if (response.data.length < 7) {
response.data.map((item, index) => { response.data.map((item, index) => {
data1.push(item.score) data1.push(item.score)
data2.push(this.getNowTime(item.date_index, 1)) data2.push(this.getNowTime2(item.date_index))
}) })
setTimeout(() => { setTimeout(() => {
for (let i = 0; i < 7 - response.data.length; i++) { for (let i = 0; i < 7 - response.data.length; i++) {
...@@ -131,176 +131,86 @@ export default { ...@@ -131,176 +131,86 @@ export default {
} else { } else {
response.data.map((item, index) => { response.data.map((item, index) => {
data1.push(item.score) data1.push(item.score)
data2.push(this.getNowTime(item.date_index, 1)) data2.push(this.getNowTime(item.date_index))
}) })
} }
} }
if (data1.length === 1) { this.polar = {
this.polar = { grid: {
dataZoom: [{ x: 30,
type: 'inside', y: 20,
start: 0, x2: 0,
end: 50 y2: 30
}], },
grid: { itemStyle: {
x: 30, // color: 'linear-gradient(0deg, #00A2DB, #35D0E9)'
y: 20, color: {
type: 'linear',
x: 0,
y: 0,
x2: 0, x2: 0,
y2: 30 y2: 1,
colorStops: [{
offset: 1, color: '#00A2DB'
}, {
offset: 0, color: '#35D0E9'
}],
global: false // 缺省为 false
}
},
xAxis: {
type: 'category',
data: data2,
axisLabel: {
color: 'rgba(255,255,255,0.3)'
}, },
itemStyle: { axisLine: {
// color: 'linear-gradient(0deg, #00A2DB, #35D0E9)' show: false
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 1, color: '#00A2DB'
}, {
offset: 0, color: '#35D0E9'
}],
global: false // 缺省为 false
}
}, },
xAxis: { axisTick: {
type: 'category', show: false
data: data2,
axisLabel: {
color: 'rgba(255,255,255,0.3)'
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: ['#D4D4D8'],
opacity: 0.1
}
}
}, },
yAxis: { splitLine: {
// minInterval: 50, lineStyle: {
// interval: 50, color: ['#D4D4D8'],
splitNumber: 3, opacity: 0.1
type: 'value',
axisLabel: {
color: 'rgba(255,255,255,0.3)'
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: ['#D4D4D8'],
opacity: 0.1
}
} }
}
},
yAxis: {
// minInterval: 50,
// interval: 50,
splitNumber: 3,
type: 'value',
axisLabel: {
color: 'rgba(255,255,255,0.3)'
}, },
series: [{ axisLine: {
data: data1, show: false
type: 'line',
// symbol: 'none',
smooth: true,
itemStyle: {
normal: {
lineStyle: {
width: 3
}
}
}
}]
}
} else {
this.polar = {
dataZoom: [{
type: 'inside',
start: 0,
end: 50
}],
grid: {
x: 30,
y: 20,
x2: 0,
y2: 30
}, },
itemStyle: { axisTick: {
// color: 'linear-gradient(0deg, #00A2DB, #35D0E9)' show: false
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 1, color: '#00A2DB'
}, {
offset: 0, color: '#35D0E9'
}],
global: false // 缺省为 false
}
}, },
xAxis: { splitLine: {
type: 'category', lineStyle: {
data: data2, color: ['#D4D4D8'],
axisLabel: { opacity: 0.1
color: 'rgba(255,255,255,0.3)'
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: ['#D4D4D8'],
opacity: 0.1
}
} }
}, }
yAxis: { },
// minInterval: 50, series: [{
// interval: 50, data: data1,
splitNumber: 3, type: 'line',
type: 'value', symbol: 'none',
axisLabel: { smooth: true,
color: 'rgba(255,255,255,0.3)' itemStyle: {
}, normal: {
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: { lineStyle: {
color: ['#D4D4D8'], width: 3
opacity: 0.1
} }
} }
}, }
series: [{ }]
data: data1,
type: 'line',
symbol: 'none',
smooth: true,
itemStyle: {
normal: {
lineStyle: {
width: 3
}
}
}
}]
}
} }
this.$forceUpdate() this.$forceUpdate()
} }
...@@ -315,7 +225,7 @@ export default { ...@@ -315,7 +225,7 @@ export default {
let dateTemp let dateTemp
const flag = 1 const flag = 1
for (let i = 0; i < 7; i++) { for (let i = 0; i < 7; i++) {
dateTemp = (myDate.getMonth() + 1) + '-' + myDate.getDate() dateTemp = (this.toDo(myDate.getMonth() + 1)) + '-' + this.toDo(myDate.getDate())
dateArray.push(dateTemp) dateArray.push(dateTemp)
myDate.setDate(myDate.getDate() + flag) myDate.setDate(myDate.getDate() + flag)
} }
...@@ -326,7 +236,7 @@ export default { ...@@ -326,7 +236,7 @@ export default {
const myDate = new Date(start) const myDate = new Date(start)
myDate.setDate(myDate.getDate() - dayNum) myDate.setDate(myDate.getDate() - dayNum)
console.log(dayNum, '=123') console.log(dayNum, '=123')
return (myDate.getMonth() + 1) + '-' + myDate.getDate() return (this.toDo(myDate.getMonth() + 1)) + '-' + this.toDo(myDate.getDate())
}, },
getStyle(score) { getStyle(score) {
return `bottom: ${score.score / score.score_sum * 100}%` return `bottom: ${score.score / score.score_sum * 100}%`
...@@ -348,6 +258,12 @@ export default { ...@@ -348,6 +258,12 @@ export default {
: this.toDo(yy) + '-' + this.toDo(mm) + '-' + this.toDo(dd) + ' ' + this.toDo(hh) + ':' + this.toDo(mf) + ':' + this.toDo(ss) : this.toDo(yy) + '-' + this.toDo(mm) + '-' + this.toDo(dd) + ' ' + this.toDo(hh) + ':' + this.toDo(mf) + ':' + this.toDo(ss)
return dateTime return dateTime
}, },
getNowTime2(n) {
const date = new Date(n * 1000)
const mm = date.getMonth() + 1
const dd = date.getDate()
return this.toDo(mm) + '-' + this.toDo(dd)
},
toDo(n) { toDo(n) {
return n < 10 ? '0' + n : n return n < 10 ? '0' + n : n
}, },
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论