Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 63662dd4 by wdc147
Options

update

parent 5968f57d
Showing with 588 additions and 254 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 @@
<div class="faculty">
<div class="teachernum">
<div class="minTitle">师资力量</div>
<pie-chart :option="eduConfig.option" />
<guage-part style="margin-top: 20px" :option="eduConfig.option" />
</div>
<div class="staff">
<bar-chart :option="staffConfig.option" />
......@@ -24,7 +24,7 @@
</span>
</p>
<div class="line">
<bar-chart :layout="lineConfig.layout" :option="lineConfig.option" />
<bar-stacked :option="lineConfig.option" />
</div>
</div>
<popup-frame :visible.sync="visible" @beforeClose="closePopup">
......@@ -34,7 +34,7 @@
<!-- 学习内容 -->
<div class="learnContent">
<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 class='activ'>
......@@ -158,7 +158,9 @@ import TitleLine from 'components/TitleLine'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
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 CountRoll from 'components/CountRoll.vue'
// import PopupFrame from './PopupFrame'
......@@ -167,7 +169,9 @@ export default {
components: {
TitleLine,
BarChart,
PieChart,
BarPillarChart,
BarStacked,
GuagePart,
swiper,
swiperSlide,
LineBar,
......@@ -189,7 +193,7 @@ export default {
showVisible: false,
// 师资力量
eduConfig: {},
edu: null,
edu: [],
staffConfig: {},
staff: [],
// 教学课程
......@@ -237,34 +241,43 @@ export default {
}
},
mounted () {
this.getstaff()
this.getEdudata()
this.getcoursedata()
this.getlinedata()
this.getline()
this.getlearn()
this.getActive(this.activeList)
this.init()
},
methods: {
init () {
const {
staff,
coursedata,
line,
learn
} = this.rightData
this.getstaff(staff)
this.getEdudata()
this.getcoursedata(coursedata)
this.getlinedata(line)
this.getlearn(learn)
this.getActive(this.activeList)
},
// 师资力量
getstaff () {
getstaff (Data) {
this.staffConfig = {
option: {
seriesData: [
{
data: this.rightData.staff.list.map(item => item.value).reverse()
data: Data.list.map(item => item.value).reverse()
}
],
base: {
yAxis: [{
data: this.rightData.staff.list.map(item => item.key).reverse()
data: Data.list.map(item => item.key).reverse()
}]
}
}
}
},
getEdudata () {
const num = this.rightData.staff.list.map(item => {
getEdudata (staff) {
const edus = this.rightData.staff.list || []
const num = edus.map(item => {
return item.value
})
function sum (arr) {
......@@ -274,309 +287,109 @@ export default {
})
return s
}
this.edu = sum(num)
const max = sum(num)
this.edu = [
{
value: max,
name: '教师数'
}
]
this.getEdu()
},
getEdu () {
this.eduConfig = {
option: {
base: {
color: [],
legend: {
show: false
}
},
seriesData: [
{
type: 'pie',
name: '师资力量',
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)'
}
}
]
seriesName: 'main',
data: this.edu
}
]
}
}
},
getcoursedata () {
this.coursedata = this.rightData.coursedata.list || []
getcoursedata (data) {
this.coursedata = data.list || []
},
getlinedata () {
getlinedata (data) {
this.line = this.rightData.line.list.map(item => {
return {
name: item.key,
value: item.value
value: item.value,
unit: item.unit
}
}) || []
},
// 教学课程更多
Seemore () {
this.visible = true
},
// 教学课程更多关闭
closePopup (flag) {
this.visible = flag
this.getline()
},
// 教学课程百分比
getline () {
this.lineConfig = {
layout: {
width: '100%',
height: '31px'
},
option: {
base: {
grid: {
left: 0,
right: 0,
bottom: 0,
top: 0,
containLabel: true
}
},
seriesData: [
{
name: 'A',
type: 'bar',
stack: 'Tik Tok',
barWidth: 25,
itemStyle: {
color: 'rgba(0, 190, 255, .3)',
shadowOffsetY: 0,
shadowOffsetX: 0,
barBorderRadius: [5, 0, 0, 5]
},
label: {
show: true,
position: 'insideRight',
offset: [-40, 2],
formatter: function (params) {
console.log(params, '5555')
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'
}
}
borderRadius: [5, 0, 0, 5]
},
data: [this.line[0]]
},
{
name: 'B',
type: 'bar',
stack: 'Tik Tok',
barWidth: 25,
itemStyle: {
color: 'rgba(0, 222, 125, .3)',
shadowOffsetY: 0,
shadowOffsetX: 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]]
}
]
}
}
},
// 教学课程更多
Seemore () {
this.visible = true
},
// 教学课程更多关闭
closePopup (flag) {
this.visible = flag
},
// 学习内容
getlearn () {
const xData = this.rightData.learn.data.list.map(v => v.key)
const Data = this.rightData.learn.data.list.map(v => v.value)
getlearn (data) {
const learn = data.data.list || []
const xData = learn.map(v => v.key)
const Data = learn.map(v => v.value)
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)
})
const data = this.rightData.learn.data.list
this.learnConfig = {
layout: {
width: '100%',
height: '136px'
},
option: {
base: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
},
textStyle: {
color: '#ffffff'
},
formatter: function (params) {
let str
data.forEach((item, l) => {
learn.forEach((item, l) => {
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
},
backgroundColor: '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: {
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
},
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: [
{
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
}
]
......
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