<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 = 6000export 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>