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() {
}];
return option;
}
export function getPicOption(legendData, colorData, seriesData) {
export function getPicOption(title,legendData, colorData, seriesData) {
let option = {
title: {
text: "用户学历发布",
text: title,
x: "center"
},
legend: {
......
src/views/learning/course-analysis.vue
浏览文件 @ f21950d2
......@@ -56,10 +56,32 @@ export default {
formInline: {
type: Object
},
activeName: {
type: String
}
},
data() {
return {
cardData: [
cardData: [],
tableData: [],
totalRows: 0,
}
},
created() {
vm = this;
this.getCardData();
this.search();
},
mounted: function() {
this.$on('search',()=>{
console.log(this.formInline);
this.getCardData();
this.search();
})
},
methods: {
getCardData() {
this.cardData = [
{
title: '项目所有课程数',
num: 9,
......@@ -73,21 +95,8 @@ export default {
num: 265,
unit: '分钟',
}
],
tableData: [],
totalRows: 0,
}
];
},
// computed: {
// ...mapGetters([
// "_token",
// ])
// },
created() {
vm = this;
this.search();
},
methods: {
search() {
this.tableData = [{
id: 1,
......
src/views/learning/crowd-analysis.vue
浏览文件 @ f21950d2
<template>
<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="2">参与项目</el-radio-button>
<el-radio-button label="3">通过项目</el-radio-button>
</el-radio-group>
<div class="chart">
<div class="item" ref="education"></div>
<div class="item item-right" ref="job"></div>
<div class="item" id="education" ref="education"></div>
<div class="item item-right" id="job" ref="job"></div>
<div class="item">
<div class="title">用户性别分布</div>
<div class="sex">
<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" 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>
</div>
</div>
</div>
<div class="item item-right" ref="age"></div>
<div class="item item-right" id="age" ref="age"></div>
</div>
</div>
</template>
......@@ -31,6 +32,7 @@ import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation";
import echarts from "echarts";
import { setTimeout } from "timers";
let vm = null;
export default {
components: {
......@@ -39,42 +41,107 @@ export default {
props: {
formInline: {
type: Object
},
activeName: {
type: String
}
},
data() {
return {
radio: 1,
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,
}],
updateCrowd: false,
sexData: []
};
},
created() {
vm = this;
this.$nextTick(function() {
this.educationDivision();
this.jobDivision();
this.ageDivision();
this.search();
});
},
mounted: function() {
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: {
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 legendData = ["博士", "硕士", "本科", "大专", "大专以下"];
let colorData = ['#FF9F7F','#FFDB5C', '#E062AE', '#37A2DA', '#67E0E3'];
let colorData = ["#FF9F7F", "#FFDB5C", "#E062AE", "#37A2DA", "#67E0E3"];
let seriesData = [
{ value: 22, name: "博士" },
{ value: 50, name: "硕士" },
......@@ -82,27 +149,50 @@ export default {
{ value: 80, 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);
},
jobDivision() {
jobDivision(data) {
let myChart = echarts.init(this.$refs.job);
let legendData = ["医生", "护士", "医护人员", "其他"];
let colorData = ['#FF9F7F','#37A2DA', '#67E0E3', '#FFDB5C'];
let colorData = ["#FF9F7F", "#37A2DA", "#67E0E3", "#FFDB5C"];
let seriesData = [
{ value: 270, name: "医生" },
{ value: 70, 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);
},
ageDivision() {
ageDivision(data) {
let myChart = echarts.init(this.$refs.age);
let xAxisData = ["16-30", "30-40", "40-50", "50-60",'60以上','未完善信息'];
let seriesData = [1000,25000,15000,8000,7000,500];
let option = operationData.getBarOption(xAxisData,seriesData);
let xAxisData = [
"16-30",
"30-40",
"40-50",
"50-60",
"60以上",
"未完善信息"
];
let seriesData = data;
let option = operationData.getBarOption(xAxisData, seriesData);
myChart.setOption(option);
}
......@@ -123,6 +213,12 @@ export default {
position: relative;
left: 50%;
margin-left: -119px;
.is-active {
.el-radio-button__inner {
// background: #fff;
// color: #409EFF;
}
}
}
.chart {
position: relative;
......@@ -133,8 +229,10 @@ export default {
position: relative;
float: left;
margin-top: 20px;
height: 350px;
padding: 0;
width: 48%;
// height: 20vw;
height: 350px;
border: 1px solid #dedede;
.title {
position: relative;
......@@ -160,7 +258,7 @@ export default {
text-align: center;
}
.sex-num {
margin-top: 20px;
margin-top: 40px;
font-size: 30px;
font-weight: bold;
text-align: center;
......
src/views/learning/item-list.vue
浏览文件 @ f21950d2
......@@ -9,8 +9,8 @@
<el-cascader
:options="optionsRegion"
v-model="formInline.region"
@change="handleChange">
</el-cascader>
@change="handleChange"
></el-cascader>
</el-form-item>
</el-col>
<el-col :span="6">
......@@ -35,7 +35,12 @@
<el-col :span="5">
<el-form ref="formInline" :model="formInline" label-width="75px" style="width:100%;">
<el-form-item label="选择机构：">
<el-select size="small" v-model="formInline.organization" placeholder="请选择发布状态" @change="changeOrganization">
<el-select
size="small"
v-model="formInline.organization"
placeholder="请选择发布状态"
@change="changeOrganization"
>
<el-option
v-for="item in organizationList"
:key="item.value"
......@@ -54,20 +59,15 @@
<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="first"></el-tab-pane>
<el-tab-pane label="人群分析" name="second">
<crowd-analysis :formInline="formInline">
</crowd-analysis>
<crowd-analysis ref="childCrowd" :formInline="formInline" :activeName="activeName"></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">
<course-analysis ref="childCourse" :formInline="formInline" :activeName="activeName"></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>
......@@ -77,7 +77,7 @@ import BreadCrumb from "../../components/breadcrumb.vue";
import CourseAnalysis from "./course-analysis.vue";
import CrowdAnalysis from "./crowd-analysis.vue";
import { create } from "domain";
import { mapGetters } from 'vuex'
import { mapGetters } from "vuex";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation";
......@@ -94,28 +94,29 @@ export default {
curmbSecond: "项目列表",
organizationList: [
{
label: '西湖区第二人民医院',
value: '1',
label: "西湖区第二人民医院",
value: "1"
},
{
label: '杭州市中医院',
value: '2',
label: "杭州市中医院",
value: "2"
}
],
chooseOrganization: '',
chooseOrganization: "",
optionsRegion: [],
formInline: {
region: [],
date: '',
organization: '',
date: "",
organization: "",
pageNo: 1,
pageSize: 10,
pageSize: 10
},
activeName: 'second',
}
},computed: {
activeName: "third"
};
},
computed: {
...mapGetters([
"_token",
"_token"
// "idType",
// "masterAdministratorFlag"
])
......@@ -129,14 +130,19 @@ export default {
},
methods: {
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) {
console.log(value);
},
changeOrganization(value) {
for(let i=0;i<this.organizationList.length;i++) {
if(value == this.organizationList[i].value) {
for (let i = 0; i < this.organizationList.length; i++) {
if (value == this.organizationList[i].value) {
this.chooseOrganization = this.organizationList[i].label;
}
}
......@@ -145,23 +151,22 @@ export default {
this.optionsRegion = operationData.getRegionOption();
},
search() {
},
reset() {
},
exportExcel() {
},
update() {
},
release() {
},
//console.log(this.formInline,this.activeName);
if (this.activeName == "first") {
} else if (this.activeName == "second") {
this.$refs.childCrowd.$emit("search");
} else if (this.activeName == "third") {
this.$refs.childCourse.$emit("search");
} else if (this.activeName == "fourth") {
} else if (this.activeName == "fifth") {
}
},
}
reset() {},
exportExcel() {},
update() {},
release() {}
}
};
</script>
<style lang="scss">
.course-analysis-wrap {
......@@ -185,7 +190,7 @@ export default {
margin-bottom: 20px;
}
.el-tabs__item.is-active {
color: #409EFF;
color: #409eff;
}
}
}
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或