Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 18449c52 by wangdongchen
Options

Merge branch 'wdc' into '20210819' 

Wdc

See merge request vue-project/liangXing/frontEnd!32
parents f2ead030 dcf43fe8
Showing with 587 additions and 252 deletions
src/components/echarts/BarPillarChart.vue 0 → 100644
<template>
<chart-el :chartOpt="chartConf" />
</template>
<script>
import mixinChart from 'runner/common/mixins/mixinChart'
export default {
name: 'BarPillarChart',
mixins: [mixinChart],
data () {
return {
chartConf: {}
}
},
props: {
// 图表布局配置 - width, height
layout: {
type: Object,
default () {
return {
width: '100%',
height: '136px'
}
}
},
// 图表配置
option: {
type: Object,
default () {
return {
base: {},
seriesData: []
}
}
}
},
mounted () {
this.initComponents()
},
methods: {
initComponents () {
const { width = '100%', height = '90px' } = this.layout
const option = this.getChartOption() || {}
this.chartConf = {
width,
height,
option
}
},
/**
* @method getSeriesData 图表数据
*/
getSeriesData () {
const defSeriesOpts = {
type: 'bar',
barWidth: '7px',
itemStyle: {
borderRadius: [3, 3, 0, 0],
color: {
// 图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#24E8FF'
},
{
offset: 1,
color: '#00BEFF'
}
]
}
},
label: {
show: false
},
data: []
}
let result = [defSeriesOpts]
const { seriesData = [] } = this.option
if (seriesData.length) {
const temp = []
seriesData.forEach(item => {
temp.push(this.deepMerge({}, defSeriesOpts, item))
})
result = temp
}
return result
},
/**
* @method getSeriesData 图表数据
*/
getChartOption () {
const defaultOption = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
title: {
show: false
},
grid: {
left: 0,
right: 0,
bottom: 10,
top: 10,
containLabel: true
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
interval: 0,
show: true,
fontSize: 14,
color: '#469CCC'
},
data: []
},
yAxis: [
{
type: 'value',
max: 'dataMax',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
axisLabel: {
color: '#469CCC',
fontSize: 14,
fontFamily: 'CenturyGothic',
formatter: '{value}%'
}
}
]
}
// 添加series
const result = this.deepMerge({}, defaultOption, this.option.base)
result.series = this.getSeriesData()
return result
}
}
}
</script>
src/components/echarts/BarStacked.vue 0 → 100644
<template>
<chart-el :chartOpt="chartConf" />
</template>
<script>
import mixinChart from 'runner/common/mixins/mixinChart'
export default {
name: 'BarStacked',
mixins: [mixinChart],
data () {
return {
chartConf: {}
}
},
props: {
// 图表布局配置 - width, height
layout: {
type: Object,
default () {
return {
width: '100%',
height: '31px'
}
}
},
// 图表配置
option: {
type: Object,
default () {
return {
base: {},
seriesData: []
}
}
}
},
mounted () {
this.initComponents()
},
methods: {
initComponents () {
const { width = '100%', height = '90px' } = this.layout
const option = this.getChartOption() || {}
this.chartConf = {
width,
height,
option
}
},
/**
* @method getSeriesData 图表数据
*/
getSeriesData () {
const defSeriesOpts = {
type: 'bar',
barWidth: '25px',
stack: 'Tik Tok',
itemStyle: {
borderRadius: [4, 4, 4, 4],
color: {
// 图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#24E8FF'
},
{
offset: 1,
color: '#00BEFF'
}
]
}
},
label: {
show: true,
position: 'insideRight',
offset: [-40, 2],
formatter: function (params) {
return '{a|' + params.data.name + '}{b|' + params.data.value + params.data.unit + '}'
},
rich: {
a: {
color: '#fff',
align: 'center',
fontSize: 14,
fontFamily: 'Microsoft YaHei',
fontWeight: '400'
},
b: {
color: '#fff',
align: 'center',
fontSize: 24,
fontFamily: 'Century Gothic',
fontWeight: '400'
}
}
},
data: []
}
let result = [defSeriesOpts]
const { seriesData = [] } = this.option
if (seriesData.length) {
const temp = []
seriesData.forEach(item => {
temp.push(this.deepMerge({}, defSeriesOpts, item))
})
result = temp
}
return result
},
/**
* @method getSeriesData 图表数据
*/
getChartOption () {
const defaultOption = {
title: {
show: false
},
grid: {
left: 0,
right: 0,
bottom: 0,
top: 0,
containLabel: true
},
xAxis: {
type: 'value',
max: 'dataMax',
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: [
{
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
color: '#ffffff',
fontSize: 14,
fontFamily: 'CenturyGothic'
},
data: []
}
]
}
// 添加series
const result = this.deepMerge({}, defaultOption, this.option.base)
result.series = this.getSeriesData()
return result
}
}
}
</script>
src/components/echarts/GuagePart.vue 0 → 100644
<template>
<chart-el :chartOpt="chartConf" />
</template>
<script>
import mixinChart from 'runner/common/mixins/mixinChart'
export default {
name: 'GuagePart',
mixins: [mixinChart],
data () {
return {
chartConf: {}
}
},
props: {
// 图表布局配置 - width, height
layout: {
type: Object,
default () {
return {
width: '100%',
height: '95px'
}
}
},
// 图表配置
option: {
type: Object,
default () {
return {
base: {},
seriesData: []
}
}
}
},
mounted () {
this.initComponents()
},
methods: {
initComponents () {
const { width = '', height = '' } = this.layout
const option = this.getChartOption() || {}
this.chartConf = {
width,
height,
option
}
},
/**
* @method getSeriesData 图表数据
*/
getSeriesData () {
const defSeriesOpts = [{
// ================== series ==================
seriesName: 'main',
type: 'gauge',
radius: '100%',
clockwise: false,
startAngle: 0,
endAngle: -270,
progress: {
show: true,
width: 7,
itemStyle: {
color: '#3EB8F7'
}
},
axisLine: {
show: true,
lineStyle: {
width: 10,
color: [[1, '#13293C']]
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
pointer: {
show: false
},
anchor: {
show: false
},
title: {
show: true,
fontSize: 18,
fontFamily: 'CenturyGothic',
color: '#ffffff',
fontWeight: '400',
offsetCenter: [0, '30%']
},
detail: {
valueAnimation: true,
formatter: function (value) {
return value
},
fontSize: 30,
fontWeight: '400',
color: '#ffffff',
fontFamily: 'MicrosoftYaHei',
offsetCenter: [0, '-20%']
},
data: []
}]
// ================= 以下无需改动 ==================
// 该模板适用于series内部的多个图表配置差异较大的情况，传入的series对象会与组件中seriesName相同的对象进行合并，如无相同seriesName则添加到末尾
const result = defSeriesOpts
const { seriesData = [] } = this.option
if (seriesData.length) {
const filterData = seriesData.filter(v => this.utils.isObject(v)) || []
for (let i = 0, len = filterData.length; i < len; i++) {
const item = filterData[i] || {}
const matchIndex = defSeriesOpts.findIndex(g => g.seriesName === item.seriesName)
if (matchIndex > -1) {
const newTempSeriesObj = this.deepMerge({}, result[matchIndex], item)
result[matchIndex] = newTempSeriesObj
} else {
// 新增的series必须配置`type`属性
item.type && result.push(item)
}
}
}
return result
},
/**
* @method getSeriesData 图表数据
*/
getChartOption () {
const defaultOption = {
// ================== 除series外的其他所有option ==================
}
// ================== 以下无需改动 ==================
// 添加series
const result = this.deepMerge({}, defaultOption, this.option.base || {})
result.series = this.getSeriesData()
return result
}
}
}
</script>
src/pages/index/Right.vue
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="faculty"> <div class="faculty">
<div class="teachernum"> <div class="teachernum">
<div class="minTitle">师资力量</div> <div class="minTitle">师资力量</div>
<pie-chart :option="eduConfig.option" /> <guage-part style="margin-top: 20px" :option="eduConfig.option" />
</div> </div>
<div class="staff"> <div class="staff">
<bar-chart :option="staffConfig.option" /> <bar-chart :option="staffConfig.option" />
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</span> </span>
</p> </p>
<div class="line"> <div class="line">
<bar-chart :layout="lineConfig.layout" :option="lineConfig.option" /> <bar-stacked :option="lineConfig.option" />
</div> </div>
</div> </div>
<popup-frame :visible.sync="visible" @beforeClose="closePopup"> <popup-frame :visible.sync="visible" @beforeClose="closePopup">
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<!-- 学习内容 --> <!-- 学习内容 -->
<div class="learnContent"> <div class="learnContent">
<div class="minTitle">学习内容</div> <div class="minTitle">学习内容</div>
<bar-chart style="margin-top:13px" :layout="learnConfig.layout" :option="learnConfig.option" /> <bar-pillar-chart style="margin-top:13px" :option="learnConfig.option" />
</div> </div>
<!-- 活动开展 --> <!-- 活动开展 -->
<div class='activ'> <div class='activ'>
...@@ -158,7 +158,9 @@ import TitleLine from 'components/TitleLine' ...@@ -158,7 +158,9 @@ import TitleLine from 'components/TitleLine'
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css' import 'swiper/dist/css/swiper.css'
import BarChart from 'components/echarts/BarChart.vue' import BarChart from 'components/echarts/BarChart.vue'
import PieChart from 'components/echarts/PieChart.vue' import BarStacked from 'components/echarts/BarStacked.vue'
import BarPillarChart from 'components/echarts/BarPillarChart.vue'
import GuagePart from 'components/echarts/GuagePart.vue'
import LineBar from 'components/echarts/LineBar' import LineBar from 'components/echarts/LineBar'
export default { export default {
...@@ -166,7 +168,9 @@ export default { ...@@ -166,7 +168,9 @@ export default {
components: { components: {
TitleLine, TitleLine,
BarChart, BarChart,
PieChart, BarPillarChart,
BarStacked,
GuagePart,
swiper, swiper,
swiperSlide, swiperSlide,
LineBar LineBar
...@@ -186,7 +190,7 @@ export default { ...@@ -186,7 +190,7 @@ export default {
showVisible: false, showVisible: false,
// 师资力量 // 师资力量
eduConfig: {}, eduConfig: {},
edu: null, edu: [],
staffConfig: {}, staffConfig: {},
staff: [], staff: [],
// 教学课程 // 教学课程
...@@ -231,35 +235,44 @@ export default { ...@@ -231,35 +235,44 @@ export default {
} }
}, },
mounted () { mounted () {
this.getstaff() this.init()
this.getEdudata()
this.getcoursedata()
this.getlinedata()
this.getline()
this.getlearn()
this.getActiveList() this.getActiveList()
this.getActive() this.getActive()
}, },
methods: { methods: {
init () {
const {
staff,
coursedata,
line,
learn
} = this.rightData
this.getstaff(staff)
this.getEdudata()
this.getcoursedata(coursedata)
this.getlinedata(line)
this.getlearn(learn)
},
// 师资力量 // 师资力量
getstaff () { getstaff (Data) {
this.staffConfig = { this.staffConfig = {
option: { option: {
seriesData: [ seriesData: [
{ {
data: this.rightData.staff.list.map(item => item.value).reverse() data: Data.list.map(item => item.value).reverse()
} }
], ],
base: { base: {
yAxis: [{ yAxis: [{
data: this.rightData.staff.list.map(item => item.key).reverse() data: Data.list.map(item => item.key).reverse()
}] }]
} }
} }
} }
}, },
getEdudata () { getEdudata (staff) {
const num = this.rightData.staff.list.map(item => { const edus = this.rightData.staff.list || []
const num = edus.map(item => {
return item.value return item.value
}) })
function sum (arr) { function sum (arr) {
...@@ -269,308 +282,109 @@ export default { ...@@ -269,308 +282,109 @@ export default {
}) })
return s return s
} }
this.edu = sum(num) const max = sum(num)
this.edu = [
{
value: max,
name: '教师数'
}
]
this.getEdu() this.getEdu()
}, },
getEdu () { getEdu () {
this.eduConfig = { this.eduConfig = {
option: { option: {
base: {
color: [],
legend: {
show: false
}
},
seriesData: [ seriesData: [
{ {
type: 'pie', seriesName: 'main',
name: '师资力量', data: this.edu
itemStyle: {
shadowBlur: 0,
shadowColor: '#3EB8F7'
},
label: {
show: false
},
labelLine: {
show: false
},
clockWise: false,
hoverAnimation: false,
center: ['38%', '50%'],
radius: ['65%', '78%'],
data: [
{
value: this.edu,
label: {
rich: {
a: {
color: '#fff',
align: 'center',
fontSize: 30,
fontWeight: '400'
},
b: {
color: '#fff',
align: 'center',
fontWeight: '400',
fontSize: 18
}
},
formatter: function (params) {
return '{a|' + params.value + '}\n{b|教师数}'
},
position: 'center',
show: true
},
itemStyle: {
color: '#3EB8F7',
shadowColor: '#2c6cc4',
shadowBlur: 0
}
}, {
value: this.edu / 2 + 20,
name: 'invisible',
itemStyle: {
color: 'rgba(0, 12, 27)'
}
}
]
} }
] ]
} }
} }
}, },
getcoursedata () { getcoursedata (data) {
this.coursedata = this.rightData.coursedata.list || [] this.coursedata = data.list || []
}, },
getlinedata () { getlinedata (data) {
this.line = this.rightData.line.list.map(item => { this.line = this.rightData.line.list.map(item => {
return { return {
name: item.key, name: item.key,
value: item.value value: item.value,
unit: item.unit
} }
}) || [] }) || []
}, this.getline()
// 教学课程更多
Seemore () {
this.visible = true
},
// 教学课程更多关闭
closePopup (flag) {
this.visible = flag
}, },
// 教学课程百分比 // 教学课程百分比
getline () { getline () {
this.lineConfig = { this.lineConfig = {
layout: {
width: '100%',
height: '31px'
},
option: { option: {
base: {
grid: {
left: 0,
right: 0,
bottom: 0,
top: 0,
containLabel: true
}
},
seriesData: [ seriesData: [
{ {
name: 'A',
type: 'bar',
stack: 'Tik Tok',
barWidth: 25,
itemStyle: { itemStyle: {
color: 'rgba(0, 190, 255, .3)', color: 'rgba(0, 190, 255, .3)',
shadowOffsetY: 0, borderRadius: [5, 0, 0, 5]
shadowOffsetX: 0,
barBorderRadius: [5, 0, 0, 5]
},
label: {
show: true,
position: 'insideRight',
offset: [-40, 2],
formatter: function (params) {
return '{a|' + params.name + '}{b|' + params.value + '%}'
},
rich: {
a: {
color: '#fff',
align: 'center',
fontSize: 14,
fontFamily: 'Microsoft YaHei',
fontWeight: '400'
},
b: {
color: '#fff',
align: 'center',
fontSize: 24,
fontFamily: 'Century Gothic',
fontWeight: '400'
}
}
}, },
data: [this.line[0]] data: [this.line[0]]
}, },
{ {
name: 'B',
type: 'bar',
stack: 'Tik Tok',
barWidth: 25,
itemStyle: { itemStyle: {
color: 'rgba(0, 222, 125, .3)', color: 'rgba(0, 222, 125, .3)',
shadowOffsetY: 0,
shadowOffsetX: 0,
barBorderRadius: [0, 5, 5, 0] barBorderRadius: [0, 5, 5, 0]
}, },
label: {
show: true,
position: 'insideRight',
offset: [-40, 2],
formatter: function (params) {
return '{a|' + params.name + '}{b|' + params.value + '%}'
},
rich: {
a: {
color: '#fff',
align: 'center',
fontSize: 14,
fontFamily: 'Microsoft YaHei',
fontWeight: '400'
},
b: {
color: '#fff',
align: 'center',
fontSize: 24,
fontFamily: 'Century Gothic',
fontWeight: '400'
}
}
},
data: [this.line[1]] data: [this.line[1]]
} }
] ]
} }
} }
}, },
// 教学课程更多
Seemore () {
this.visible = true
},
// 教学课程更多关闭
closePopup (flag) {
this.visible = flag
},
// 学习内容 // 学习内容
getlearn () { getlearn (data) {
const xData = this.rightData.learn.data.list.map(v => v.key) const learn = data.data.list || []
const Data = this.rightData.learn.data.list.map(v => v.value) const xData = learn.map(v => v.key)
const Data = learn.map(v => v.value)
const max = Math.max.apply(null, Data) const max = Math.max.apply(null, Data)
const maxdata = this.rightData.learn.data.list.map(v => { const maxdata = learn.map(v => {
return ((v.value / max) * 100).toFixed(2) return ((v.value / max) * 100).toFixed(2)
}) })
const data = this.rightData.learn.data.list
this.learnConfig = { this.learnConfig = {
layout: {
width: '100%',
height: '136px'
},
option: { option: {
base: { base: {
tooltip: { tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
},
textStyle: { textStyle: {
color: '#ffffff' color: '#ffffff'
}, },
formatter: function (params) { formatter: function (params) {
let str let str
data.forEach((item, l) => { learn.forEach((item, l) => {
if (item.key === params[0].name) { if (item.key === params[0].name) {
str = '<span style=' + 'font-size: 13px;font-family: Century Gothic;font-weight: 400;color: #FFFFFF;' + '>' + item.value + item.unit + '</span><br/><span style=' + 'font-size: 12px;font-family: Microsoft YaHei;font-weight: 400;color: #B8E6FF;' + '>' + params[0].name + '</span>' str = '<span style="display:inline-block;width: 6px;height: 6px;background: linear-gradient(0deg, #1B5BAC 0%, #3680F6 0%, #4BBCF9 100%);border-radius: 50%;" /></span>' +
'<span style="padding-left:5px;font-size: 13px;font-family: Century Gothic;font-weight: 400;color: #FFFFFF">' +
item.value + item.unit +
'</span><br/><span style="font-size: 12px;font-family: Microsoft YaHei;font-weight: 400;color: #B8E6FF;">' +
params[0].name + '</span>'
} }
}) })
return str return str
}, },
backgroundColor: 'rgba(55, 128, 246, 0.2)', backgroundColor: 'rgba(55, 128, 246, 0.2)',
borderColor: 'rgba(55, 128, 246, 0.2)' borderColor: 'rgba(55, 128, 246, 0.2)'
}, },
grid: {
left: 0,
right: 0,
bottom: 0,
top: 10,
containLabel: true
},
xAxis: { xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
splitLine: {
show: false
},
axisLabel: {
interval: 0,
show: true,
fontSize: 14,
color: '#469CCC'
},
data: xData data: xData
}, }
yAxis: [{
type: 'value',
max: this.rightData.learn.yMaxValue,
min: this.rightData.learn.yMinValue,
axisLine: {
show: true,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
axisTick: {
show: false
},
axisLabel: {
formatter: '{value}%',
fontSize: 14,
fontFamily: 'Century Gothic',
fontWeight: 400,
color: '#469CCC'
},
boundaryGap: ['20%', '20%']
}]
}, },
seriesData: [ seriesData: [
{ {
type: 'bar',
barWidth: 6,
itemStyle: {
color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: '#24E8FF'
},
{
offset: 0,
color: '#00BEFf'
}
]),
barBorderRadius: [3, 3, 0, 0]
},
label: {
show: false
},
data: maxdata data: maxdata
} }
] ]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment