jiangyuying
2 years ago
8 changed files with 819 additions and 14 deletions
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,159 @@ |
|||
<template> |
|||
<div class="screenEchartsFrame" |
|||
ref="screenEchartsFrame"></div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from 'echarts' |
|||
export default { |
|||
name: 'screen-echarts-frame', |
|||
data () { |
|||
return { |
|||
myChart: '' |
|||
} |
|||
}, |
|||
props: { |
|||
chartMethod: { |
|||
type: Function |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.initChart() |
|||
window.onresize = () => { |
|||
this.myChart.resize() |
|||
} |
|||
}, |
|||
beforeDestroy () { |
|||
// 销毁echarts实例对象 |
|||
if (this.myChart) this.myChart.dispose() |
|||
}, |
|||
watch: {}, |
|||
methods: { |
|||
initChart () { |
|||
this.$nextTick(() => { |
|||
const dom = this.$refs.screenEchartsFrame |
|||
this.myChart = echarts.init(dom) |
|||
// this.myChart.setOption(this.chartMethod()) |
|||
this.$emit('myChartMethod', this.myChart) |
|||
}) |
|||
}, |
|||
// 配置option |
|||
setOption (option) { |
|||
this.myChart.setOption(option) |
|||
}, |
|||
// 获取option |
|||
getOption () { |
|||
if (this.myChart) { |
|||
return this.myChart.getOption() |
|||
} else { |
|||
return null |
|||
} |
|||
}, |
|||
// |
|||
resize () { |
|||
if (this.myChart) { |
|||
this.myChart.resize() |
|||
} |
|||
}, |
|||
clear () { |
|||
if (this.myChart) { |
|||
this.myChart.clear() |
|||
} |
|||
}, |
|||
showLoading () { |
|||
if (this.myChart) { |
|||
this.$nextTick(() => { |
|||
this.myChart.showLoading({ |
|||
text: '', |
|||
color: '#29cdff', |
|||
textColor: '#29cdff', |
|||
maskColor: 'rgba(255, 255, 255, 0)', |
|||
zlevel: 0 |
|||
}) |
|||
}) |
|||
} |
|||
}, |
|||
hideLoading () { |
|||
if (this.myChart) { |
|||
this.myChart.hideLoading() |
|||
} |
|||
}, |
|||
// 启动动画时使用 |
|||
tooltipAnimate (chart, length) { |
|||
// 清除上一次动画 |
|||
this.timeTicket && clearInterval(this.timeTicket) |
|||
const count = 0 |
|||
// 启动动画 |
|||
this._action(chart, count, length) |
|||
chart && // 移除动画 |
|||
chart.on('mouseover', params => { |
|||
this._cleanAction(chart, params) |
|||
}) |
|||
// 重写启动动画 |
|||
chart && |
|||
chart.on('mouseout', () => { |
|||
this._action(chart, count, length) |
|||
}) |
|||
}, |
|||
// tooltip动画action |
|||
_action (chart, count, length) { |
|||
this.timeTicket && clearInterval(this.timeTicket) |
|||
this.timeTicket = setInterval(() => { |
|||
if (!chart) { |
|||
clearInterval(this.timeTicket) |
|||
return |
|||
} |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'downplay', |
|||
seriesIndex: 0 |
|||
}) |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'highlight', |
|||
seriesIndex: 0, |
|||
dataIndex: count % length |
|||
}) |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'showTip', |
|||
seriesIndex: 0, |
|||
dataIndex: count % length |
|||
}) |
|||
count++ |
|||
}, 1000 * 3) |
|||
}, |
|||
_cleanAction (chart, params) { |
|||
this.timeTicket && clearInterval(this.timeTicket) |
|||
if (!chart) { |
|||
clearInterval(this.timeTicket) |
|||
return |
|||
} |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'downplay', |
|||
seriesIndex: 0 |
|||
}) |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'highlight', |
|||
seriesIndex: 0, |
|||
dataIndex: params.dataIndex |
|||
}) |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'showTip', |
|||
seriesIndex: 0, |
|||
dataIndex: params.dataIndex |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.screenEchartsFrame { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,148 @@ |
|||
.right2 { |
|||
margin-left: 12px; |
|||
} |
|||
.b-dyxf { |
|||
height: 328px; |
|||
|
|||
.dyxf-main { |
|||
position: relative; |
|||
|
|||
.dyxf-pie { |
|||
position: absolute; |
|||
top: 45px; |
|||
left: 15px; |
|||
|
|||
.pie { |
|||
width: 200px; |
|||
height: 180px; |
|||
} |
|||
|
|||
.pie-title { |
|||
font-size: 18px; |
|||
font-family: Alibaba PuHuiTi; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
margin-top: -10px; |
|||
margin-left: 47px; |
|||
} |
|||
} |
|||
|
|||
.dyxf-static { |
|||
position: absolute; |
|||
top: 60px; |
|||
left: 235px; |
|||
|
|||
.dyxf-static-row { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
|
|||
.static-item { |
|||
.item-title { |
|||
font-size: 16px; |
|||
font-family: Alibaba PuHuiTi; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
text-shadow: 0px 2px 4px #004189; |
|||
} |
|||
|
|||
.item-num { |
|||
margin-top: 10px; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
background-image: url('./../assets/icon/dyxf-bg.png'); |
|||
background-size: 100% 100%; |
|||
padding-top: 5px; |
|||
|
|||
.num-left { |
|||
line-height: 30px; |
|||
margin-left: 20px; |
|||
font-size: 24px; |
|||
font-family: Arial; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.num-right { |
|||
margin-bottom: 3px; |
|||
margin-left: 12px; |
|||
font-size: 16px; |
|||
font-family: Arial; |
|||
font-weight: bold; |
|||
color: #ffb10a; |
|||
text-shadow: 0px 2px 4px #004189; |
|||
} |
|||
} |
|||
} |
|||
.item2 { |
|||
margin-left: 25px; |
|||
} |
|||
} |
|||
.row2 { |
|||
margin-top: 30px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.b-dyqz { |
|||
height: 327px; |
|||
|
|||
.dyqz-main { |
|||
.line { |
|||
width: 600px; |
|||
height: 270px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.b-xjph { |
|||
height: 269px; |
|||
|
|||
.table { |
|||
box-sizing: border-box; |
|||
padding: 17px 11px; |
|||
width: 100%; |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
.screen-custom-table { |
|||
::v-deep ul { |
|||
.table-body .scroll-view .table-tr + .table-tr { |
|||
border: none; |
|||
} |
|||
.table-header { |
|||
font-size: 16px; |
|||
font-family: PingFang-SC-Bold; |
|||
} |
|||
.table-body { |
|||
height: 199px; |
|||
.table-tr { |
|||
margin-top: 12px; |
|||
// background-image: url('./../assets/icon/tableTdBg.png'); |
|||
// background-size: 100% 100%; |
|||
} |
|||
// .table-tr:nth-child(2n) { |
|||
// background: rgba(11, 68, 135, 0.1); |
|||
// &:hover { |
|||
// .table-td { |
|||
// color: #fff !important; |
|||
// } |
|||
// } |
|||
// } |
|||
// .table-tr:nth-child(2n + 1) { |
|||
// &:hover { |
|||
// .table-td { |
|||
// color: #fff !important; |
|||
// } |
|||
// } |
|||
// } |
|||
// .table-tr { |
|||
// .table-td:nth-child(2) { |
|||
// white-space: nowrap; |
|||
// overflow: hidden; |
|||
// text-overflow: ellipsis; |
|||
// } |
|||
// } |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,127 @@ |
|||
import * as echarts from 'echarts' |
|||
|
|||
export function lineOption() { |
|||
return { |
|||
color: ['#FFB10A', '#71F3FB'], |
|||
title: { |
|||
// text: 'Gradient Stacked Area Chart'
|
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
label: { |
|||
backgroundColor: '#6a7985' |
|||
} |
|||
} |
|||
}, |
|||
legend: { |
|||
// data: ['党员建群', '党成员'],
|
|||
// color: ['#FFB10A', '#71F3FB'],
|
|||
data: [ |
|||
{ color: '#FFB10A', name: '党成员' }, |
|||
{ color: '#71F3FB', name: '党员建群' } |
|||
], |
|||
icon: 'rect', |
|||
itemWidth: 12, // 长方形宽度
|
|||
itemHeight: 4, // 长方形高度
|
|||
textStyle: { |
|||
color: '#FFFFFF' |
|||
} |
|||
}, |
|||
|
|||
grid: { |
|||
left: '6%', |
|||
right: '6%', |
|||
bottom: '10%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: [ |
|||
'敦化路街道', |
|||
'南宁路街道', |
|||
'洛阳路街道', |
|||
'华阳路街道', |
|||
'黄台路街道' |
|||
], |
|||
offset: 5, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: '#B8D3F1' |
|||
} |
|||
} |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
offset: 5, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: '#B8D3F1' |
|||
} |
|||
} |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
name: '党成员', |
|||
type: 'line', |
|||
|
|||
smooth: true, |
|||
lineStyle: { |
|||
width: 0 |
|||
}, |
|||
showSymbol: false, |
|||
areaStyle: { |
|||
opacity: 0.8, |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ |
|||
offset: 0, |
|||
color: 'rgba(0, 255, 246,1)' |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: 'rgba(0, 210, 255,0.4)' |
|||
} |
|||
]) |
|||
}, |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
data: [120, 282, 111, 234, 220] |
|||
}, |
|||
{ |
|||
name: '党员建群', |
|||
type: 'line', |
|||
|
|||
smooth: false, |
|||
lineStyle: { |
|||
width: 3, |
|||
color: '#ffb10a' |
|||
}, |
|||
showSymbol: false, |
|||
// areaStyle: {
|
|||
// opacity: 0.8,
|
|||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
// {
|
|||
// offset: 0,
|
|||
// color: '#ffb10a'
|
|||
// },
|
|||
// {
|
|||
// offset: 1,
|
|||
// color: '#bf9e58'
|
|||
// }
|
|||
// ])
|
|||
// },
|
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
data: [50, 20, 40, 10, 60] |
|||
} |
|||
] |
|||
} |
|||
} |
|||
@ -0,0 +1,99 @@ |
|||
import * as echarts from 'echarts' |
|||
|
|||
export function pieOption() { |
|||
return { |
|||
title: { |
|||
text: '0', |
|||
top: '42%', |
|||
left: 'center', |
|||
textStyle: { |
|||
width: '100%', |
|||
fontSize: 30, |
|||
fontStyle: 'italic', |
|||
color: '#00E0FB' |
|||
}, |
|||
itemGap: 30 |
|||
}, |
|||
tooltip: { |
|||
show: false |
|||
}, |
|||
|
|||
series: [ |
|||
//外环
|
|||
{ |
|||
type: 'pie', |
|||
// 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
|
|||
startAngle: 0, |
|||
hoverAnimation: false, |
|||
// tooltip: {
|
|||
// },
|
|||
radius: ['70%', '72%'], |
|||
label: { |
|||
normal: { |
|||
show: false |
|||
} |
|||
}, |
|||
labelLine: { |
|||
normal: { |
|||
show: false |
|||
} |
|||
}, |
|||
data: [ |
|||
{ |
|||
value: 360, |
|||
itemStyle: { |
|||
normal: { |
|||
color: echarts.graphic.LinearGradient(0, 0, 1, 1, [ |
|||
{ offset: 0, color: '#C7E9FF' }, |
|||
{ offset: 1, color: '#00354B' } |
|||
]) |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
name: 'Access From', |
|||
type: 'pie', |
|||
radius: ['45%', '60%'], |
|||
startAngle: -90, |
|||
avoidLabelOverlap: false, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
fontSize: 40, |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
data: [ |
|||
{ |
|||
value: 0, |
|||
itemStyle: { |
|||
normal: { |
|||
color: echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#C7E9FF' }, |
|||
{ offset: 1, color: '#3EDAF7 ' } |
|||
]) |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
value: 0, |
|||
itemStyle: { |
|||
normal: { |
|||
color: 'rgba(34, 138, 255, 0.27)' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
} |
|||
@ -1,38 +1,220 @@ |
|||
<template> |
|||
<div class="bg-content right2"> |
|||
<div class='b-dyxfmf'> |
|||
<div class='b-dyxf'> |
|||
<screen-title :titleName="'党员先锋模范'"></screen-title> |
|||
<div class="dyxf-main"> |
|||
<div class="dyxf-pie"> |
|||
<screen-echarts-frame class="pie" |
|||
@myChartMethod="pieInitOk" |
|||
ref="pieChart"></screen-echarts-frame> |
|||
<div class="pie-title">{{'党员参与议题'}}</div> |
|||
</div> |
|||
<div class='b-dylxqz'> |
|||
<div class="dyxf-static"> |
|||
<div class='dyxf-static-row'> |
|||
<div class="static-item"> |
|||
<div class="item-title">{{'党员发布话题'}}</div> |
|||
<div class="item-num"> |
|||
<div class="num-left">{{'53,788'}}</div> |
|||
<div class="num-right">{{'82.21%'}}</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="static-item item2"> |
|||
<div class="item-title">{{'党员发布议题'}}</div> |
|||
<div class="item-num"> |
|||
<div class="num-left">{{'22,024'}}</div> |
|||
<div class="num-right">{{'24.14%'}}</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class='dyxf-static-row row2'> |
|||
<div class="static-item"> |
|||
<div class="item-title">{{'议题转诉求'}}</div> |
|||
<div class="item-num"> |
|||
<div class="num-left">{{'5,302'}}</div> |
|||
<div class="num-right">{{'66.74%'}}</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="static-item item2"> |
|||
<div class="item-title">{{'解决诉求'}}</div> |
|||
<div class="item-num"> |
|||
<div class="num-left">{{'5,136'}}</div> |
|||
<div class="num-right">{{'67.11%'}}</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class='b-dyqz'> |
|||
<screen-title :titleName="'党员联系群众'"></screen-title> |
|||
<div class="dyqz-main"> |
|||
|
|||
<screen-echarts-frame class="line" |
|||
@myChartMethod="lineInitOk" |
|||
ref="lineChart"></screen-echarts-frame> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class='b-xjph'> |
|||
<screen-title :titleName="'先进排行榜单'"></screen-title> |
|||
<div class="table"> |
|||
|
|||
<screen-custom-table :headerColor="'#BDE8FF'" |
|||
:headerHeight="'36px'" |
|||
:bodyTdColor="'#FFFFFF'" |
|||
:bodyTdFontSize="'18px'" |
|||
:tableHeight="104" |
|||
:showTableLine="true" |
|||
:dataList="dataListResult" |
|||
:isChangeColor=false |
|||
:rowColor="'rgba(11,68,135,0.16)'" |
|||
:noData="noData" |
|||
:pageSize="pageSize" |
|||
:headerList="headerList"> |
|||
</screen-custom-table> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
|
|||
import { pieOption } from './pieOption.js' |
|||
import { lineOption } from './lineOption.js' |
|||
import { mapGetters } from 'vuex' |
|||
import { loadXjphList } from './../../data/index' |
|||
export default { |
|||
name: "screen-right2", |
|||
data () { |
|||
return { |
|||
showNoData: false, |
|||
timer: null, |
|||
pieChart: '', |
|||
pieOption: {}, |
|||
pieInitState: false, |
|||
lineChart: '', |
|||
lineOption: {}, |
|||
lineInitState: false, |
|||
|
|||
headerList: [{ title: '排名', width: '400px' }, { title: '单位', width: '1000px' }, '党员数', '话题数', '议题数', '诉求数', { title: '结案率', color: '#00E099' }, { title: '满意率', color: '#FFB400' }], |
|||
dataList: [], |
|||
dataListResult: [], |
|||
noData: false, |
|||
pageSize: 5 |
|||
|
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters(['shibeiAId']) |
|||
}, |
|||
watch: { |
|||
shibeiAId: { |
|||
handler () { |
|||
if (this.shibeiAId !== '') { |
|||
|
|||
this.getData() |
|||
} |
|||
}, |
|||
immediate: true |
|||
} |
|||
</script> |
|||
}, |
|||
mounted () { |
|||
this.dataList = loadXjphList() |
|||
this.$nextTick(function () { |
|||
|
|||
<style lang="scss" scoped> |
|||
.right2 { |
|||
margin-left: 12px; |
|||
this.initList() |
|||
}); |
|||
|
|||
}, |
|||
methods: { |
|||
initList () { |
|||
this.dataListResult = [] |
|||
this.dataList.forEach(element => { |
|||
this.dataListResult.push([ |
|||
element.no, |
|||
element.unit, |
|||
element.dys, |
|||
element.hts, |
|||
element.yts, |
|||
element.sqs, |
|||
element.jal, |
|||
element.myl, |
|||
]) |
|||
}); |
|||
|
|||
console.log(this.dataListResult) |
|||
}, |
|||
getData () { |
|||
this.getPie() |
|||
this.getLine() |
|||
}, |
|||
pieInitOk () { |
|||
this.pieInitState = true |
|||
}, |
|||
lineInitOk () { |
|||
this.lineInitState = true |
|||
}, |
|||
getPie () { |
|||
if (this.pieInitState) { |
|||
this.getPieChart() |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie() |
|||
}, 500) |
|||
} |
|||
.b-dyxfmf { |
|||
height: 328px; |
|||
}, |
|||
// 获取饼状图 |
|||
async getPieChart () { |
|||
|
|||
this.$refs.pieChart.clear() |
|||
|
|||
// 获取pieChart配置 |
|||
this.pieOption = pieOption() |
|||
const val1 = 80 |
|||
const val2 = 20 |
|||
this.pieOption.title.text = `84%` |
|||
|
|||
this.pieOption.series[1].data[0].value = 80 |
|||
this.pieOption.series[1].data[1].value = 20 |
|||
|
|||
|
|||
// this.$refs.pieChart.hideLoading() |
|||
this.$refs.pieChart.setOption(this.pieOption) |
|||
}, |
|||
getLine () { |
|||
if (this.lineInitState) { |
|||
this.getLineChart() |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getLine() |
|||
}, 500) |
|||
} |
|||
}, |
|||
// 获取饼状图 |
|||
async getLineChart () { |
|||
|
|||
this.$refs.lineChart.clear() |
|||
|
|||
// // 获取pieChart配置 |
|||
this.lineOption = lineOption() |
|||
// const val1 = 80 |
|||
// const val2 = 20 |
|||
// this.lineOption.title.text = `84%` |
|||
|
|||
// this.lineOption.series[1].data[0].value = 80 |
|||
// this.lineOption.series[1].data[1].value = 20 |
|||
|
|||
|
|||
// // this.$refs.pieChart.hideLoading() |
|||
this.$refs.lineChart.setOption(this.lineOption) |
|||
}, |
|||
} |
|||
.b-dylxqz { |
|||
height: 327px; |
|||
} |
|||
</script> |
|||
|
|||
<style src="style/right2.scss" lang="scss" scoped> |
|||
</style> |
|||
Loading…
Reference in new issue