Compare commits
No commits in common. "5d1c2d51ee4d268723d04bb356aa70ac6170eb34" and "10c21d5eac2c92c214eb438f85b8fe10498fbd65" have entirely different histories.
5d1c2d51ee
...
10c21d5eac
|
@ -123,15 +123,3 @@ export const getApplyByDept = (data, success, fail) => {
|
||||||
fail && fail(err)
|
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)
|
|
||||||
})
|
|
||||||
}
|
|
|
@ -1,129 +0,0 @@
|
||||||
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,104 +1,18 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="trend">
|
<div class="trend">
|
||||||
<content-title title="部门发布能力被调用趋势">
|
趋势
|
||||||
<div class="button">
|
</div>
|
||||||
<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>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { trendLineChart } from "./lineOption";
|
|
||||||
import contentTitle from "./content-title";
|
|
||||||
import * as Apis from "../api";
|
|
||||||
export default {
|
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>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.trend {
|
.trend {
|
||||||
width: 544px;
|
width: 544px;
|
||||||
height: 335px;
|
height: 335px;
|
||||||
background: #fff;
|
background: pink;
|
||||||
margin-right: 4px;
|
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>
|
</style>
|
Loading…
Reference in New Issue