Bemege
4 years ago
2 changed files with 217 additions and 1 deletions
@ -0,0 +1,211 @@ |
|||||
|
<template> |
||||
|
<div class="analysis"> |
||||
|
<div v-for="(item, index) in list" :key="index"> |
||||
|
<div class="content"> |
||||
|
<div class="title"> |
||||
|
<span style="font-size: 16px">Q：{{ item.label }}（{{ item.type }}）</span> |
||||
|
|
||||
|
<div> |
||||
|
<span>图表类型：</span> |
||||
|
<el-select v-model="item.chartType" placeholder="请选择"> |
||||
|
<el-option |
||||
|
v-for="item in options" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</div> |
||||
|
<line-chart |
||||
|
class="chart" |
||||
|
:chart-option="getCharData(item)" |
||||
|
:width="'90vw'" |
||||
|
/> |
||||
|
</div> |
||||
|
<el-divider /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import LineChart from '@/components/echarts/LineChart' |
||||
|
export default { |
||||
|
components: { |
||||
|
LineChart |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
barChartOptionData: { |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度 |
||||
|
color: 'black', |
||||
|
borderWidth: '1', |
||||
|
borderColor: 'rgb(156,209,255)', |
||||
|
textStyle: { |
||||
|
color: 'black' |
||||
|
}, |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
||||
|
axisTick: { |
||||
|
alignWithLabel: true |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value' |
||||
|
} |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '数量', |
||||
|
type: 'line', |
||||
|
barWidth: '40%', |
||||
|
data: [10, 52, 200, 334, 390, 330, 220] |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
list: [], |
||||
|
options: [ |
||||
|
{ |
||||
|
value: 'pie', |
||||
|
label: '饼图' |
||||
|
}, |
||||
|
/* { |
||||
|
value: "ring", |
||||
|
label: "环形图", |
||||
|
}, */ |
||||
|
{ |
||||
|
value: 'bar', |
||||
|
label: '柱状图' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'line', |
||||
|
label: '折线图' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getData() |
||||
|
}, |
||||
|
methods: { |
||||
|
getData() { |
||||
|
this.$api |
||||
|
.get('/user/project/report/analysis', { |
||||
|
params: { projectKey: this.$route.query.key } |
||||
|
}) |
||||
|
.then(res => { |
||||
|
this.list = res.data |
||||
|
}) |
||||
|
}, |
||||
|
getCharData(data) { |
||||
|
const config = { |
||||
|
tooltip: { |
||||
|
backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度 |
||||
|
color: 'black', |
||||
|
borderWidth: '1', |
||||
|
borderColor: 'rgb(156,209,255)', |
||||
|
textStyle: { |
||||
|
color: 'black' |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
axisTick: { |
||||
|
alignWithLabel: true |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value' |
||||
|
} |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '数量', |
||||
|
type: 'pie', |
||||
|
barWidth: '40%' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
if (['bar', 'line'].includes(data.chartType)) { |
||||
|
config.tooltip.axisPointer = { |
||||
|
type: 'line' |
||||
|
} |
||||
|
config.tooltip.trigger = 'axis' |
||||
|
config.xAxis[0].data = data.fieldName |
||||
|
config.series[0].data = data.data |
||||
|
config.series[0].type = data.chartType |
||||
|
} else { |
||||
|
// 环形图暂时不用 无法切换到饼图 |
||||
|
/* if ("ring" === data.chartType) { |
||||
|
config.series[0].radius = ["40%", "70%"]; |
||||
|
|
||||
|
config.series[0].emphasis = { |
||||
|
label: { |
||||
|
show: true, |
||||
|
fontSize: '25', |
||||
|
fontWeight: 'bold' |
||||
|
} |
||||
|
} |
||||
|
}else{ |
||||
|
delete config.series[0].radius |
||||
|
delete config.series[0].label |
||||
|
} */ |
||||
|
config.series[0].data = [] |
||||
|
Object.keys(data.map).forEach(key => { |
||||
|
config.series[0].data.push({ name: key, value: data.map[key] }) |
||||
|
}) |
||||
|
// config.series[0].data = data.map |
||||
|
} |
||||
|
return config |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.analysis { |
||||
|
width: 100%; |
||||
|
// padding: 20px; |
||||
|
.content { |
||||
|
padding: 20px; |
||||
|
width: 100%; |
||||
|
.title { |
||||
|
font-size: 14px; |
||||
|
padding: 0 30px; |
||||
|
height: 54px; |
||||
|
line-height: 54px; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
.select { |
||||
|
float: right; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue