blackteay/vue-element-admin
1
0
Fork 0
mirror of https://github.com/PanJiaChen/vue-element-admin.git synced 2026-01-09 00:28:27 +08:00
Code Issues Releases Wiki Activity

git commit -m "♻️ refactor: Extração de método - correção de método muito longo"

Browse Source
This commit is contained in:
EST2 LAB3 MS PFN 2025-11-25 21:04:05 -04:00
parent 6858a9ad67
commit 2c1fec4d3e
2 changed files with 97 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/components/Charts/Keyboard.vue
View File

@ -5,6 +5,7 @@
<script> <script>
import echarts from 'echarts' import echarts from 'echarts'
import resize from './mixins/resize' import resize from './mixins/resize'
import { generateChartData, getChartOptions } from '@/utils/chartHelpers'
export default { export default {
mixins: [resize], mixins: [resize],
@ -44,111 +45,9 @@ export default {
methods: { methods: {
initChart() { initChart() {
this.chart = echarts.init(document.getElementById(this.id)) this.chart = echarts.init(document.getElementById(this.id))
const { xAxisData, data, data2 } = generateChartData()
const xAxisData = [] const options = getChartOptions(xAxisData, data, data2)
const data = [] this.chart.setOption(options)
const data2 = []
for (let i = 0; i < 50; i++) {
xAxisData.push(i)
data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
}
this.chart.setOption({
backgroundColor: '#08263a',
grid: {
left: '5%',
right: '5%'
},
xAxis: [{
show: false,
data: xAxisData
}, {
show: false,
data: xAxisData
}],
visualMap: {
show: false,
min: 0,
max: 50,
dimension: 0,
inRange: {
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
}
},
yAxis: {
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#4a657a'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#08263f'
}
},
axisTick: {
show: false
}
},
series: [{
name: 'back',
type: 'bar',
data: data2,
z: 1,
itemStyle: {
normal: {
opacity: 0.4,
barBorderRadius: 5,
shadowBlur: 3,
shadowColor: '#111'
}
}
}, {
name: 'Simulate Shadow',
type: 'line',
data,
z: 2,
showSymbol: false,
animationDelay: 0,
animationEasing: 'linear',
animationDuration: 1200,
lineStyle: {
normal: {
color: 'transparent'
}
},
areaStyle: {
normal: {
color: '#08263a',
shadowBlur: 50,
shadowColor: '#000'
}
}
}, {
name: 'front',
type: 'bar',
data,
xAxisIndex: 1,
z: 3,
itemStyle: {
normal: {
barBorderRadius: 5
}
}
}],
animationEasing: 'elasticOut',
animationEasingUpdate: 'elasticOut',
animationDelay(idx) {
return idx * 20
},
animationDelayUpdate(idx) {
return idx * 20
}
})
} }
} }
} }

93
src/utils/chartHelpers.js Normal file
View File

@ -0,0 +1,93 @@
export function generateChartData() {
const xAxisData = []
const data = []
const data2 = []
for (let i = 0; i < 50; i++) {
xAxisData.push(i)
data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
}
return { xAxisData, data, data2 }
}
export function getChartOptions(xAxisData, data, data2) {
return {
backgroundColor: '#08263a',
grid: {
left: '5%',
right: '5%'
},
xAxis: [
{ show: false, data: xAxisData },
{ show: false, data: xAxisData }
],
visualMap: {
show: false,
min: 0,
max: 50,
dimension: 0,
inRange: {
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
}
},
yAxis: {
axisLine: { show: false },
axisLabel: { textStyle: { color: '#4a657a' }},
splitLine: {
show: true,
lineStyle: { color: '#08263f' }
},
axisTick: { show: false }
},
series: [
{
name: 'back',
type: 'bar',
data: data2,
z: 1,
itemStyle: {
normal: {
opacity: 0.4,
barBorderRadius: 5,
shadowBlur: 3,
shadowColor: '#111'
}
}
},
{
name: 'Simulate Shadow',
type: 'line',
data,
z: 2,
showSymbol: false,
animationDelay: 0,
animationEasing: 'linear',
animationDuration: 1200,
lineStyle: { normal: { color: 'transparent' }},
areaStyle: {
normal: {
color: '#08263a',
shadowBlur: 50,
shadowColor: '#000'
}
}
},
{
name: 'front',
type: 'bar',
data,
xAxisIndex: 1,
z: 3,
itemStyle: { normal: { barBorderRadius: 5 }}
}
],
animationEasing: 'elasticOut',
animationEasingUpdate: 'elasticOut',
animationDelay(idx) {
return idx * 20
},
animationDelayUpdate(idx) {
return idx * 20
}
}
}