战立标
2 years ago
22 changed files with 1637 additions and 577 deletions
@ -0,0 +1,169 @@ |
|||
<template> |
|||
<div class="charts"> |
|||
<el-select v-model="date" class="select" placeholder="请选择" popper-class="selectPopClass" @change="timeChange"> |
|||
<el-option v-for="item in dateList" :key="item.value" :label="item.label" :value="item.value"/> |
|||
</el-select> |
|||
<div id="DemandCharts2"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import * as echarts from "echarts"; |
|||
|
|||
export default { |
|||
name: "DemandCharts2", |
|||
props: { |
|||
data: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
dateList: [{ |
|||
label: '上月', |
|||
value: 1 |
|||
}, { |
|||
label: '近三个月', |
|||
value: 2 |
|||
}, { |
|||
label: '近半年', |
|||
value: 3 |
|||
}, { |
|||
label: '近一年', |
|||
value: 4 |
|||
}], |
|||
date: 4 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.initChart(); |
|||
}, |
|||
methods: { |
|||
timeChange() { |
|||
|
|||
}, |
|||
initChart() { |
|||
this.$http.post('/governance/commonDemand/countByCategory').then(({data:{data}}) => { |
|||
let div = document.getElementById('DemandCharts2'); |
|||
this.myChart = echarts.init(div); |
|||
var getname = data.map(item => item.categoryName); // 课程名 |
|||
var getNum = data.map(item => item.cateTotal); |
|||
var totals = eval(getNum.join('+')) |
|||
var data = []; |
|||
for (var i = 0; i < getname.length; i++) { |
|||
data.push({name: getname[i], value: getNum[i]}) |
|||
} |
|||
const color = ['#16A7EB', '#5974FF', '#04C790', '#FFAA01', '#FF6701', '#EF3B00'] |
|||
|
|||
var option = { |
|||
color, |
|||
tooltip: { |
|||
trigger: "item" |
|||
}, |
|||
legend: { |
|||
type: "plain", |
|||
orient: "vertical", |
|||
right: 0, |
|||
top: "center", |
|||
align: "left", |
|||
itemGap: 10, |
|||
itemWidth: 8, |
|||
itemHeight: 8, |
|||
symbolKeepAspect: false, |
|||
selectedMode: false, |
|||
formatter: function (name) { |
|||
for (var i = 0; i < getname.length; i++) { |
|||
if (name == data[i].name) { |
|||
name = name.length > 8?name.slice(0,7)+'...':name; |
|||
return '{name|' + name + '}{num|' + getNum[i] + '人}' |
|||
} |
|||
} |
|||
}, |
|||
textStyle: { |
|||
rich: { |
|||
name: { |
|||
fontSize: 12, |
|||
width: 96, |
|||
overflow: 'hidden', |
|||
textOverflow: 'ellipsis', |
|||
padding: [0, 29, 0, 5], |
|||
color: '#A3B9DA', |
|||
}, |
|||
num: { |
|||
fontSize: 12, |
|||
fontWeight: 500, |
|||
align: 'right', |
|||
color: '#FFFFFF', |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
series: [{ |
|||
name: '', |
|||
type: "pie", |
|||
radius: ["65%", "90%"], |
|||
center: ["20%", "50%"], |
|||
avoidLabelOverlap: false, |
|||
|
|||
label: { |
|||
show: true, |
|||
position: "center", |
|||
color: "rgba(13, 17, 29,0)", |
|||
formatter: `{primary|${totals}}\n{point|总数}`, |
|||
rich: { |
|||
primary: { |
|||
fontSize: 24, |
|||
color: '#7FCEFF', |
|||
align: 'center' |
|||
}, |
|||
point: { |
|||
fontSize: 12, |
|||
fontWeight: 400, |
|||
color: "#A3B9DA", |
|||
align: 'center' |
|||
} |
|||
} |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
data: data, |
|||
zlevel: 30 |
|||
}] |
|||
}; |
|||
this.myChart.setOption(option, true); |
|||
window.addEventListener("resize", () => this.myChart.resize()); |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/deep/ .el-input__inner { |
|||
width: 90px !important; |
|||
height: 24px !important; |
|||
color: #a0cdff; |
|||
border: 1px solid #125aaa !important; |
|||
border-radius: 12px !important; |
|||
background: #021c49 !important; |
|||
} |
|||
|
|||
/deep/ .el-input__icon { |
|||
line-height: 24px !important; |
|||
color: #a0cdff; |
|||
} |
|||
|
|||
.charts { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
#DemandCharts2 { |
|||
flex: calc(100% - 100px); |
|||
width: calc(100% - 100px); |
|||
height: 150px; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue