7 changed files with 266 additions and 238 deletions
@ -1,113 +1,144 @@ |
|||
<template> |
|||
<div id="barEcharts" style="width:380px;height:350px"></div> |
|||
<div id="barEcharts" style="width: 380px; height: 350px"></div> |
|||
</template> |
|||
<script setup> |
|||
import{onMounted} from 'vue'; |
|||
import { onMounted } from 'vue'; |
|||
import { timeFinancialChart } from 'apis/projectFinance'; |
|||
|
|||
onMounted(()=>{ |
|||
const myChart = echarts.init(document.getElementById('barEcharts')); |
|||
const option = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow', |
|||
}, |
|||
}, |
|||
legend: { |
|||
top:10, |
|||
right:0, |
|||
icon: 'circle', |
|||
orient: 'horizontal', |
|||
itemGap: 10, |
|||
itemWidth: 10, |
|||
itemHeight: 14, |
|||
textStyle: { |
|||
fontSize: 14, |
|||
color: '#858585', |
|||
fontWeight: 400, |
|||
}, |
|||
const projectId = useProjectId(); |
|||
|
|||
}, |
|||
data: ['任务一', '任务二', '任务三', '任务四'], |
|||
color: ['#7E84A3', '#FF914C', '#5189F8', '#3FC7BB'], |
|||
grid: { |
|||
left: '10%', |
|||
right: '0', |
|||
bottom: '5%', |
|||
containLabel: false, |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: '#F3F4F5', |
|||
}, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '任务四', |
|||
const data = reactive({ |
|||
timeList: [], |
|||
taskNameList: [], |
|||
}); |
|||
|
|||
async function getChartData() { |
|||
try { |
|||
const params = { param: { projectId: projectId.value } }; |
|||
const res = await timeFinancialChart(params); |
|||
console.log('res:', res); |
|||
return processing(res); |
|||
} catch (error) { |
|||
console.error(error); |
|||
} |
|||
} |
|||
|
|||
function processing(list) { |
|||
let timeList = [ |
|||
null, |
|||
null, |
|||
null, |
|||
null, |
|||
null, |
|||
null, |
|||
null, |
|||
null, |
|||
null, |
|||
null, |
|||
null, |
|||
null, |
|||
]; |
|||
for (let i = 0; i < list.length; i++) { |
|||
for (let j = 0; j < list[i].data.length; j++) { |
|||
const m = list[i].data[j].time - 0; |
|||
timeList[m - 1] = m + '月'; |
|||
} |
|||
} |
|||
for (let i = 0; i < timeList.length; i++) { |
|||
if (!timeList[i]) { |
|||
timeList.splice(i, 1); |
|||
i -= 1; |
|||
} |
|||
} |
|||
let series = []; |
|||
let taskNameList = []; |
|||
for (let i = 0; i < list.length; i++) { |
|||
let data = []; |
|||
taskNameList.push(list[i].name); |
|||
for (let k = 0; k < timeList.length; k++) { |
|||
data.push(null); |
|||
} |
|||
for (let k = 0; k < list[i].data.length; k++) { |
|||
for (let m = 0; m < timeList.length; m++) { |
|||
if (list[i].data[k].time - 0 + '月' === timeList[m]) { |
|||
data[m] = list[i].data[k].expend - 0; |
|||
} |
|||
} |
|||
} |
|||
let obj = { |
|||
name: list[i].name, |
|||
type: 'bar', |
|||
stack: 'total', |
|||
label: { |
|||
show: false, |
|||
color: '#FFFFFF', |
|||
}, |
|||
itemStyle: { |
|||
borderRadius: [0, 0, 0, 0], |
|||
}, |
|||
barWidth: 12, |
|||
data: [320, 80, 301, 334, 390, 330, 320, 390, 330, 320, 390, 390], |
|||
data: data, |
|||
}; |
|||
series.push(obj); |
|||
} |
|||
data.timeList = timeList; |
|||
data.taskNameList = taskNameList; |
|||
console.log('series: ', series); |
|||
return series; |
|||
} |
|||
|
|||
onMounted(async () => { |
|||
const myChart = echarts.init(document.getElementById('barEcharts')); |
|||
const series = await getChartData(); |
|||
const option = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow', |
|||
}, |
|||
}, |
|||
{ |
|||
name: '任务三', |
|||
type: 'bar', |
|||
stack: 'total', |
|||
label: { |
|||
show: false, |
|||
color: '#FFFFFF', |
|||
legend: { |
|||
top: 10, |
|||
right: 0, |
|||
icon: 'circle', |
|||
orient: 'horizontal', |
|||
itemGap: 10, |
|||
itemWidth: 10, |
|||
itemHeight: 14, |
|||
textStyle: { |
|||
fontSize: 14, |
|||
color: '#858585', |
|||
fontWeight: 400, |
|||
}, |
|||
data: [120, 132, 101, 134, 90, 230, 210, 302, 301, 334, 390, 330], |
|||
}, |
|||
{ |
|||
name: '任务二', |
|||
type: 'bar', |
|||
stack: 'total', |
|||
label: { |
|||
data: data.taskNameList, |
|||
color: ['#7E84A3', '#FF914C', '#5189F8', '#3FC7BB'], |
|||
grid: { |
|||
left: '15%', |
|||
right: '0', |
|||
bottom: '5%', |
|||
containLabel: false, |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: data.timeList, |
|||
axisTick: { |
|||
show: false, |
|||
color: '#FFFFFF', |
|||
}, |
|||
data: [18, 66, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330], |
|||
}, |
|||
{ |
|||
name: '任务一', |
|||
type: 'bar', |
|||
stack: 'total', |
|||
label: { |
|||
axisLabel: { |
|||
show: true, |
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
color: '#FFFFFF', |
|||
}, |
|||
itemStyle: { |
|||
borderRadius: [0, 0, 0, 0], |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: '#F3F4F5', |
|||
}, |
|||
}, |
|||
data: [150, 212, 201, 154, 190, 330, 410, 182, 191, 234, 290, 330], |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
series: series, |
|||
}; |
|||
myChart.setOption(option); |
|||
}) |
|||
}); |
|||
</script> |
|||
|
|||
Loading…
Reference in new issue