Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit d19254af by yuanfeng
Options

update

parent 4ab6a828
Showing with 467 additions and 2 deletions
src/components/echarts/LineChart.vue 0 → 100644
<template>
<chart-el :chartOpt="chartConf" />
</template>
<script>
import mixinChart from 'runner/common/mixins/mixinChart'
export default {
name: 'LineChart',
mixins: [mixinChart],
data () {
return {
chartConf: {}
}
},
props: {
// 图表布局配置 - width, height
layout: {
type: Object,
default () {
return {
width: '100%',
height: '160px'
}
}
},
// 图表配置
option: {
type: Object,
default () {
return {
base: {},
seriesData: []
}
}
}
},
mounted () {
this.initComponents()
},
methods: {
initComponents () {
const { width = '100%', height = '160px' } = this.layout
const option = this.getChartOption() || {}
this.chartConf = {
width,
height,
option
}
},
/**
* @method getSeriesData 图表数据
*/
getSeriesData () {
const defSeriesOpts = {
type: 'line',
symbol: 'circle',
symbolSize: 4,
lineStyle: {
width: 2,
shadowOffsetX: 5,
shadowOffsetY: 3,
shadowBlur: 20
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(36, 139, 255, 0.85)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(0, 190, 255, 0.11)' // 100% 处的颜色
}],
global: false // 缺省为 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 defaultColors = ['#00BEFF', '#00DE7D']
const defaultOption = {
color: defaultColors,
title: {
show: false
},
legend: {
icon: 'circle',
itemWidth: 8,
itemHeight: 8,
top: '-2%',
right: '0%',
itemGap: 40,
textStyle: {
color: '#fff',
fontSize: 14,
fontFamily: 'MicrosoftYaHei'
},
data: []
},
tooltip: {
trigger: 'item',
position: 'top',
padding: [3, 5],
borderColor: '#3EB9FF',
backgroundColor: '#1771B8',
textStyle: {
height: 12,
fontSize: 14,
color: '#fff'
},
formatter (item) {
return item.value
}
},
grid: {
left: 0,
right: 30,
bottom: 0,
top: 20,
containLabel: true
},
xAxis: {
type: 'category',
// 两边留白
boundaryGap: false,
axisTick: {
show: false
},
axisLabel: {
textStyle: {
fontSize: 14,
fontFamily: 'CenturyGothic',
fontWeight: 400,
color: '#469CCC'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#3EB9FF',
opacity: 0.3
}
},
data: []
},
yAxis: {
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#9CBCF9',
opacity: 0.5
}
},
splitLine: {
show: false
},
axisLabel: {
textStyle: {
fontSize: 14,
fontFamily: 'CenturyGothic',
fontWeight: 400,
color: '#469CCC'
}
}
}
}
// 添加series
const result = this.deepMerge({}, defaultOption, this.option.base)
result.series = this.getSeriesData()
return result
}
}
}
</script>
src/pages/index/Left.vue
...@@ -53,6 +53,36 @@ ...@@ -53,6 +53,36 @@
</li> </li>
</ul> </ul>
</div> </div>
<!-- 行业分布 -->
<div class="industry">
<div class="partTitle margin20-10">年龄结构</div>
<bar-chart :option="industryConfig.option" :layout="industryConfig.layout" />
</div>
<!-- 参与度|活跃度 -->
<div class="degree">
<div class="selectTitle">
<span :class="degreeKey === 'participate' ? 'curr' : ''" @click="changeDegree('participate')">参与度</span>
<i> | </i>
<span :class="degreeKey === 'active' ? 'curr' : ''" @click="changeDegree('active')">活跃度</span>
</div>
<line-chart :option="degreeConfig.option" />
</div>
<!-- 学员风采|明星班级 -->
<div class="great">
<div class="selectTitle">
<span :class="greatKey === 0 ? 'curr' : ''" @click="greatKey = 0">学员风采</span>
<i> | </i>
<span :class="greatKey === 1 ? 'curr' : ''" @click="greatKey = 1">明星班级</span>
</div>
<!-- 学员风采 -->
<div class="studentDemeanor" v-if="greatKey === 0">
111
</div>
<!-- 明星班级 -->
<div class="starClass" v-if="greatKey === 1">
222
</div>
</div>
</div> </div>
</template> </template>
...@@ -60,6 +90,7 @@ ...@@ -60,6 +90,7 @@
import TitleLine from '@/components/TitleLine' import TitleLine from '@/components/TitleLine'
import BarChart from '@/components/echarts/BarChart.vue' import BarChart from '@/components/echarts/BarChart.vue'
import PieChart from '@/components/echarts/PieChart.vue' import PieChart from '@/components/echarts/PieChart.vue'
import LineChart from '@/components/echarts/LineChart.vue'
import utils from 'utils' import utils from 'utils'
export default { export default {
name: 'Left', name: 'Left',
...@@ -67,7 +98,8 @@ export default { ...@@ -67,7 +98,8 @@ export default {
components: { components: {
TitleLine, TitleLine,
BarChart, BarChart,
PieChart PieChart,
LineChart
}, },
filters: { filters: {
...@@ -155,7 +187,129 @@ export default { ...@@ -155,7 +187,129 @@ export default {
] ]
}, },
// 分布当前展示数据标识 // 分布当前展示数据标识
distShowKey: 'party' distShowKey: 'party',
// 行业分布
industry: [
{
name: '家电行业',
value: 4172
}, {
name: '电子信息',
value: 892
}, {
name: '机械制造',
value: 8321
}, {
name: '纺织生产',
value: 1892
}, {
name: '生物医药',
value: 1892
}
],
industryConfig: {
layout: {
height: '143px'
}
},
// 参与度活跃度
degree: {
// 参与度
participate: [
{
name: '课程',
value: [
{
name: '0-20%',
value: 100
}, {
name: '21-40%',
value: 180
}, {
name: '41-60%',
value: 310
}, {
name: '61-80%',
value: 380
}, {
name: '81-100%',
value: 489
}
]
}, {
name: '活动',
value: [
{
name: '0-20%',
value: 30
}, {
name: '21-40%',
value: 110
}, {
name: '41-60%',
value: 220
}, {
name: '61-80%',
value: 310
}, {
name: '81-100%',
value: 320
}
]
}
],
// 活跃度
active: [
{
name: '课程',
value: [
{
name: '0-20%',
value: 100
}, {
name: '21-40%',
value: 29
}, {
name: '41-60%',
value: 300
}, {
name: '61-80%',
value: 200
}, {
name: '81-100%',
value: 300
}
]
}, {
name: '活动',
value: [
{
name: '0-20%',
value: 30
}, {
name: '21-40%',
value: 80
}, {
name: '41-60%',
value: 20
}, {
name: '61-80%',
value: 400
}, {
name: '81-100%',
value: 500
}
]
}
]
},
degreeKey: '',
degreeConfig: {},
// 学员风采
studentDemeanor: [],
// 明星班级
starClass: [],
greatKey: 0
} }
}, },
...@@ -163,6 +317,8 @@ export default { ...@@ -163,6 +317,8 @@ export default {
this.init() this.init()
this.getAge() this.getAge()
this.getEdu() this.getEdu()
this.getIndustry()
this.changeDegree('participate')
}, },
methods: { methods: {
...@@ -210,6 +366,81 @@ export default { ...@@ -210,6 +366,81 @@ export default {
// 党派/民族分布 // 党派/民族分布
changeDist (type) { changeDist (type) {
this.distShowKey = type this.distShowKey = type
},
// 行业分布
getIndustry () {
this.industryConfig.option = {
seriesData: [
{
label: {
fontSize: 24,
formatter: item => {
return utils.dealWithNumber(item.value)
}
},
data: this.industry.map(item => item.value).reverse()
}
],
base: {
grid: {
left: 10,
right: 80
},
yAxis: [{
axisLabel: {
color: '#6DCDFF',
fontSize: 16,
padding: [0, 10, 0, 0],
fontFamily: 'Microsoft YaHei'
},
data: this.industry.map(item => item.name).reverse()
}]
}
}
},
// 切换参与度与活跃度
changeDegree (type) {
this.degreeKey = type
const legendData = this.degree[this.degreeKey].map(v => v.name)
const xData = this.degree[this.degreeKey][0].value.map(v => v.name)
const y1Data = this.degree[this.degreeKey][0].value.map(v => v.value)
const y2Data = this.degree[this.degreeKey][1].value.map(v => v.value)
this.degreeConfig = {
option: {
base: {
xAxis: {
data: xData
},
legend: {
data: legendData
}
},
seriesData: [
{
name: this.degree[this.degreeKey][0].name,
data: y1Data
}, {
name: this.degree[this.degreeKey][1].name,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(0, 222, 125, .85)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(0, 190, 255, 0.11)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
data: y2Data
}
]
}
}
} }
} }
} }
...@@ -224,6 +455,9 @@ export default { ...@@ -224,6 +455,9 @@ export default {
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #FFFFFF;
line-height: 18px; line-height: 18px;
&.margin20-10 {
margin: 20px 0 10px;
}
} }
.gender { .gender {
display: flex; display: flex;
...@@ -347,5 +581,29 @@ export default { ...@@ -347,5 +581,29 @@ export default {
} }
} }
} }
.selectTitle {
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 28px;
font-size: 16px;
color: #6DCDFF;
span {
cursor: pointer;
&.curr {
font-size: 18px;
color: #FFFFFF;
}
}
i {
font-size: 18px;
color: #FFFFFF;
}
}
.degree {
margin-top: 10px;
}
.great {
margin-top: 10px;
}
} }
</style> </style>
\ No newline at end of file
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