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> |
<template> |
||||
<div class="bg-content right2"> |
<div class="bg-content right2"> |
||||
<div class='b-dyxfmf'> |
<div class='b-dyxf'> |
||||
<screen-title :titleName="'党员先锋模范'"></screen-title> |
<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> |
||||
<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> |
<screen-title :titleName="'党员联系群众'"></screen-title> |
||||
|
<div class="dyqz-main"> |
||||
|
|
||||
|
<screen-echarts-frame class="line" |
||||
|
@myChartMethod="lineInitOk" |
||||
|
ref="lineChart"></screen-echarts-frame> |
||||
|
|
||||
|
</div> |
||||
</div> |
</div> |
||||
<div class='b-xjph'> |
<div class='b-xjph'> |
||||
<screen-title :titleName="'先进排行榜单'"></screen-title> |
<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> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import { pieOption } from './pieOption.js' |
||||
|
import { lineOption } from './lineOption.js' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import { loadXjphList } from './../../data/index' |
||||
export default { |
export default { |
||||
name: "screen-right2", |
name: "screen-right2", |
||||
data () { |
data () { |
||||
return { |
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> |
this.initList() |
||||
.right2 { |
}); |
||||
margin-left: 12px; |
|
||||
|
}, |
||||
|
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> |
</style> |
||||
Loading…
Reference in new issue