980 lines
25 KiB
Vue
980 lines
25 KiB
Vue
|
<template>
|
|||
|
|
<view class="pagebox">
|
|||
|
|
<view class="topbox">
|
|||
|
|
<u-navbar title="LILY"
|
|||
|
|
:border-bottom="false"
|
|||
|
|
:background="bgc"
|
|||
|
|
title-color='#FFFFFF'
|
|||
|
|
title-size='36'
|
|||
|
|
height='36'></u-navbar>
|
|||
|
|
<view class="echarts">
|
|||
|
|
<!-- <mpvue-echarts id="main" ref="pieChart" :echarts="echarts" @onInit="initChart" /> -->
|
|||
|
|
<l-echart ref="chart"
|
|||
|
|
@finished="initChart"></l-echart>
|
|||
|
|
</view>
|
|||
|
|
<view class="infobigbox">
|
|||
|
|
<view class="logo">
|
|||
|
|
<image src="https://file.langsi.online/yasiimg/web/static/ubtuFZZ3dgSoSc444qIg"
|
|||
|
|
style="z-index: 0;"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="infobox">
|
|||
|
|
|
|||
|
|
<view class="infobox_top">
|
|||
|
|
<view class="infobox_top_left">
|
|||
|
|
<view class="infobox_top_lefttop">
|
|||
|
|
今日学习（分）
|
|||
|
|
</view>
|
|||
|
|
<view class="infobox_top_leftbot">
|
|||
|
|
320
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="infobox_top_right">
|
|||
|
|
<view class="infobox_top_righttop">
|
|||
|
|
较昨日
|
|||
|
|
</view>
|
|||
|
|
<view class="infobox_top_rightbot">
|
|||
|
|
20%
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="infobox_bot">
|
|||
|
|
<view class="infobox_bot_cont">
|
|||
|
|
<view class="infobox_bot_cont_top">
|
|||
|
|
总学习（时）
|
|||
|
|
</view>
|
|||
|
|
<view class="infobox_bot_cont_bot">
|
|||
|
|
320
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="infobox_bot_cont">
|
|||
|
|
<view class="infobox_bot_cont_top">
|
|||
|
|
今日做题（道）
|
|||
|
|
</view>
|
|||
|
|
<view class="infobox_bot_cont_bot">
|
|||
|
|
4300
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="infobox_bot_cont">
|
|||
|
|
<view class="infobox_bot_cont_top">
|
|||
|
|
今日问AI（次）
|
|||
|
|
</view>
|
|||
|
|
<view class="infobox_bot_cont_bot">
|
|||
|
|
43
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="study_info_box">
|
|||
|
|
|
|||
|
|
<view class="study_info_top">
|
|||
|
|
<view class="study_info_top_left">
|
|||
|
|
作业完成情况
|
|||
|
|
</view>
|
|||
|
|
<view class="study_info_top_right">
|
|||
|
|
本周
|
|||
|
|
<view class="iconfont icon-arow_down"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="study_info_cont_box">
|
|||
|
|
|
|||
|
|
<view class="study_info_cont">
|
|||
|
|
<view class="data">Mon</view>
|
|||
|
|
<view class="study_box">
|
|||
|
|
<view class="study"
|
|||
|
|
v-for="(item, index) in sdydata"
|
|||
|
|
:key="index"
|
|||
|
|
:style="{ backgroundColor: item.background }"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="study_info_cont">
|
|||
|
|
<view class="data">Tue</view>
|
|||
|
|
<view class="study_box">
|
|||
|
|
<view class="study"
|
|||
|
|
v-for="(item, index) in sdydata"
|
|||
|
|
:key="index"
|
|||
|
|
:style="{ backgroundColor: item.background }"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="study_info_cont">
|
|||
|
|
<view class="data">Wed</view>
|
|||
|
|
<view class="study_box">
|
|||
|
|
<view class="study"
|
|||
|
|
v-for="(item, index) in sdydata"
|
|||
|
|
:key="index"
|
|||
|
|
:style="{ backgroundColor: item.background }"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="study_info_cont">
|
|||
|
|
<view class="data">Thu</view>
|
|||
|
|
<view class="study_box">
|
|||
|
|
<view class="study"
|
|||
|
|
v-for="(item, index) in sdydata"
|
|||
|
|
:key="index"
|
|||
|
|
:style="{ backgroundColor: item.background }"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="study_info_cont">
|
|||
|
|
<view class="data">Fri</view>
|
|||
|
|
<view class="study_box">
|
|||
|
|
<view class="study"
|
|||
|
|
v-for="(item, index) in sdydata"
|
|||
|
|
:key="index"
|
|||
|
|
:style="{ backgroundColor: item.background }"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="study_info_cont">
|
|||
|
|
<view class="data">Sat</view>
|
|||
|
|
<view class="study_box">
|
|||
|
|
<view class="study"
|
|||
|
|
v-for="(item, index) in sdydata"
|
|||
|
|
:key="index"
|
|||
|
|
:style="{ backgroundColor: item.background }"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="study_info_cont">
|
|||
|
|
<view class="data">Sun</view>
|
|||
|
|
<view class="study_box">
|
|||
|
|
<view class="study"
|
|||
|
|
v-for="(item, index) in sdydata"
|
|||
|
|
:key="index"
|
|||
|
|
:style="{ backgroundColor: item.background }"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="work_info">
|
|||
|
|
<view class="work_info_top">
|
|||
|
|
<view class="work_info_top_text">
|
|||
|
|
作业记录
|
|||
|
|
</view>
|
|||
|
|
<view class="work_info_top_right">
|
|||
|
|
作业记录
|
|||
|
|
<view class="iconfont icon-arow_down"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card">
|
|||
|
|
<view class="work_card_top">
|
|||
|
|
<view class="work_card_top_left">
|
|||
|
|
<view class="work_card_top_left_img">
|
|||
|
|
<image src="https://file.langsi.online/yasiimg/web/static/u07sCQb6mW6OSamVr1Va"></image>
|
|||
|
|
</view>
|
|||
|
|
课后作业
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card_top_right">
|
|||
|
|
进行中
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card_cont_box">
|
|||
|
|
<view class="work_card_cont">
|
|||
|
|
<view class="work_card_cont_point"></view>
|
|||
|
|
<view class="work_card_cont_text">
|
|||
|
|
IELTS 18-Test 2-Part 1
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card_cont_tag">
|
|||
|
|
听力
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card_cont">
|
|||
|
|
<view class="work_card_cont_point"></view>
|
|||
|
|
<view class="work_card_cont_text">
|
|||
|
|
IELTS 18-Test 2-Part 1
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card_cont_tag">
|
|||
|
|
听力
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card_cont">
|
|||
|
|
<view class="work_card_cont_point"></view>
|
|||
|
|
<view class="work_card_cont_text">
|
|||
|
|
IELTS 18-Test 2-Part 1
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card_cont_tag">
|
|||
|
|
听力
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card_info_box">
|
|||
|
|
<view class="work_card_info_top">
|
|||
|
|
<view class="work_card_info_topimg">
|
|||
|
|
<image src="https://file.langsi.online/yasiimg/web/static/uw2jJ5BraHhwDDaIZ0MC"></image>
|
|||
|
|
</view>
|
|||
|
|
描述
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card_info_bot">
|
|||
|
|
最好在中午十二点之前完成交上作业，过期不候
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card_info_box">
|
|||
|
|
<view class="work_card_info_top">
|
|||
|
|
<view class="work_card_info_topimg">
|
|||
|
|
<image src="https://file.langsi.online/yasiimg/web/static/uhApaomh5maFP29oecp3">
|
|||
|
|
|
|||
|
|
</image>
|
|||
|
|
</view>
|
|||
|
|
时间
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="work_card_info_bot">
|
|||
|
|
02-12 12:00
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card"
|
|||
|
|
:class="isalready == true ? 'act1' : ''">
|
|||
|
|
<view class="work_card_top">
|
|||
|
|
<view class="work_card_top_left">
|
|||
|
|
<view class="work_card_top_left_img">
|
|||
|
|
<image src="https://file.langsi.online/yasiimg/web/static/u07sCQb6mW6OSamVr1Va"></image>
|
|||
|
|
</view>
|
|||
|
|
课后作业
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card_top_right"
|
|||
|
|
:class="isalready == true ? 'act2' : ''">
|
|||
|
|
进行中
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card_cont_box">
|
|||
|
|
<view class="work_card_cont">
|
|||
|
|
<view class="work_card_cont_point"></view>
|
|||
|
|
<view class="work_card_cont_text">
|
|||
|
|
IELTS 18-Test 2-Part 1
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card_cont_tag">
|
|||
|
|
听力
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card_cont">
|
|||
|
|
<view class="work_card_cont_point"></view>
|
|||
|
|
<view class="work_card_cont_text">
|
|||
|
|
IELTS 18-Test 2-Part 1
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card_cont_tag">
|
|||
|
|
听力
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card_cont">
|
|||
|
|
<view class="work_card_cont_point"></view>
|
|||
|
|
<view class="work_card_cont_text">
|
|||
|
|
IELTS 18-Test 2-Part 1
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card_cont_tag">
|
|||
|
|
听力
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card_info_box">
|
|||
|
|
<view class="work_card_info_top">
|
|||
|
|
<view class="work_card_info_topimg">
|
|||
|
|
<image src="https://file.langsi.online/yasiimg/web/static/uw2jJ5BraHhwDDaIZ0MC"></image>
|
|||
|
|
</view>
|
|||
|
|
描述
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card_info_bot">
|
|||
|
|
最好在中午十二点之前完成交上作业，过期不候
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="work_card_info_box">
|
|||
|
|
<view class="work_card_info_top">
|
|||
|
|
<view class="work_card_info_topimg">
|
|||
|
|
<image src="https://file.langsi.online/yasiimg/web/static/uhApaomh5maFP29oecp3">
|
|||
|
|
|
|||
|
|
</image>
|
|||
|
|
</view>
|
|||
|
|
时间
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="work_card_info_bot">
|
|||
|
|
02-12 12:00
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
|||
|
|
|
|||
|
|
// import echarts from '@/common/echarts.min2.js' /*chart.min.js为在线定制*/
|
|||
|
|
import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue'
|
|||
|
|
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
mpvueEcharts, LEchart
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// echarts,
|
|||
|
|
totalScore: 10,
|
|||
|
|
grammaticalScore: 8,
|
|||
|
|
vocabularyScore: 8,
|
|||
|
|
pronounceScore: 8,
|
|||
|
|
fluencyScore: 8,
|
|||
|
|
bgc: {
|
|||
|
|
backgroundColor: "transparent",
|
|||
|
|
},
|
|||
|
|
sdydata: [],
|
|||
|
|
isalready: true,
|
|||
|
|
// https://file.langsi.online/yasiimg/web/static/uBHiWpVS8LQdX241DdjX
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
this.changedata()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
async initChart() {
|
|||
|
|
let _this = this
|
|||
|
|
|
|||
|
|
const option = {
|
|||
|
|
color: ['#d1f7ff', '#95c6fd'],
|
|||
|
|
legend: { // 图例组件
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'transparent',
|
|||
|
|
radar: [{ // 雷达图坐标系组件，只适用于雷达图。
|
|||
|
|
center: ['50%', '50%'],
|
|||
|
|
// 圆中心坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
|
|||
|
|
radius: '70rpx',
|
|||
|
|
// 圆的半径，数组的第一项是内半径，第二项是外半径。
|
|||
|
|
startAngle: 90,
|
|||
|
|
// 坐标系起始角度，也就是第一个指示器轴的角度。[ default: 90 ]
|
|||
|
|
name: { // (圆外的标签)雷达图每个指示器名称的配置项。
|
|||
|
|
formatter: '{value}',
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: '24rpx',
|
|||
|
|
color: '#4DA1FF'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
nameGap: 5,
|
|||
|
|
// 指示器名称和指示器轴的距离。[ default: 15 ]
|
|||
|
|
splitNumber: 1,
|
|||
|
|
// (这里是圆的环数)指示器轴的分割段数。[ default: 5 ]
|
|||
|
|
shape: 'circle',
|
|||
|
|
// 雷达图绘制类型，支持 'polygon'(多边形) 和 'circle'(圆)。[ default: 'polygon' ]
|
|||
|
|
axisLine: { // (圆内的几条直线)坐标轴轴线相关设置
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#daedff',
|
|||
|
|
// 坐标轴线线的颜色。
|
|||
|
|
width: 1,
|
|||
|
|
// 坐标轴线线宽。
|
|||
|
|
type: 'solid',
|
|||
|
|
// 坐标轴线线的类型。
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: { // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
|
|||
|
|
lineStyle: {
|
|||
|
|
color: ['#daedff', '#daedff', '#daedff', '#daedff', '#daedff', '#91c5ff'],
|
|||
|
|
// 分隔线颜色
|
|||
|
|
width: 1,
|
|||
|
|
// 分隔线线宽
|
|||
|
|
type: ['solid', 'dashed'],
|
|||
|
|
// 坐标轴线线的类型
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
|
|||
|
|
show: true,
|
|||
|
|
areaStyle: { // 分隔区域的样式设置。
|
|||
|
|
color: ' #E1F0FF',
|
|||
|
|
// 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
indicator: [
|
|||
|
|
{ // 雷达图的指示器，用来指定雷达图中的多个变量（维度）,跟data中 value 对应
|
|||
|
|
name: '平均成绩/分' + ' ' + Number(_this.totalScore).toFixed(1),
|
|||
|
|
// 指示器名称
|
|||
|
|
max: 100,
|
|||
|
|
// 指示器的最大值，可选，建议设置
|
|||
|
|
color: '#FFFFFF ' // 标签特定的颜色。
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '写作' + ' ' + Number(_this.grammaticalScore).toFixed(1),
|
|||
|
|
max: 100,
|
|||
|
|
color: '#FFFFFF' // 标签特定的颜色。
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '阅读' + ' ' + Number(_this.vocabularyScore).toFixed(1),
|
|||
|
|
max: 100,
|
|||
|
|
color: '#FFFFFF' // 标签特定的颜色。
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '口语' + ' ' + Number(_this.pronounceScore).toFixed(1),
|
|||
|
|
max: 100,
|
|||
|
|
color: '#FFFFFF' // 标签特定的颜色。
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '听力' + ' ' + Number(_this.fluencyScore).toFixed(1),
|
|||
|
|
max: 100,
|
|||
|
|
color: '#FFFFFF' // 标签特定的颜色。
|
|||
|
|
}]
|
|||
|
|
}],
|
|||
|
|
series: [{
|
|||
|
|
name: '雷达图',
|
|||
|
|
// 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
|||
|
|
type: 'radar',
|
|||
|
|
// 系列类型: 雷达图
|
|||
|
|
itemStyle: { // 折线拐点标志的样式。
|
|||
|
|
|
|||
|
|
normal: { // 普通状态时的样式
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 2,
|
|||
|
|
color: '#3F9AFF',
|
|||
|
|
},
|
|||
|
|
opacity: 1
|
|||
|
|
},
|
|||
|
|
emphasis: { // 高亮时的样式
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 0,
|
|||
|
|
color: '#60abff',
|
|||
|
|
},
|
|||
|
|
opacity: 1
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
// { // 雷达图的数据是多变量（维度）的
|
|||
|
|
// name: '',
|
|||
|
|
// // 数据项名称
|
|||
|
|
// value: [100, 100, 100, 100, 100],
|
|||
|
|
// // 其中的value项数组是具体的数据，每个值跟 radar.indicator 一一对应。
|
|||
|
|
// symbol: 'circle',
|
|||
|
|
// // 单个数据标记的图形。
|
|||
|
|
// symbolSize: 0,
|
|||
|
|
// // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
|
|||
|
|
// // label: { // 单个拐点文本的样式设置
|
|||
|
|
// // normal: {
|
|||
|
|
// // show: false,
|
|||
|
|
// // // 单个拐点文本的样式设置。[ default: false ]
|
|||
|
|
// // position: 'top',
|
|||
|
|
// // // 标签的位置。[ default: top ]
|
|||
|
|
// // distance: 5,
|
|||
|
|
// // // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
|
|||
|
|
// // color: '#d1f7ff',
|
|||
|
|
// // // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
|
|||
|
|
// // fontSize: 14,
|
|||
|
|
// // // 文字的字体大小
|
|||
|
|
// // formatter: function(params) {
|
|||
|
|
// // return params.value;
|
|||
|
|
// // }
|
|||
|
|
// // }
|
|||
|
|
// // },
|
|||
|
|
// itemStyle: { // 单个拐点标志的样式设置。
|
|||
|
|
// normal: {
|
|||
|
|
// borderColor: '#d1f7ff',
|
|||
|
|
// // 拐点的描边颜色。[ default: '#000' ]
|
|||
|
|
// borderWidth: 0,
|
|||
|
|
// // 拐点的描边宽度，默认不描边。[ default: 0 ]
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// },
|
|||
|
|
// lineStyle: { // 单项线条样式。
|
|||
|
|
// normal: {
|
|||
|
|
// opacity: 0.5,// 图形透明度
|
|||
|
|
// width: 2,
|
|||
|
|
// color: '#d1f7ff',
|
|||
|
|
// },
|
|||
|
|
// emphasis: { // 高亮时的样式
|
|||
|
|
// width: 2,
|
|||
|
|
// color: '#d1f7ff',
|
|||
|
|
// opacity: 1
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
// areaStyle: { // 单项区域填充样式
|
|||
|
|
// normal: {
|
|||
|
|
// color: '#d1f7ff' // 填充的颜色。[ default: "#000" ]
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
{
|
|||
|
|
name: '',
|
|||
|
|
value: [Number(_this.grammaticalScore).toFixed(1) * 10, Number(_this.grammaticalScore).toFixed(1) * 10, Number(_this.vocabularyScore).toFixed(1) * 10, Number(_this.pronounceScore).toFixed(1) * 10, Number(_this.fluencyScore).toFixed(1) * 10],
|
|||
|
|
symbol: 'circle',
|
|||
|
|
symbolSize: 0,
|
|||
|
|
// label: {
|
|||
|
|
// normal: {
|
|||
|
|
// show: false,
|
|||
|
|
// position: 'top',
|
|||
|
|
// distance: 5,
|
|||
|
|
// color: '#95c6fd',
|
|||
|
|
// fontSize: 14,
|
|||
|
|
// formatter: function(params) {
|
|||
|
|
// return params.value;
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
borderColor: '##3F9AFF',
|
|||
|
|
borderWidth: 0,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
opacity: 0.5,
|
|||
|
|
width: 2,
|
|||
|
|
color: '#2D7CE6',
|
|||
|
|
},
|
|||
|
|
emphasis: { // 高亮时的样式
|
|||
|
|
width: 2,
|
|||
|
|
color: '#2D7CE6',
|
|||
|
|
opacity: 1
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
areaStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#2D7CE6'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
const chart = await this.$refs.chart.init(echarts);
|
|||
|
|
chart.setOption(option)
|
|||
|
|
//return chart
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changedata() {
|
|||
|
|
this.sdydata = [];
|
|||
|
|
|
|||
|
|
for (let i = 0; i < 10; i++) {
|
|||
|
|
const isStudy = Math.random() < 0.5;
|
|||
|
|
let totalNum = "0";
|
|||
|
|
let alreadyNum = "0";
|
|||
|
|
|
|||
|
|
if (isStudy) {
|
|||
|
|
totalNum = String(Math.floor(Math.random() * 100));
|
|||
|
|
alreadyNum = String(Math.floor(Math.random() * (parseInt(totalNum) + 1)));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.sdydata.push({
|
|||
|
|
isStudy,
|
|||
|
|
totalNum,
|
|||
|
|
alreadyNum,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for (let i = 0; i < this.sdydata.length; i++) {
|
|||
|
|
const item = this.sdydata[i];
|
|||
|
|
if (item.isStudy) {
|
|||
|
|
const percentage = (parseInt(item.alreadyNum) / parseInt(item.totalNum)) * 100;
|
|||
|
|
const color = this.getColorByPercentage(percentage);
|
|||
|
|
item.background = color;
|
|||
|
|
} else {
|
|||
|
|
item.background = '#F6F6F6';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log(this.sdydata, 'this.sdydata');
|
|||
|
|
},
|
|||
|
|
getColorByPercentage(percentage) {
|
|||
|
|
// 将百分比转换为透明度
|
|||
|
|
const alpha = percentage / 100;
|
|||
|
|
|
|||
|
|
// 返回颜色值，使用计算得到的透明度
|
|||
|
|
return `rgba(61, 202, 211, ${alpha})`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
background: #F7F9FC;
|
|||
|
|
padding-bottom: 50rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.pagebox {
|
|||
|
|
|
|||
|
|
width: 750rpx;
|
|||
|
|
|
|||
|
|
.topbox {
|
|||
|
|
// display: flex;
|
|||
|
|
// flex-wrap: wrap;
|
|||
|
|
padding: 0 32rpx;
|
|||
|
|
width: 750rpx;
|
|||
|
|
height: 1345.92rpx;
|
|||
|
|
background-image: url("https://file.langsi.online/yasiimg/web/static/uBHiWpVS8LQdX241DdjX");
|
|||
|
|
background-size: cover;
|
|||
|
|
background-position: center;
|
|||
|
|
|
|||
|
|
.echarts {
|
|||
|
|
margin-top: 70rpx;
|
|||
|
|
margin-left: auto;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
width: 400rpx;
|
|||
|
|
height: 300rpx;
|
|||
|
|
// background:transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.infobigbox {
|
|||
|
|
width: 686rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.logo {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 20rpx;
|
|||
|
|
top: -342rpx;
|
|||
|
|
width: 220rpx;
|
|||
|
|
height: 485.82rpx;
|
|||
|
|
z-index: 0 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.infobox {
|
|||
|
|
position: relative;
|
|||
|
|
width: 686rpx;
|
|||
|
|
|
|||
|
|
background: rgba(255, 255, 255, 0.7);
|
|||
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|||
|
|
|
|||
|
|
border: 2rpx solid #FFFFFF;
|
|||
|
|
// z-index: 999;
|
|||
|
|
|
|||
|
|
.infobox_top {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
|
|||
|
|
// align-items: center;
|
|||
|
|
.infobox_top_left {
|
|||
|
|
width: 196rpx;
|
|||
|
|
margin-top: 48rpx;
|
|||
|
|
margin-left: 100rpx;
|
|||
|
|
|
|||
|
|
.infobox_top_lefttop {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-family: 'PingFang';
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #2E4975;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.infobox_top_leftbot {
|
|||
|
|
font-size: 76rpx;
|
|||
|
|
font-family: 'PingFang';
|
|||
|
|
font-weight: 800;
|
|||
|
|
color: #2E4975;
|
|||
|
|
margin-top: 12rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.infobox_top_right {
|
|||
|
|
margin-left: 112rpx;
|
|||
|
|
margin-top: 78rpx;
|
|||
|
|
|
|||
|
|
.infobox_top_righttop {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-family:'PingFang','PingFang';
|
|||
|
|
font-weight: 800;
|
|||
|
|
color: #2E4975;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.infobox_top_rightbot {
|
|||
|
|
margin-top: 4rpx;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
font-family:'PingFang','PingFang';
|
|||
|
|
font-weight: 800;
|
|||
|
|
color: #F18F21;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.infobox_bot {
|
|||
|
|
margin-left: 32rpx;
|
|||
|
|
margin-top: 32rpx;
|
|||
|
|
margin-bottom: 32rpx;
|
|||
|
|
width: 622rpx;
|
|||
|
|
height: 126rpx;
|
|||
|
|
background: #F6F6F6;
|
|||
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.infobox_bot_cont {
|
|||
|
|
width: 140rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.infobox_bot_cont_top {
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
font-family:'PingFang','PingFang';
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #2E4975;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.infobox_bot_cont_bot {
|
|||
|
|
margin-top: 8rpx;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
font-family:'PingFang','PingFang';
|
|||
|
|
font-weight: 800;
|
|||
|
|
color: #2E4975;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.study_info_box {
|
|||
|
|
// position: absolute;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
width: 686rpx;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
// height: 365rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|||
|
|
|
|||
|
|
.study_info_top {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.study_info_top_left {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-family:'PingFang','PingFang';
|
|||
|
|
font-weight: 800;
|
|||
|
|
color: #2E4975;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.study_info_top_right {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-family:'PingFang','PingFang';
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: rgba(46, 73, 117, 0.65);
|
|||
|
|
line-height: 38rpx;
|
|||
|
|
|
|||
|
|
.icon-arow_down {
|
|||
|
|
margin-left: 8rpx;
|
|||
|
|
font-size: 16rpx;
|
|||
|
|
color: #2E4975;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.study_info_cont_box {
|
|||
|
|
margin-top: 32rpx;
|
|||
|
|
display: flex;
|
|||
|
|
// flex-wrap: warp;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
|
|||
|
|
.study_info_cont {
|
|||
|
|
margin-top: 4rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
align-content: center;
|
|||
|
|
|
|||
|
|
// justify-content: space-between;
|
|||
|
|
.data {
|
|||
|
|
width: 40rpx;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
font-family:'PingFang','PingFang';
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #2E4975;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.study_box {
|
|||
|
|
margin-left: 12rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.study {
|
|||
|
|
margin-right: 2rpx;
|
|||
|
|
width: 57.4rpx;
|
|||
|
|
height: 32.41rpx;
|
|||
|
|
background: #F6F6F6;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.work_info {
|
|||
|
|
|
|||
|
|
margin-top: 40rpx;
|
|||
|
|
padding: 0 32rpx;
|
|||
|
|
|
|||
|
|
.work_info_top {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.work_info_top_text {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-family:'PingFang','PingFang';
|
|||
|
|
font-weight: 800;
|
|||
|
|
color: #2E4975;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.work_info_top_right {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-family:'PingFang','PingFang';
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: rgba(7, 47, 90, 0.6);
|
|||
|
|
|
|||
|
|
.icon-arow_down {
|
|||
|
|
margin-left: 8rpx;
|
|||
|
|
font-size: 16rpx;
|
|||
|
|
color: #2E4975;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.work_card {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
width: 686rpx;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|||
|
|
|
|||
|
|
border-left: 8rpx solid #F18F21;
|
|||
|
|
|
|||
|
|
.work_card_top {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.work_card_top_left {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-family:'PingFang','PingFang';
|
|||
|
|
font-weight: 800;
|
|||
|
|
color: #2E4975;
|
|||
|
|
|
|||
|
|
.work_card_top_left_img {
|
|||
|
|
margin-right: 8rpx;
|
|||
|
|
width: 38rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.work_card_top_right {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-family:'PingFang','PingFang';
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #F18F21;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.act2 {
|
|||
|
|
color: #2D7CE6;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.work_card_cont_box {
|
|||
|
|
margin-top: 16rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
background: #F9F9F9;
|
|||
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|||
|
|
|
|||
|
|
.work_card_cont:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.work_card_cont {
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.work_card_cont_point {
|
|||
|
|
width: 8rpx;
|
|||
|
|
height: 8rpx;
|
|||
|
|
background: #2E4975;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.work_card_cont_text {
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-family:'PingFang','PingFang';
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #2E4975;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.work_card_cont_tag {
|
|||
|
|
margin-left: 30rpx;
|
|||
|
|
padding: 8rpx 18rpx;
|
|||
|
|
background: #FFF2E4;
|
|||
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
font-family:'PingFang','PingFang';
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #F18F21;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.work_card_info_box {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
margin-top: 22rpx;
|
|||
|
|
|
|||
|
|
.work_card_info_top {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 100%;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
font-family:'PingFang','PingFang';
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: rgba(46, 73, 117, 0.6);
|
|||
|
|
|
|||
|
|
.work_card_info_topimg {
|
|||
|
|
margin-right: 8rpx;
|
|||
|
|
width: 18.74rpx;
|
|||
|
|
height: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.work_card_info_bot {
|
|||
|
|
margin-top: 4rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-family:'PingFang','PingFang';
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #2E4975;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.act1 {
|
|||
|
|
border-left: 8rpx solid #2D7CE6;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}</style>
|