Skip to content

P
pica.cloud.web-education-admin
提交 f21950d2 编写于 作者: zhentian.jia's avatar zhentian.jia
浏览文件
操作

echarts初始化 响应式自适应问题

上级 ad48b0ef
隐藏空白字符变更
内嵌 并排
正在显示 包含 284 行增加 和 172 行删除
src/utils/operation.js
浏览文件 @ f21950d2
...@@ -291,10 +291,10 @@ export function getRegionOption() { ...@@ -291,10 +291,10 @@ export function getRegionOption() {
}]; }];
return option; return option;
} }
export function getPicOption(legendData, colorData, seriesData) { export function getPicOption(title,legendData, colorData, seriesData) {
let option = { let option = {
title: { title: {
text: "用户学历发布", text: title,
x: "center" x: "center"
}, },
legend: { legend: {
......
src/views/learning/course-analysis.vue
浏览文件 @ f21950d2
...@@ -54,40 +54,49 @@ let vm = null; ...@@ -54,40 +54,49 @@ let vm = null;
export default { export default {
props: { props: {
formInline: { formInline: {
type: Object type: Object
}, },
activeName: {
type: String
}
}, },
data() { data() {
return { return {
cardData: [ cardData: [],
{
title: '项目所有课程数',
num: 9,
unit: '门课程',
},{
title: '项目所有课程总时长',
num: 500,
unit: '分钟',
},{
title: '项目人均学习时长',
num: 265,
unit: '分钟',
}
],
tableData: [], tableData: [],
totalRows: 0, totalRows: 0,
} }
}, },
// computed: {
// ...mapGetters([
// "_token",
// ])
// },
created() { created() {
vm = this; vm = this;
this.getCardData();
this.search(); this.search();
}, },
mounted: function() {
this.$on('search',()=>{
console.log(this.formInline);
this.getCardData();
this.search();
})
},
methods: { methods: {
getCardData() {
this.cardData = [
{
title: '项目所有课程数',
num: 9,
unit: '门课程',
},{
title: '项目所有课程总时长',
num: 500,
unit: '分钟',
},{
title: '项目人均学习时长',
num: 265,
unit: '分钟',
}
];
},
search() { search() {
this.tableData = [{ this.tableData = [{
id: 1, id: 1,
......
src/views/learning/crowd-analysis.vue
浏览文件 @ f21950d2
<template> <template>
<div class="crowd-analysis-wrap"> <div class="crowd-analysis-wrap">
<el-radio-group class="crowd-radio" v-model="radio" size="small"> <el-radio-group class="crowd-radio" v-model="radio" size="small" @change="updateRadio">
<el-radio-button label="1">全部用户</el-radio-button> <el-radio-button label="1">全部用户</el-radio-button>
<el-radio-button label="2">参与项目</el-radio-button> <el-radio-button label="2">参与项目</el-radio-button>
<el-radio-button label="3">通过项目</el-radio-button> <el-radio-button label="3">通过项目</el-radio-button>
</el-radio-group> </el-radio-group>
<div class="chart"> <div class="chart">
<div class="item" ref="education"></div> <div class="item" id="education" ref="education"></div>
<div class="item item-right" ref="job"></div> <div class="item item-right" id="job" ref="job"></div>
<div class="item"> <div class="item">
<div class="title">用户性别分布</div> <div class="title">用户性别分布</div>
<div class="sex"> <div class="sex">
<div class="sex-item" v-for="(item , index) in sexData" :key="index"> <div class="sex-item" v-for="(item , index) in sexData" :key="index">
<img class="sex-img" v-bind:src="item.src"> <img class="sex-img" v-bind:src="item.src">
<!-- <img class="sex-img" src="../../assets/image/weman.png"> --> <!-- <img class="sex-img" src="../../assets/image/weman.png"> -->
<p class="sex-type">{{ item.type }}<p> <p class="sex-type">{{ item.type }}</p>
<p></p>
<p class="sex-num">{{ item.num }}</p> <p class="sex-num">{{ item.num }}</p>
</div> </div>
</div> </div>
</div> </div>
<div class="item item-right" ref="age"></div> <div class="item item-right" id="age" ref="age"></div>
</div> </div>
</div> </div>
</template> </template>
...@@ -31,6 +32,7 @@ import { openLoading, closeLoading } from "../../utils/utils"; ...@@ -31,6 +32,7 @@ import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils"; import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation"; import * as operationData from "../../utils/operation";
import echarts from "echarts"; import echarts from "echarts";
import { setTimeout } from "timers";
let vm = null; let vm = null;
export default { export default {
components: { components: {
...@@ -39,42 +41,107 @@ export default { ...@@ -39,42 +41,107 @@ export default {
props: { props: {
formInline: { formInline: {
type: Object type: Object
},
activeName: {
type: String
} }
}, },
data() { data() {
return { return {
radio: 1, radio: 1,
sexData: [{ updateCrowd: false,
src: require('../../assets/image/man.png'), sexData: []
type: '男性',
num: 21715,
},{
src: require('../../assets/image/weman.png'),
type: '女性',
num: 19715,
},{
src: require('../../assets/image/question.png'),
type: '未完善信息',
num: 1715,
}],
}; };
}, },
created() { created() {
vm = this; vm = this;
this.$nextTick(function() { this.$nextTick(function() {
this.educationDivision(); this.search();
this.jobDivision();
this.ageDivision();
}); });
}, },
mounted: function() { mounted: function() {
commonUtil.resizeHeight(); commonUtil.resizeHeight();
//父组件传值
this.$on("search", () => {
this.updateCrowd = true;
this.search();
});
this.$on("init", () => {
this.$nextTick(function() {
this.search();
});
});
if (this.activeName == "second") {
this.updateResize();
}
}, },
methods: { methods: {
educationDivision() { search() {
if (this.activeName == "second") {
this.getEducationData();
this.getJobData();
this.getSexData();
this.getAgeData();
}
},
updateResize() {
this.$nextTick(function() {
let chartEducation = echarts.init(document.getElementById("education"));
let chartJob = echarts.init(document.getElementById("job"));
let chartAge = echarts.init(document.getElementById("age"));
window.onresize = function() {
chartEducation.resize();
chartJob.resize();
chartAge.resize();
};
});
},
updateRadio(value) {
console.log(value);
this.search();
},
//用户学历分布
getEducationData() {
let data = [22, 50, 350, 80, 95];
if (this.updateCrowd == true) {
data = [33, 90, 100, 22, 75];
}
this.educationDivision(data);
},
//用户职务分布
getJobData() {
let data = [27, 70, 65, 50];
this.jobDivision(data);
},
//用户性别分布
getSexData() {
this.sexData = [
{
src: require("../../assets/image/man.png"),
type: "男性",
num: 21715
},
{
src: require("../../assets/image/weman.png"),
type: "女性",
num: 19715
},
{
src: require("../../assets/image/question.png"),
type: "未完善信息",
num: 1715
}
];
},
//用户年龄分布
getAgeData() {
let data = [1000, 25000, 15000, 8000, 7000, 500];
this.ageDivision(data);
},
educationDivision(data) {
let myChart = echarts.init(this.$refs.education); let myChart = echarts.init(this.$refs.education);
let legendData = ["博士", "硕士", "本科", "大专", "大专以下"]; let legendData = ["博士", "硕士", "本科", "大专", "大专以下"];
let colorData = ['#FF9F7F','#FFDB5C', '#E062AE', '#37A2DA', '#67E0E3']; let colorData = ["#FF9F7F", "#FFDB5C", "#E062AE", "#37A2DA", "#67E0E3"];
let seriesData = [ let seriesData = [
{ value: 22, name: "博士" }, { value: 22, name: "博士" },
{ value: 50, name: "硕士" }, { value: 50, name: "硕士" },
...@@ -82,28 +149,51 @@ export default { ...@@ -82,28 +149,51 @@ export default {
{ value: 80, name: "大专" }, { value: 80, name: "大专" },
{ value: 95, name: "大专以下" } { value: 95, name: "大专以下" }
]; ];
let option = operationData.getPicOption(legendData,colorData,seriesData); for (let i = 0; i < data.length; i++) {
seriesData[i].value = data[i];
}
let option = operationData.getPicOption(
"用户学历分布",
legendData,
colorData,
seriesData
);
myChart.setOption(option); myChart.setOption(option);
}, },
jobDivision() { jobDivision(data) {
let myChart = echarts.init(this.$refs.job); let myChart = echarts.init(this.$refs.job);
let legendData = ["医生", "护士", "医护人员", "其他"]; let legendData = ["医生", "护士", "医护人员", "其他"];
let colorData = ['#FF9F7F','#37A2DA', '#67E0E3', '#FFDB5C']; let colorData = ["#FF9F7F", "#37A2DA", "#67E0E3", "#FFDB5C"];
let seriesData = [ let seriesData = [
{ value: 270, name: "医生" }, { value: 270, name: "医生" },
{ value: 70, name: "护士" }, { value: 70, name: "护士" },
{ value: 65, name: "医护人员" }, { value: 65, name: "医护人员" },
{ value: 50, name: "其他" }, { value: 50, name: "其他" }
]; ];
let option = operationData.getPicOption(legendData,colorData,seriesData); for (let i = 0; i < data.length; i++) {
seriesData[i].value = data[i];
}
let option = operationData.getPicOption(
"用户职务分布",
legendData,
colorData,
seriesData
);
myChart.setOption(option); myChart.setOption(option);
}, },
ageDivision() { ageDivision(data) {
let myChart = echarts.init(this.$refs.age); let myChart = echarts.init(this.$refs.age);
let xAxisData = ["16-30", "30-40", "40-50", "50-60",'60以上','未完善信息']; let xAxisData = [
let seriesData = [1000,25000,15000,8000,7000,500]; "16-30",
let option = operationData.getBarOption(xAxisData,seriesData); "30-40",
"40-50",
"50-60",
"60以上",
"未完善信息"
];
let seriesData = data;
let option = operationData.getBarOption(xAxisData, seriesData);
myChart.setOption(option); myChart.setOption(option);
} }
} }
...@@ -123,6 +213,12 @@ export default { ...@@ -123,6 +213,12 @@ export default {
position: relative; position: relative;
left: 50%; left: 50%;
margin-left: -119px; margin-left: -119px;
.is-active {
.el-radio-button__inner {
// background: #fff;
// color: #409EFF;
}
}
} }
.chart { .chart {
position: relative; position: relative;
...@@ -133,8 +229,10 @@ export default { ...@@ -133,8 +229,10 @@ export default {
position: relative; position: relative;
float: left; float: left;
margin-top: 20px; margin-top: 20px;
height: 350px; padding: 0;
width: 48%; width: 48%;
// height: 20vw;
height: 350px;
border: 1px solid #dedede; border: 1px solid #dedede;
.title { .title {
position: relative; position: relative;
...@@ -160,7 +258,7 @@ export default { ...@@ -160,7 +258,7 @@ export default {
text-align: center; text-align: center;
} }
.sex-num { .sex-num {
margin-top: 20px; margin-top: 40px;
font-size: 30px; font-size: 30px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
......
src/views/learning/item-list.vue
浏览文件 @ f21950d2
<template> <template>
<div class="course-analysis-wrap"> <div class="course-analysis-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb> <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="component-content screenSet" id="screenSet"> <div class="component-content screenSet" id="screenSet">
<el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;"> <el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
<el-form ref="formInline" :model="formInline" label-width="75px" style="width:100%;">
<el-col :span="5">
<el-form-item label="选择地区：">
<el-cascader
:options="optionsRegion"
v-model="formInline.region"
@change="handleChange"
></el-cascader>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="选择日期：">
<el-date-picker
v-model="formInline.date"
size="small"
type="daterange"
placeholder="请选择开始时间"
range-separator="~"
value-format="yyyy-MM-dd 00:00:00"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8" style="padding:0;text-align:right;padding-right:15px;">
<el-button type="default" size="small" @click="reset">重置</el-button>
<el-button type="primary" size="small" @click="search" style="margin-left:0;">查询</el-button>
</el-col>
</el-form>
</el-row>
<el-row>
<el-col :span="5">
<el-form ref="formInline" :model="formInline" label-width="75px" style="width:100%;"> <el-form ref="formInline" :model="formInline" label-width="75px" style="width:100%;">
<el-col :span="5"> <el-form-item label="选择机构：">
<el-form-item label="选择地区："> <el-select
<el-cascader size="small"
:options="optionsRegion" v-model="formInline.organization"
v-model="formInline.region" placeholder="请选择发布状态"
@change="handleChange"> @change="changeOrganization"
</el-cascader> >
</el-form-item> <el-option
</el-col> v-for="item in organizationList"
<el-col :span="6"> :key="item.value"
<el-form-item label="选择日期："> :label="item.label"
<el-date-picker :value="item.value"
v-model="formInline.date" ></el-option>
size="small" </el-select>
type="daterange" </el-form-item>
placeholder="请选择开始时间"
range-separator="~"
value-format="yyyy-MM-dd 00:00:00"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8" style="padding:0;text-align:right;padding-right:15px;">
<el-button type="default" size="small" @click="reset">重置</el-button>
<el-button type="primary" size="small" @click="search" style="margin-left:0;">查询</el-button>
</el-col>
</el-form> </el-form>
</el-row> </el-col>
<el-row> </el-row>
<el-col :span="5"> <div class="choose">{{ chooseOrganization }}</div>
<el-form ref="formInline" :model="formInline" label-width="75px" style="width:100%;"> <div class="button-group">
<el-form-item label="选择机构："> <el-button type="default" size="small" @click="exportExcel">导出Excel</el-button>
<el-select size="small" v-model="formInline.organization" placeholder="请选择发布状态" @change="changeOrganization"> <el-button type="default" size="small" @click="update">修改范围</el-button>
<el-option <el-button type="primary" size="small" @click="release">发布报告</el-button>
v-for="item in organizationList" </div>
:key="item.value" <el-tabs v-model="activeName" @tab-click="handleClick">
:label="item.label" <el-tab-pane label="参与情况" name="first"></el-tab-pane>
:value="item.value" <el-tab-pane label="人群分析" name="second">
></el-option> <crowd-analysis ref="childCrowd" :formInline="formInline" :activeName="activeName"></crowd-analysis>
</el-select> </el-tab-pane>
</el-form-item> <el-tab-pane label="课程分析" name="third">
</el-form> <course-analysis ref="childCourse" :formInline="formInline" :activeName="activeName"></course-analysis>
</el-col> </el-tab-pane>
</el-row> <el-tab-pane label="考试分析" name="fourth"></el-tab-pane>
<div class="choose">{{ chooseOrganization }}</div> <el-tab-pane label="学习效果分析" name="fifth"></el-tab-pane>
<div class="button-group"> </el-tabs>
<el-button type="default" size="small" @click="exportExcel">导出Excel</el-button>
<el-button type="default" size="small" @click="update">修改范围</el-button>
<el-button type="primary" size="small" @click="release">发布报告</el-button>
</div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="参与情况" name="first">
</el-tab-pane>
<el-tab-pane label="人群分析" name="second">
<crowd-analysis :formInline="formInline">
</crowd-analysis>
</el-tab-pane>
<el-tab-pane label="课程分析" name="third">
<course-analysis :formInline="formInline">
</course-analysis>
</el-tab-pane>
<el-tab-pane label="考试分析" name="fourth">
</el-tab-pane>
<el-tab-pane label="学习效果分析" name="fifth">
</el-tab-pane>
</el-tabs>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import BreadCrumb from "../../components/breadcrumb.vue"; import BreadCrumb from "../../components/breadcrumb.vue";
import CourseAnalysis from "./course-analysis.vue"; import CourseAnalysis from "./course-analysis.vue";
import CrowdAnalysis from "./crowd-analysis.vue"; import CrowdAnalysis from "./crowd-analysis.vue";
import { create } from "domain"; import { create } from "domain";
import { mapGetters } from 'vuex' import { mapGetters } from "vuex";
import { openLoading, closeLoading } from "../../utils/utils"; import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils"; import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation"; import * as operationData from "../../utils/operation";
...@@ -90,32 +90,33 @@ export default { ...@@ -90,32 +90,33 @@ export default {
}, },
data() { data() {
return { return {
curmbFirst: "学情报告", curmbFirst: "学情报告",
curmbSecond: "项目列表", curmbSecond: "项目列表",
organizationList: [ organizationList: [
{ {
label: '西湖区第二人民医院', label: "西湖区第二人民医院",
value: '1', value: "1"
},
{
label: '杭州市中医院',
value: '2',
}
],
chooseOrganization: '',
optionsRegion: [],
formInline: {
region: [],
date: '',
organization: '',
pageNo: 1,
pageSize: 10,
}, },
activeName: 'second', {
} label: "杭州市中医院",
},computed: { value: "2"
}
],
chooseOrganization: "",
optionsRegion: [],
formInline: {
region: [],
date: "",
organization: "",
pageNo: 1,
pageSize: 10
},
activeName: "third"
};
},
computed: {
...mapGetters([ ...mapGetters([
"_token", "_token"
// "idType", // "idType",
// "masterAdministratorFlag" // "masterAdministratorFlag"
]) ])
...@@ -129,14 +130,19 @@ export default { ...@@ -129,14 +130,19 @@ export default {
}, },
methods: { methods: {
handleClick(tab, event) { handleClick(tab, event) {
console.log(tab, event); //console.log(tab, event);
console.log('activeName',this.activeName);
if(tab.name == "second") {
this.$refs.childCrowd.$emit("init");
}
}, },
handleChange(value) { handleChange(value) {
console.log(value); console.log(value);
}, },
changeOrganization(value) { changeOrganization(value) {
for(let i=0;i<this.organizationList.length;i++) { for (let i = 0; i < this.organizationList.length; i++) {
if(value == this.organizationList[i].value) { if (value == this.organizationList[i].value) {
this.chooseOrganization = this.organizationList[i].label; this.chooseOrganization = this.organizationList[i].label;
} }
} }
...@@ -145,23 +151,22 @@ export default { ...@@ -145,23 +151,22 @@ export default {
this.optionsRegion = operationData.getRegionOption(); this.optionsRegion = operationData.getRegionOption();
}, },
search() { search() {
//console.log(this.formInline,this.activeName);
}, if (this.activeName == "first") {
reset() { } else if (this.activeName == "second") {
this.$refs.childCrowd.$emit("search");
}, } else if (this.activeName == "third") {
exportExcel() { this.$refs.childCourse.$emit("search");
} else if (this.activeName == "fourth") {
}, } else if (this.activeName == "fifth") {
update() { }
},
release() {
}, },
reset() {},
}, exportExcel() {},
} update() {},
release() {}
}
};
</script> </script>
<style lang="scss"> <style lang="scss">
.course-analysis-wrap { .course-analysis-wrap {
...@@ -185,7 +190,7 @@ export default { ...@@ -185,7 +190,7 @@ export default {
margin-bottom: 20px; margin-bottom: 20px;
} }
.el-tabs__item.is-active { .el-tabs__item.is-active {
color: #409EFF; color: #409eff;
} }
} }
} }
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或