|
@@ -0,0 +1,435 @@
|
|
|
+<template>
|
|
|
+ <div style="height: 100%;">
|
|
|
+ <Echart :options="options" id="bottomLeftChart" ref="myEcharts" height="100%" width="100%"></Echart>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <script>
|
|
|
+ import Echart from '@/common/echart'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ options: {},
|
|
|
+ myEcharts:'',
|
|
|
+ trendData: {
|
|
|
+ rooms: [],
|
|
|
+ teachs: [],
|
|
|
+ students: [],
|
|
|
+ classinfo: [],
|
|
|
+ classtimes: [],
|
|
|
+ classstudenttimes:[],
|
|
|
+ xdatas:[],
|
|
|
+ },
|
|
|
+ transferJson:{}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ Echart,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ cdata: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({})
|
|
|
+ },
|
|
|
+ basics:{
|
|
|
+ type: Object,
|
|
|
+ default: () => ({})
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 获取课例趋势图数据
|
|
|
+ // let trendJson = this.$store.state.dashboard.researchDashboard.trend
|
|
|
+ let trendJson=[
|
|
|
+ // {name:1,value:[43,5,3,7]},
|
|
|
+ // {name:2,value:[15,0,2,5]},
|
|
|
+ // {name:3,value:[77,15,30,48]},
|
|
|
+ // {name:4,value:[62,15,21,45]},
|
|
|
+ // {name:5,value:[33,11,13,27]},
|
|
|
+ // {name:6,value:[105,35,43,87]},
|
|
|
+ // {name:7,value:[80,30,33,57]},
|
|
|
+ // {name:8,value:[70,25,23,62]},
|
|
|
+ // {name:9,value:[23,5,13,27]},
|
|
|
+ // {name:10,value:[66,18,23,47]},
|
|
|
+ // {name:11,value:[55,15,13,37]},
|
|
|
+ // {name:12,value:[43,5,3,7]},
|
|
|
+ // {name:13,value:[43,5,3,7]},
|
|
|
+ // {name:14,value:[43,5,3,7]},
|
|
|
+ // {name:15,value:[43,5,3,7]},
|
|
|
+ // {name:16,value:[43,5,3,7]},
|
|
|
+ ]
|
|
|
+ // trendJson=this.transferJson
|
|
|
+ // if (trendJson) {
|
|
|
+ // trendJson.forEach(i => {
|
|
|
+ // this.trendData.xData.push(`${this.$t('lessonRecord.echarts.weekUtil')}${i.name}${this.$t('lessonRecord.echarts.week')}`)
|
|
|
+ // this.trendData.line1.push(i.value[0])
|
|
|
+ // this.trendData.line2.push(i.value[1])
|
|
|
+ // this.trendData.line3.push(i.value[2])
|
|
|
+ // this.trendData.line4.push(i.value[3])
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.myEcharts=this.$refs.myEcharts
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ let trendJson={}
|
|
|
+ trendJson=this.transferJson
|
|
|
+ console.log(trendJson,'数据进入')
|
|
|
+ // if (trendJson) {
|
|
|
+ // trendJson.forEach(i => {
|
|
|
+ // this.trendData.xData.push(`${this.$t('lessonRecord.echarts.weekUtil')}${i.name}${this.$t('lessonRecord.echarts.week')}`)
|
|
|
+ // this.trendData.line1.push(i.value[0])
|
|
|
+ // this.trendData.line2.push(i.value[1])
|
|
|
+ // this.trendData.line3.push(i.value[2])
|
|
|
+ // this.trendData.line4.push(i.value[3])
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ let weekNum=trendJson.weekNums
|
|
|
+ for(let i=1;i<=weekNum;i++){
|
|
|
+ this.trendData.xdatas.push(`${this.$t('lessonRecord.echarts.weekUtil')}${i}${this.$t('lessonRecord.echarts.week')}`)
|
|
|
+ }
|
|
|
+ this.trendData.rooms=trendJson.rooms
|
|
|
+ this.trendData.teachs=trendJson.teachs
|
|
|
+ this.trendData.students=trendJson.students
|
|
|
+ this.trendData.classinfo=trendJson.classInfo
|
|
|
+ this.trendData.classtimes=trendJson.classTimes
|
|
|
+ this.trendData.classstudenttimes=trendJson.classstudenttimes
|
|
|
+
|
|
|
+ this.options.xAxis[0].data=this.trendData.xdatas
|
|
|
+ this.options.series[0].data=trendJson.rooms
|
|
|
+ this.options.series[1].data=trendJson.teachs
|
|
|
+ this.options.series[2].data=trendJson.students
|
|
|
+ this.options.series[3].data=trendJson.classInfo
|
|
|
+ this.options.series[4].data=trendJson.classTimes
|
|
|
+ this.options.series[5].data=trendJson.classStudenttimes
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ basic: {
|
|
|
+ handler(newData) {
|
|
|
+ console.log(newData,'传输特殊的值2')
|
|
|
+ this.options = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff"
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ width: '88%',
|
|
|
+ left:'5%',
|
|
|
+ right:'15%',
|
|
|
+ bottom:'13%',
|
|
|
+ borderWidth: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ x: 'center',
|
|
|
+ textStyle: {
|
|
|
+ color: '#90979c',
|
|
|
+ },
|
|
|
+ data: ['教室数','教师数','学生参与人数','课堂总数','课堂总时数','学生参与总时数']
|
|
|
+ },
|
|
|
+ calculable: true,
|
|
|
+ xAxis: [{
|
|
|
+ type: "category",
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(204,187,225,0.5)",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ data:this.trendData.xdatas,
|
|
|
+ }],
|
|
|
+
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: '次量',
|
|
|
+ minInterval: 1,
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#cecece',
|
|
|
+ padding: [0, 0, 0, -40],
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(204,187,225,0.5)",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(204,187,225,0.5)",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: '时间',
|
|
|
+ minInterval: 1,
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#cecece',
|
|
|
+ padding: [0, 0, 0, -40],
|
|
|
+ },
|
|
|
+ splitLine: {show: false},
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#B4B4B4',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(204,187,225,0.5)",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ formatter: "{value}Min", //右侧Y轴文字显示
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(204,187,225,0.5)",
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ dataZoom: [{
|
|
|
+ show: true,
|
|
|
+ height: 10,
|
|
|
+ xAxisIndex: [0],
|
|
|
+ bottom: 20,
|
|
|
+ handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
|
|
+ handleSize: '110%',
|
|
|
+ handleStyle: {
|
|
|
+ color: "#0090ff",
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(204,187,225,0.5)",
|
|
|
+ },
|
|
|
+ fillerColor: "rgba(67,55,160,0.4)",
|
|
|
+ borderColor: "rgba(204,187,225,0.5)",
|
|
|
+
|
|
|
+ }, {
|
|
|
+ type: "inside",
|
|
|
+ show: true,
|
|
|
+ height: 15,
|
|
|
+ start: 1,
|
|
|
+ end: 35
|
|
|
+ }],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name:'教室数',
|
|
|
+ type:'bar',
|
|
|
+ barWidth: 10,
|
|
|
+ symbol: 'circle',
|
|
|
+ itemStyle: {
|
|
|
+ color: "#4693EC",
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: "#00FFE3"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#4693EC"
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data:this.trendData.rooms
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'教师数',
|
|
|
+ type:'bar',
|
|
|
+ barWidth: 10,
|
|
|
+ symbol: 'circle',
|
|
|
+ // stack: '教师数',
|
|
|
+ itemStyle: {
|
|
|
+ color: "#8EC5FC",
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: "#E0C3FC"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#8EC5FC"
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data:this.transferJson.rooms
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'学生参与人数',
|
|
|
+ type:'bar',
|
|
|
+ // stack: '参与人数',
|
|
|
+ barWidth: 10,
|
|
|
+ symbol: 'circle',
|
|
|
+ itemStyle: {
|
|
|
+ color: "#85FFBD",
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: "#FFFB7D"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#85FFBD"
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data:this.transferJson.students
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'课堂总数',
|
|
|
+ type:'bar',
|
|
|
+ // stack: '参与人数',
|
|
|
+ barWidth: 10,
|
|
|
+ symbol: 'circle',
|
|
|
+ itemStyle: {
|
|
|
+ color: "#FA709A",
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: "#FEE140"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#FA709A"
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data:this.transferJson.class
|
|
|
+ },
|
|
|
+ { //作品数量
|
|
|
+ name: '课堂总时数',
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ // smooth: true, //是否平滑曲线显示
|
|
|
+ // symbol:'circle', // 默认是空心圆(中间是白色的),改成实心圆
|
|
|
+ showAllSymbol: true,
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 5,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "rgb(40,255,179,.5)", // 线条颜色
|
|
|
+ },
|
|
|
+ borderColor: '#f0f'
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ textStyle: {
|
|
|
+ color: 'rgb(40,255,179,.9)',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "rgb(40,255,179,.5)",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ areaStyle: { //区域填充样式
|
|
|
+ normal: {
|
|
|
+ //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgb(40,255,179,.5)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(0,0,0, 0)'
|
|
|
+ }
|
|
|
+ ], false),
|
|
|
+ shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
|
|
|
+ shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data:this.transferJson.classtimes
|
|
|
+ },
|
|
|
+ { //作品数量
|
|
|
+ name: '学生参与总时数',
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ // smooth: true, //是否平滑曲线显示
|
|
|
+ // symbol:'circle', // 默认是空心圆(中间是白色的),改成实心圆
|
|
|
+ showAllSymbol: true,
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 5,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#058cff", // 线条颜色
|
|
|
+ },
|
|
|
+ borderColor: '#f0f'
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ textStyle: {
|
|
|
+ color: "#058cff",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color:"#058cff",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ areaStyle: { //区域填充样式
|
|
|
+ normal: {
|
|
|
+ //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgb(40,255,179,.5)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(0,0,0, 0)'
|
|
|
+ }
|
|
|
+ ], false),
|
|
|
+ shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
|
|
|
+ shadowBlur: 10 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data:this.transferJson.classstudenttimes
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ deep: true
|
|
|
+ },
|
|
|
+ basics:{
|
|
|
+ handler(newData) {
|
|
|
+ console.log(newData,'触发')
|
|
|
+ console.log(this.options)
|
|
|
+ newData.weekNums !==0 ? (this.transferJson=newData,this.init()):''
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ deep: true
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|