java
复制代码
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme 柱状图
import resize from './mixins/resize'
import { insertUserList } from "@/api/system/user";
const animationDuration = 6000
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null,
sevenDays: [],
newUsers:[],
date:[]
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
this.getSevenDays();
//this.getList();
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
//近七天
getSevenDays() {
const today = new Date();
const sevenDays = [];
for (let i = 0; i < 7; i++) {
const date = new Date(today);
date.setDate(today.getDate() - i);
sevenDays.push(date.toISOString().split('T')[0]);
}
this.sevenDays = sevenDays;
},
//获取新增用户值
//getList() {
// },
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
insertUserList().then(response => {
let insertUserList = response.data;
for (let i = 0; i < insertUserList.length; i++) {
this.newUsers.push(insertUserList[i].newUsers);
this.date.push(insertUserList[i].date);
}
console.log("insertUserList:"+this.newUsers);
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: this.date,
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value',
axisTick: {
show: false,
}
}],
series: [{
color: "#c23616",
name: '新增用户',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: this.newUsers,
animationDuration
},
// {
// color: "#c23616",
// name: '活跃用户',
// type: 'bar',
// stack: 'vistors',
// barWidth: '60%',
// data: [80, 52, 200, 334, 390, 330, 220],
// animationDuration
// }
]
})
});
}
}
}
</script>
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme 折线图
import resize from './mixins/resize'
import { pagingUserExam, isPassed, listUserExam, getUserExam, delUserExam, addUserExam, updateUserExam } from "@/api/exam/userExam";
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '350px'
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object,
required: true
}
},
data() {
return {
chart: null,
sevenDays: [],
passedCount: [],
failedCount: [],
updateTime: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 100,
deptId: undefined
},
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
this.getSevenDays();
//this.getList();
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
//近七天
getSevenDays() {
const today = new Date();
const sevenDays = [];
for (let i = 0; i < 7; i++) {
const date = new Date(today);
date.setDate(today.getDate() - i);
sevenDays.push(date.toISOString().split('T')[0]);
}
this.sevenDays = sevenDays;
},
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(this.chartData)
},
setOptions({ } = {}) {
isPassed().then(response => {
let projectList = response.data;
for (let i = 0; i < projectList.length; i++) {
this.passedCount.push(projectList[i].passedCount);
this.failedCount.push(projectList[i].failedCount);
this.updateTime.push(projectList[i].date);
}
console.log("updateTime");
console.log(this.updateTime);
this.chart.setOption({
xAxis: {
data: this.updateTime,
boundaryGap: false,
axisTick: {
show: false
}
},
grid: {
left: 10,
right: 10,
bottom: 20,
top: 30,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: {
axisTick: {
show: false
}
},
legend: {
data: ['通过人数', '不通过人数']
},
series: [{
name: '通过人数', itemStyle: {
normal: {
color: '#FF005A',
lineStyle: {
color: '#FF005A',
width: 2
}
}
},
smooth: false,
type: 'line',
data: this.passedCount,
animationDuration: 2800,
animationEasing: 'cubicInOut'
},
{
name: '不通过人数',
smooth: false,
type: 'line',
itemStyle: {
normal: {
color: '#3888fa',
lineStyle: {
color: '#3888fa',
width: 2
},
areaStyle: {
color: '#f3f8ff'
}
}
},
data: this.failedCount,
animationDuration: 2800,
animationEasing: 'quadraticOut'
}]
})
});
}
}
}
</script>
