|
|
|
|
@ -109,7 +109,7 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="middle"> |
|
|
|
|
<div class="item" |
|
|
|
|
style="height: 620px"> |
|
|
|
|
style="height: 500px"> |
|
|
|
|
<!--左上边框--> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
<i class="t_l_line"></i> |
|
|
|
|
@ -142,53 +142,26 @@ |
|
|
|
|
您的浏览器不支持 video 标签。 |
|
|
|
|
</video> |
|
|
|
|
<div class="stat-mask"></div> |
|
|
|
|
<div class="stat-wrap"> |
|
|
|
|
<p class="num num1">{{ overview.numberOfPeopleStudy }}</p> |
|
|
|
|
<p class="num num2">{{ overview.courseStudyFrequency }}</p> |
|
|
|
|
<p class="num num3">{{ overview.courseStudyTime }}</p> |
|
|
|
|
<p class="num num4">{{ overview.numberOfExperiments }}</p> |
|
|
|
|
<p class="num num5">{{ overview.cumulativeExperimentTime }}</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="active-number"> |
|
|
|
|
<p class="val">{{ overview.currentActivePeople }}</p> |
|
|
|
|
<p class="name">当前活跃人数</p> |
|
|
|
|
</div> |
|
|
|
|
<div id="chart4" |
|
|
|
|
class="chart" |
|
|
|
|
style="height: 100%"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="item" |
|
|
|
|
style="height: 440px;"> |
|
|
|
|
<!--左上边框--> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
<i class="t_l_line"></i> |
|
|
|
|
<i class="l_t_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<!--右上边框--> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
<i class="t_r_line"></i> |
|
|
|
|
<i class="r_t_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<!--左下边框--> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
<i class="l_b_line"></i> |
|
|
|
|
<i class="b_l_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<!--右下边框--> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
<i class="r_b_line"></i> |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
style="height: 562px;"> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_3.png" |
|
|
|
|
alt=""> |
|
|
|
|
绿色食品十大产业图谱 |
|
|
|
|
</div> |
|
|
|
|
<!-- <el-carousel height="150px"> |
|
|
|
|
<el-carousel class="pics" |
|
|
|
|
height="560px"> |
|
|
|
|
<el-carousel-item v-for="item in 10" |
|
|
|
|
:key="item"> |
|
|
|
|
<img class="pic" |
|
|
|
|
:src="require('@/assets/img/screenShow/' + item + '.jpg')" |
|
|
|
|
alt=""> |
|
|
|
|
</el-carousel-item> |
|
|
|
|
</el-carousel> --> |
|
|
|
|
</el-carousel> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="right"> |
|
|
|
|
@ -284,6 +257,7 @@ |
|
|
|
|
import Util from '@/libs/util' |
|
|
|
|
import * as echarts from 'echarts' |
|
|
|
|
import Setting from '@/setting' |
|
|
|
|
import MapData from './mapData.json' |
|
|
|
|
export default { |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
@ -317,7 +291,7 @@ export default { |
|
|
|
|
this.renderChart1() |
|
|
|
|
this.renderChart2() |
|
|
|
|
this.getData() |
|
|
|
|
// this.renderChart() |
|
|
|
|
this.renderMap() |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
methods: { |
|
|
|
|
@ -388,7 +362,7 @@ export default { |
|
|
|
|
endValue: 5 // 一次性展示6个。 |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
color: ['#4388ff', '#f0231c', '#8c2bff', '#2defe2', '#eeac12', '#12c23c'], |
|
|
|
|
color: ['#4388ff', '#e9cc7d', '#8c2bff', '#2defe2', '#e59f6f', '#7baaff'], |
|
|
|
|
xAxis: [ |
|
|
|
|
{ |
|
|
|
|
type: 'category', |
|
|
|
|
@ -726,6 +700,7 @@ export default { |
|
|
|
|
color: '#fff' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
color: ['#4388ff', '#e9cc7d', '#fb9c80', '#2defe2', '#e59f6f', '#7baaff'], |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '产品登记数（个）', |
|
|
|
|
@ -1172,590 +1147,111 @@ export default { |
|
|
|
|
this.animateChart(chart, option1, this.provinces) |
|
|
|
|
}, 1500) |
|
|
|
|
}, |
|
|
|
|
// 获取图标数据并渲染 |
|
|
|
|
async renderChart () { |
|
|
|
|
const animateChart = (chart, option, data, num = 6) => { |
|
|
|
|
// 每次向后滚动一个，最后一个从头开始。 |
|
|
|
|
if (option.dataZoom[0].endValue == data.length) { |
|
|
|
|
option.dataZoom[0].endValue = num |
|
|
|
|
option.dataZoom[0].startValue = 0 |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 |
|
|
|
|
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 |
|
|
|
|
} |
|
|
|
|
chart.setOption(option) |
|
|
|
|
// 动画 |
|
|
|
|
animateChart (chart, option, data, num = 6) { |
|
|
|
|
// 每次向后滚动一个，最后一个从头开始。 |
|
|
|
|
if (option.dataZoom[0].endValue == data.length) { |
|
|
|
|
option.dataZoom[0].endValue = num |
|
|
|
|
option.dataZoom[0].startValue = 0 |
|
|
|
|
} |
|
|
|
|
let chart = {} |
|
|
|
|
|
|
|
|
|
// 学生成绩分布分析 |
|
|
|
|
const year = new Date().getFullYear() |
|
|
|
|
const times = [] |
|
|
|
|
// 获取过去五年的上下半年日期 |
|
|
|
|
for (let i = 0; i < 6; i++) { |
|
|
|
|
times.push({ |
|
|
|
|
startTime: (year - i) + '-02-01', |
|
|
|
|
endTime: (year - i) + '-08-31' |
|
|
|
|
}) |
|
|
|
|
times.push({ |
|
|
|
|
startTime: (year - i) + '-09-01', |
|
|
|
|
endTime: (year - i + 1) + '-01-31' |
|
|
|
|
}) |
|
|
|
|
else { |
|
|
|
|
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 |
|
|
|
|
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 |
|
|
|
|
} |
|
|
|
|
this.$post(this.api.studentGradeDistribution, times).then(({ data }) => { |
|
|
|
|
const times = [] |
|
|
|
|
const data1 = [] |
|
|
|
|
const data2 = [] |
|
|
|
|
const data3 = [] |
|
|
|
|
const data4 = [] |
|
|
|
|
data.map(e => { |
|
|
|
|
times.push(e.time) |
|
|
|
|
data1.push(e.yellow.replace('%', '')) |
|
|
|
|
data2.push(e.green.replace('%', '')) |
|
|
|
|
data3.push(e.blue.replace('%', '')) |
|
|
|
|
data4.push(e.pink.replace('%', '')) |
|
|
|
|
}) |
|
|
|
|
const option = { |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis', |
|
|
|
|
axisPointer: { |
|
|
|
|
type: 'shadow' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
top: '10%', |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
left: '3%', |
|
|
|
|
right: '4%', |
|
|
|
|
top: '30%', |
|
|
|
|
bottom: '3%', |
|
|
|
|
containLabel: true |
|
|
|
|
}, |
|
|
|
|
dataZoom: [//滑动条 |
|
|
|
|
{ |
|
|
|
|
xAxisIndex: 0,//这里是从X轴的0刻度开始 |
|
|
|
|
show: false,//是否显示滑动条，不影响使用 |
|
|
|
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 |
|
|
|
|
startValue: 0, // 从头开始。 |
|
|
|
|
endValue: 5 // 一次性展示6个。 |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
color: ['#4388ff', '#44cfff', '#8c2bff', '#2defe2'], |
|
|
|
|
xAxis: [ |
|
|
|
|
{ |
|
|
|
|
type: 'category', |
|
|
|
|
data: times, |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
interval: 0, |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#fff', |
|
|
|
|
}, |
|
|
|
|
rotate: 60 |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
yAxis: [ |
|
|
|
|
{ |
|
|
|
|
type: 'value', |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
margin: 10, |
|
|
|
|
textStyle: { |
|
|
|
|
fontSize: 12, |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
formatter: '{value}%' |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '60以下', |
|
|
|
|
type: 'bar', |
|
|
|
|
stack: 'Ad', |
|
|
|
|
emphasis: { |
|
|
|
|
focus: 'series' |
|
|
|
|
}, |
|
|
|
|
data: data1 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '60-69', |
|
|
|
|
type: 'bar', |
|
|
|
|
stack: 'Ad', |
|
|
|
|
emphasis: { |
|
|
|
|
focus: 'series' |
|
|
|
|
}, |
|
|
|
|
data: data2 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '70-89', |
|
|
|
|
type: 'bar', |
|
|
|
|
stack: 'Ad', |
|
|
|
|
emphasis: { |
|
|
|
|
focus: 'series' |
|
|
|
|
}, |
|
|
|
|
data: data3 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '90-100', |
|
|
|
|
type: 'bar', |
|
|
|
|
stack: 'Ad', |
|
|
|
|
emphasis: { |
|
|
|
|
focus: 'series' |
|
|
|
|
}, |
|
|
|
|
data: data4 |
|
|
|
|
}, |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
chart[0] = echarts.init(document.querySelector(`#chart2`)) |
|
|
|
|
chart[0].setOption(option) |
|
|
|
|
setInterval(function () { |
|
|
|
|
animateChart(chart[0], option, data, 5) |
|
|
|
|
}, 3000) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
|
|
|
|
|
// 学生实验课程考核成绩趋势图 |
|
|
|
|
const colors = [ |
|
|
|
|
{ |
|
|
|
|
color1: '#0184d5', |
|
|
|
|
color2: 'rgba(1, 132, 213, 0.4)' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
color1: '#00d887', |
|
|
|
|
color2: 'rgba(0, 216, 135, 0.4)' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
color1: '#e71872', |
|
|
|
|
color2: 'rgba(40, 147, 189, 0.4)' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
color1: '#f9d437', |
|
|
|
|
color2: 'rgba(50, 234, 144, 0.4)' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
color1: '#912892', |
|
|
|
|
color2: 'rgba(31, 24, 153, 0.4)' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
color1: '#f21259', |
|
|
|
|
color2: 'rgba(40, 176, 97, 0.4)' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
color1: '#7343fe', |
|
|
|
|
color2: 'rgba(50, 240, 140, 0.4)' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
color1: '#ea7321', |
|
|
|
|
color2: 'rgba(65, 94, 123, 0.4)' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
color1: '#934ea2', |
|
|
|
|
color2: 'rgba(32, 123, 223, 0.4)' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
color1: '#672313', |
|
|
|
|
color2: 'rgba(156, 40, 100, 0.4)' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
color1: '#0184d5', |
|
|
|
|
color2: 'rgba(60, 132, 60, 0.4)' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
color1: '#00d887', |
|
|
|
|
color2: 'rgba(60, 42, 244, 0.4)' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
color1: '#e71872', |
|
|
|
|
color2: 'rgba(90, 147, 180, 0.4)' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
color1: '#f9d437', |
|
|
|
|
color2: 'rgba(150, 20, 144, 0.4)' |
|
|
|
|
}, |
|
|
|
|
] |
|
|
|
|
// 登录前登录后调的课程接口不一样 |
|
|
|
|
const cousrseRes = await this.$post(this.api.listOfGoods, { |
|
|
|
|
pageNum: 1, |
|
|
|
|
pageSize: 1000, |
|
|
|
|
sort: 0, |
|
|
|
|
isShelves: 0, |
|
|
|
|
hotTag: 1, |
|
|
|
|
}) |
|
|
|
|
if (cousrseRes) { |
|
|
|
|
const courseList = cousrseRes.page.records |
|
|
|
|
const ids = courseList.map(e => e.mallId) |
|
|
|
|
times.map(e => { |
|
|
|
|
e.mallId = ids |
|
|
|
|
}) |
|
|
|
|
const courseData = {} |
|
|
|
|
this.$post(this.api.studentAssessSchievement, times).then(({ data }) => { |
|
|
|
|
const xData = data.map(e => e.time) |
|
|
|
|
const len = xData.length |
|
|
|
|
courseList.map(e => { |
|
|
|
|
courseData[e.productName] = new Array(len).fill(0, 0) |
|
|
|
|
}) |
|
|
|
|
const series = [] |
|
|
|
|
data.map((e, i) => { |
|
|
|
|
e.assesScoreRespList.map(n => { |
|
|
|
|
const item = courseList.find(j => j.mallId == n.mallId) |
|
|
|
|
if (item) { |
|
|
|
|
const name = item.productName |
|
|
|
|
if (courseData[name]) { |
|
|
|
|
courseData[name][i] = +n.avgScore |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
let index = 0 |
|
|
|
|
// 生成series |
|
|
|
|
for (const i in courseData) { |
|
|
|
|
series.push({ |
|
|
|
|
name: i, |
|
|
|
|
type: 'line', |
|
|
|
|
// smooth: true, |
|
|
|
|
symbol: 'circle', |
|
|
|
|
symbolSize: 5, |
|
|
|
|
lineStyle: { |
|
|
|
|
normal: { |
|
|
|
|
color: colors[index].color1, |
|
|
|
|
width: 2 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
itemStyle: { |
|
|
|
|
normal: { |
|
|
|
|
color: colors[index].color1, |
|
|
|
|
borderWidth: 8 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
data: courseData[i] |
|
|
|
|
}) |
|
|
|
|
++index |
|
|
|
|
if (index > 9) index = 0 |
|
|
|
|
chart.setOption(option) |
|
|
|
|
}, |
|
|
|
|
// 渲染地图 |
|
|
|
|
renderMap () { |
|
|
|
|
echarts.registerMap('AH', MapData); |
|
|
|
|
const option = { |
|
|
|
|
visualMap: { |
|
|
|
|
// min: 1111, |
|
|
|
|
// max: 333332, |
|
|
|
|
// left: '50%', |
|
|
|
|
// bottom: 20, |
|
|
|
|
symbolSize: 300, |
|
|
|
|
realtime: false, |
|
|
|
|
calculable: true, |
|
|
|
|
inRange: { |
|
|
|
|
color: ['#6395ed', '#f3a64b', '#6b5de9'] |
|
|
|
|
} |
|
|
|
|
const option = { |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis', |
|
|
|
|
axisPointer: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#dddc6b' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
top: '8%', |
|
|
|
|
data: courseList.map(e => e.productName), |
|
|
|
|
textStyle: { |
|
|
|
|
color: 'rgba(255,255,255,.5)', |
|
|
|
|
fontSize: '12', |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
dataZoom: [//滑动条 |
|
|
|
|
{ |
|
|
|
|
xAxisIndex: 0,//这里是从X轴的0刻度开始 |
|
|
|
|
show: false,//是否显示滑动条，不影响使用 |
|
|
|
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 |
|
|
|
|
startValue: 0, // 从头开始。 |
|
|
|
|
endValue: 6 // 一次性展示6个。 |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
grid: { |
|
|
|
|
left: '30', |
|
|
|
|
top: '45%', |
|
|
|
|
right: '10', |
|
|
|
|
bottom: '5%', |
|
|
|
|
containLabel: true |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
boundaryGap: false, |
|
|
|
|
axisLabel: { |
|
|
|
|
interval: 0, |
|
|
|
|
textStyle: { |
|
|
|
|
color: "rgba(255,255,255,.9)", |
|
|
|
|
fontSize: 12, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: 'rgba(255,255,255,.2)' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
data: xData |
|
|
|
|
}, |
|
|
|
|
yAxis: [{ |
|
|
|
|
type: 'value', |
|
|
|
|
name: '平均分', |
|
|
|
|
min: 0, |
|
|
|
|
max: 100, |
|
|
|
|
interval: 10, |
|
|
|
|
splitNumber: 10, |
|
|
|
|
nameTextStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
axisTick: { show: false }, |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: 'rgba(255,255,255,.1)' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
textStyle: { |
|
|
|
|
color: "rgba(255,255,255,.9)", |
|
|
|
|
fontSize: 12, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
splitLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: 'rgba(255,255,255,.1)' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}], |
|
|
|
|
series |
|
|
|
|
}, |
|
|
|
|
// geo: { |
|
|
|
|
// map: 'AH', |
|
|
|
|
// roam: false, |
|
|
|
|
// zoom: 1.1, |
|
|
|
|
// label: { |
|
|
|
|
// emphasis: { |
|
|
|
|
// show: false |
|
|
|
|
// } |
|
|
|
|
// }, |
|
|
|
|
// itemStyle: { |
|
|
|
|
// borderColor: 'transparent', |
|
|
|
|
// areaColor: 'transparent' |
|
|
|
|
// } |
|
|
|
|
// }, |
|
|
|
|
title: { |
|
|
|
|
text: '2021年绿色食品十大产业全产业链产值（亿元） ', |
|
|
|
|
top: 10, |
|
|
|
|
left: 10, |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
} |
|
|
|
|
chart[1] = echarts.init(document.querySelector(`#chart5`)) |
|
|
|
|
chart[1].setOption(option) |
|
|
|
|
// setInterval(function () { |
|
|
|
|
// animateChart(chart[1], option, times) |
|
|
|
|
// }, 5000) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 月人均在线学习时长情况 |
|
|
|
|
const date = new Date() |
|
|
|
|
date.setMonth(date.getMonth() + 1) |
|
|
|
|
const months = [] |
|
|
|
|
// 获取近12个月的日期 |
|
|
|
|
for (let i = 0; i < 12; i++) { |
|
|
|
|
date.setMonth(date.getMonth() - 1) |
|
|
|
|
const pre = date.getFullYear() + '-' + Util.formateTime(date.getMonth() + 1) + '-' |
|
|
|
|
months.push({ |
|
|
|
|
startTime: pre + '01', |
|
|
|
|
endTime: pre + new Date(new Date(date.getFullYear(), date.getMonth() + 1, 1).getTime() - 1000 * 60 * 60 * 24).getDate() |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
this.$post(this.api.monthlyAverageOnlineTime, months).then(({ data }) => { |
|
|
|
|
const option = { |
|
|
|
|
title: { |
|
|
|
|
text: '' |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis' |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
interval: 0, |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#fff', |
|
|
|
|
}, |
|
|
|
|
rotate: 60 |
|
|
|
|
}, |
|
|
|
|
data: data.map(e => e.time) |
|
|
|
|
}, |
|
|
|
|
dataZoom: [//滑动条 |
|
|
|
|
{ |
|
|
|
|
xAxisIndex: 0,//这里是从X轴的0刻度开始 |
|
|
|
|
show: false,//是否显示滑动条，不影响使用 |
|
|
|
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 |
|
|
|
|
startValue: 0, // 从头开始。 |
|
|
|
|
endValue: 7 // 一次性展示6个。 |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
margin: 10, |
|
|
|
|
textStyle: { |
|
|
|
|
fontSize: 12, |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
formatter: '{value}' |
|
|
|
|
}, |
|
|
|
|
tooltip: {}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '广西地图', |
|
|
|
|
type: 'map', |
|
|
|
|
top: 60, |
|
|
|
|
map: 'AH',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'） |
|
|
|
|
roam: true, |
|
|
|
|
zoom: 1.1, |
|
|
|
|
label: { |
|
|
|
|
show: true |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
color: ['#4BF0FF', '#44AFF0', '#4E82FF', '#584BFF', '#BE4DFF', '#F845F1'], |
|
|
|
|
legend: { |
|
|
|
|
data: ['月人均在线学习时长情况'], |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
top: '8%' |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
top: '20%', |
|
|
|
|
left: '3%', |
|
|
|
|
right: '4%', |
|
|
|
|
bottom: '3%', |
|
|
|
|
containLabel: true |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
data: data.map(e => e.averageDuration), |
|
|
|
|
type: 'bar', |
|
|
|
|
barWidth: 11, |
|
|
|
|
itemStyle: { |
|
|
|
|
normal: { |
|
|
|
|
barBorderRadius: [10, 10, 0, 0], |
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ |
|
|
|
|
offset: 0, |
|
|
|
|
color: "#4033F9" |
|
|
|
|
}, { |
|
|
|
|
offset: 0.8, |
|
|
|
|
color: "#516fff" |
|
|
|
|
}], false), |
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)', |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
showBackground: true, |
|
|
|
|
backgroundStyle: { |
|
|
|
|
color: 'rgba(180, 180, 180, 0.2)' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
chart[2] = echarts.init(document.querySelector(`#chart3`)) |
|
|
|
|
chart[2].setOption(option) |
|
|
|
|
setInterval(function () { |
|
|
|
|
animateChart(chart[2], option, data) |
|
|
|
|
}, 1500) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
|
|
|
|
|
// 平台登录人数 |
|
|
|
|
this.$get(this.api.platformLoginStatistics, { |
|
|
|
|
platform: Setting.platformId |
|
|
|
|
}).then(({ data }) => { |
|
|
|
|
const option = { |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis', |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
left: '12%', |
|
|
|
|
right: '5%', |
|
|
|
|
top: '15%', |
|
|
|
|
bottom: '30%' |
|
|
|
|
}, |
|
|
|
|
dataZoom: [//滑动条 |
|
|
|
|
{ |
|
|
|
|
xAxisIndex: 0,//这里是从X轴的0刻度开始 |
|
|
|
|
show: false,//是否显示滑动条，不影响使用 |
|
|
|
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 |
|
|
|
|
startValue: 0, // 从头开始。 |
|
|
|
|
endValue: 3 // 一次性展示6个。 |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
xAxis: [{ |
|
|
|
|
type: 'category', |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#57617B' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
interval: 0, |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#fff', |
|
|
|
|
}, |
|
|
|
|
rotate: 60 |
|
|
|
|
}, |
|
|
|
|
data: data.map(e => e.today) |
|
|
|
|
}], |
|
|
|
|
yAxis: [{ |
|
|
|
|
type: 'value', |
|
|
|
|
axisTick: { |
|
|
|
|
show: false |
|
|
|
|
}, |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#57617B' |
|
|
|
|
} |
|
|
|
|
// 地图区域的多边形 图形样式 |
|
|
|
|
itemStyle: { |
|
|
|
|
areaColor: 'rgba(78, 130, 255, 1)', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用 |
|
|
|
|
borderWidth: 0.5, // 描边线宽 为 0 时无描边 |
|
|
|
|
borderColor: '#000', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数 |
|
|
|
|
borderType: 'solid' // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted' |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
margin: 10, |
|
|
|
|
textStyle: { |
|
|
|
|
fontSize: 12, |
|
|
|
|
color: '#fff' |
|
|
|
|
// 高亮状态下的多边形和标签样式 |
|
|
|
|
emphasis: { |
|
|
|
|
label: { |
|
|
|
|
show: true, // 是否显示标签 |
|
|
|
|
color: '#fff' // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色 |
|
|
|
|
}, |
|
|
|
|
formatter: '{value}' |
|
|
|
|
}, |
|
|
|
|
splitLine: { |
|
|
|
|
show: true, |
|
|
|
|
lineStyle: { |
|
|
|
|
type: 'dashed', |
|
|
|
|
color: ['#25CEF3'] |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}], |
|
|
|
|
series: [{ |
|
|
|
|
name: '平台登录人数', |
|
|
|
|
type: 'bar', |
|
|
|
|
barWidth: 8, |
|
|
|
|
itemStyle: { |
|
|
|
|
normal: { |
|
|
|
|
barBorderRadius: [10, 10, 0, 0], |
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ |
|
|
|
|
offset: 0, |
|
|
|
|
color: "#009AFD" |
|
|
|
|
}, { |
|
|
|
|
offset: 0.8, |
|
|
|
|
color: "#33DAFF" |
|
|
|
|
}], false), |
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)', |
|
|
|
|
itemStyle: { |
|
|
|
|
areaColor: '#c5aff9' // 地图区域的颜色 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
data: data.map(e => e.quantity) |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
chart[3] = echarts.init(document.querySelector(`#chart4`)) |
|
|
|
|
chart[3].setOption(option) |
|
|
|
|
setInterval(function () { |
|
|
|
|
animateChart(chart[3], option, data, 3) |
|
|
|
|
}, 1500) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
|
|
|
|
|
// 监听resize事件，动态改变chart大小 |
|
|
|
|
window.addEventListener('resize', () => { |
|
|
|
|
this.examChart && this.examChart.resize() |
|
|
|
|
for (let i = 0; i < 4; i++) { |
|
|
|
|
chart[i] && chart[i].resize() |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 动画 |
|
|
|
|
animateChart (chart, option, data, num = 6) { |
|
|
|
|
// 每次向后滚动一个，最后一个从头开始。 |
|
|
|
|
if (option.dataZoom[0].endValue == data.length) { |
|
|
|
|
option.dataZoom[0].endValue = num |
|
|
|
|
option.dataZoom[0].startValue = 0 |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 |
|
|
|
|
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 |
|
|
|
|
data: [ |
|
|
|
|
{ name: '合肥市', value: 787.40 }, |
|
|
|
|
{ name: '淮北市', value: 236.25 }, |
|
|
|
|
{ name: '宿州市', value: 865.93 }, |
|
|
|
|
{ name: '亳州市', value: 1225.56 }, |
|
|
|
|
{ name: '蚌埠市', value: 765.68 }, |
|
|
|
|
{ name: '阜阳市', value: 1007.61 }, |
|
|
|
|
{ name: '淮南市', value: 482.81 }, |
|
|
|
|
{ name: '滁州市', value: 871.85 }, |
|
|
|
|
{ name: '六安市', value: 1232.31 }, |
|
|
|
|
{ name: '马鞍山市', value: 288.30 }, |
|
|
|
|
{ name: '芜湖市', value: 508.64 }, |
|
|
|
|
{ name: '宣城市', value: 792.02 }, |
|
|
|
|
{ name: '铜陵市', value: 142.32 }, |
|
|
|
|
{ name: '池州市', value: 279.26 }, |
|
|
|
|
{ name: '安庆市', value: 757.88 }, |
|
|
|
|
{ name: '黄山市', value: 555.09 }, |
|
|
|
|
] |
|
|
|
|
}, |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
chart.setOption(option) |
|
|
|
|
echarts.init(document.querySelector(`#chart4`)).setOption(option) |
|
|
|
|
}, |
|
|
|
|
// 表格滚动效果 |
|
|
|
|
scrollTable () { |
|
|
|
|
|
