部门发布能力被调用趋势
This commit is contained in:
parent
ea6d5376da
commit
2339b13ec8
|
|
@ -123,3 +123,15 @@ export const getApplyByDept = (data, success, fail) => {
|
|||
fail && fail(err)
|
||||
})
|
||||
}
|
||||
// 部门发布能力被调用趋势
|
||||
export const getByDept = (data, success, fail) => {
|
||||
Request({
|
||||
methods: 'get',
|
||||
url: '/resource/getByDept',
|
||||
data
|
||||
}).then(res => {
|
||||
success && success(res)
|
||||
}).catch(err => {
|
||||
fail && fail(err)
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
import * as echarts from 'echarts'
|
||||
//折线图
|
||||
export const trendLineChart = (id, chartData, _option) => {
|
||||
|
||||
let { xaxis = [], ydata = [], } = chartData;
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
top: '16%',
|
||||
left: '7%',
|
||||
right: '7%',
|
||||
bottom: '10%',
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLine: { //坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(138,178,241)'
|
||||
},
|
||||
},
|
||||
axisLabel: { //坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: '#2b2b2b',
|
||||
margin: 15,
|
||||
fontSize: '14'
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
data: xaxis,
|
||||
}],
|
||||
yAxis: [{
|
||||
name: '使用量(万次)',
|
||||
nameTextStyle:{color:"#2b2b2b"},
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitNumber: 5,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.1)'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(138,178,241)'
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#2b2b2b',
|
||||
margin: 15,
|
||||
fontSize: '14'
|
||||
},
|
||||
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
}],
|
||||
series: [{
|
||||
name: '合格数据百分比',
|
||||
type: 'line',
|
||||
showAllSymbol: true,
|
||||
symbolSize: 0,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5, //设定实心点的大小
|
||||
lineStyle: {
|
||||
normal: {
|
||||
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
||||
offset: 0,
|
||||
color: '#0058e1'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#0058e1'
|
||||
}])
|
||||
},
|
||||
borderColor: '#f0f'
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#0058ee",
|
||||
}
|
||||
},
|
||||
// 区域填充样式
|
||||
areaStyle: {
|
||||
normal: {
|
||||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(0,88,225,0.16)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,88,225,0)'
|
||||
}
|
||||
], false),
|
||||
shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
|
||||
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
}
|
||||
},
|
||||
data: ydata
|
||||
}]
|
||||
};
|
||||
|
||||
if (_option !== undefined) {
|
||||
option = Object.assign({}, option, _option)
|
||||
}
|
||||
|
||||
const client = document.getElementById(id);
|
||||
let myChart = echarts.init(client);
|
||||
const clientWidth = client.clientWidth;
|
||||
const clientHeight = client.clientHeight;
|
||||
myChart.clear();
|
||||
myChart.resize({ width: clientWidth, height: clientHeight });
|
||||
myChart.setOption(option);
|
||||
}
|
||||
|
|
@ -1,18 +1,104 @@
|
|||
<template>
|
||||
<div class="trend">
|
||||
趋势
|
||||
<content-title title="部门发布能力被调用趋势">
|
||||
<div class="button">
|
||||
<div
|
||||
v-for="(item, idx) in titles"
|
||||
:key="item"
|
||||
@click="handleTitleSwitch(idx)"
|
||||
class="top-title"
|
||||
:class="{ active: idx == selectedTitle }"
|
||||
>{{ item }}</div>
|
||||
</div>
|
||||
</content-title>
|
||||
<div id="trendId" class="trend-echart"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { trendLineChart } from "./lineOption";
|
||||
import contentTitle from "./content-title";
|
||||
import * as Apis from "../api";
|
||||
export default {
|
||||
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
titles: ["近七日", "月度"],
|
||||
selectedTitle: 0,
|
||||
trendChartData:{}
|
||||
};
|
||||
},
|
||||
components: {
|
||||
contentTitle
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
methods: {
|
||||
//发布动态
|
||||
initChart() {
|
||||
let data = {
|
||||
limit: 10,
|
||||
page: 1
|
||||
};
|
||||
Apis.getByDept(
|
||||
data,
|
||||
res => {
|
||||
if (res.data.code !== 0) {
|
||||
return;
|
||||
}
|
||||
this.data = res.data.data.records || [];
|
||||
let xaxis=[],ydata=[]
|
||||
this.data.forEach(v=>{
|
||||
xaxis.push(v.createDate)
|
||||
ydata.push(v.visits)
|
||||
})
|
||||
this.trendChartData = {
|
||||
xaxis: xaxis,
|
||||
ydata: ydata
|
||||
};
|
||||
this.$nextTick(() => {
|
||||
trendLineChart("trendId", this.trendChartData);
|
||||
});
|
||||
},
|
||||
err => {
|
||||
console.log("err", err);
|
||||
}
|
||||
);
|
||||
},
|
||||
handleTitleSwitch(idx) {
|
||||
this.selectedTitle = idx;
|
||||
this.initChart();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.trend {
|
||||
width: 544px;
|
||||
height: 335px;
|
||||
background: pink;
|
||||
background: #fff;
|
||||
margin-right: 4px;
|
||||
padding: 0 20px 0 20px;
|
||||
.trend-echart {
|
||||
height: 280px;
|
||||
width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 110px;
|
||||
|
||||
.top-title {
|
||||
font-size: 16px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
&.active {
|
||||
color: #0058e1;
|
||||
font-weight: bold;
|
||||
border-bottom: 2px solid #0058e1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue