@ -3,69 +3,23 @@
< div class = "bs-card business-buy" >
< div class = "bs-card__title jc-between" >
< p class = "bs-card__title--text" >
政府购买 服务
康养 服务
< / p >
< p >
< span class = "color-word" > 658 < / span >
< span class = "color-white" > 人次 / 每分钟 < / span >
< span class = "color-white" > 人次 / 年 < / span >
< / p >
< / div >
< div class = "business-buy__body" >
< div class = "digital" >
< p class = "digital-item" > 60 % < / p >
< p class = "digital-item" > 18 % < / p >
< p class = "digital-item" > 22 % < / p >
< img :src ="require('@/assets/bigScreen/business-buy.png')" alt = "" >
< / div >
< div class = "progress" >
< div class = "progress-item" v-for ="i in 3" >
< svg viewBox = "0 0 100 100" style = "transform: rotate(-90deg)" >
< path d = "M 50 50 m 0 47a 47 47 0 1 1 0 -94a 47 47 0 1 1 0 94"
stroke = "#f56c6c"
stroke - width = "8"
fill = "none"
style = "stroke-dasharray: 5,4; stroke-dashoffset: -36.9137px;" > < / path >
< path d = "M 50 50 m 0 47 a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 94"
stroke = "#0e2168"
fill = "none"
stroke - linecap = "round"
stroke - width = "8"
style = "stroke-dasharray: 74.1482px, 295.31px; stroke-dashoffset: -36.9137px; transition: stroke-dasharray 0.6s, stroke 0.6s;" > < / path >
< / svg >
< div class = "progress-name" >
长护
< / div >
< div class = "progress-rate" >
30 %
< / div >
< / div >
< div >
< div id = "property-line-chart" > < / div >
< / div >
< / div >
< / div >
< div class = "bs-card property" >
< div class = "bs-card__title jc-between" >
< p class = "bs-card__title--text" >
物业
< / p >
< div class = "chart-legend" >
< div class = "chart-legend__item" >
< div style = "background: #00d9d5;" > < / div >
< p class = "color-white" > 商业服务面积 < / p >
< / div >
< div class = "chart-legend__item" >
< div style = "background: linear-gradient(0deg, #e67725 0%, #ff9d62 100%);" > < / div >
< p class = "color-white" > 住宅服务面积 < / p >
< / div >
< / div >
< / div >
< div >
< div id = "property-line-chart" > < / div >
< / div >
< div id = "property-pie-chart" > < / div >
< / div >
< / div >
< / template >
@ -82,8 +36,51 @@ export default {
this . chart = echarts . init ( document . querySelector ( '#property-line-chart' ) , 'macarons' ) ;
this . setOptions ( this . chartData ) ;
} ,
initPieChart ( ) {
this . chartPie = echarts . init ( document . querySelector ( '#property-pie-chart' ) ) ;
this . setPieOptions ( this . chartData ) ;
} ,
setOptions ( chartdata ) {
let data = [ {
name : '长护' ,
val : 7100 ,
color : '#c95038'
} , {
name : '残联' ,
val : 8120 ,
color : '#e1884a'
} , {
name : '民政' ,
val : 5612 ,
color : '#ebb34c'
} , {
name : "陪诊" ,
val : 8143 ,
color : '#316922'
} , {
name : "问诊" ,
val : 4231 ,
color : '#71dc7a'
} , {
name : "居家照护" ,
val : 6501 ,
color : '#6bb7be'
} , {
name : "医院陪护" ,
val : 3420 ,
color : '#2050e0'
} , {
name : "个性化\n服务" ,
val : 6501 ,
color : '#9952f6'
} ]
this . chart . setOption ( {
tooltip : {
trigger : 'axis' ,
axisPointer : {
type : 'shadow'
}
} ,
grid : {
top : 10 ,
left : '2%' ,
@ -91,64 +88,127 @@ export default {
bottom : '3%' ,
containLabel : true
} ,
xAxis : [ {
xAxis :
type : 'value' ,
} ] ,
yAxis : [ {
type : 'category' ,
date : [ '商业服务面积' , '住宅服务面积' ]
} ] ,
series : [ {
name : '商业服务面积' ,
type : 'bar' ,
barWidth : '30%' ,
data : [ 550 ] ,
itemStyle : {
color : "#00d9d5" ,
barBorderRadius : [ 0 , 4 , 4 , 0 ] ,
} ,
label : {
splitLine : {
show : true ,
position : 'right' ,
color : '#31abe3' ,
fontWeight : 'bold' ,
formatter : '{c}㎡'
} ,
animationDuration : 3000
} , {
name : '住宅服务面积' ,
type : 'bar' ,
barWidth : '30%' ,
data : [ 550 ] ,
itemStyle : {
color : new echarts . graphic . LinearGradient ( 1 , 0.5 , 0 , 0.5 , [
{
offset : 0 ,
color : '#e67725'
lineStyle : {
color : '#384b8f' , / / 设 置 X 轴 间 隔 线 颜 色 为 红 色
}
}
} ,
yAxis : {
type : 'category' ,
data : data . map ( i => i . name ) ,
axisLabel : {
textStyle : {
color : "#fff"
}
}
} ,
series : [
{
name : '人数' ,
type : 'bar' ,
data : data . map ( i => i . val ) ,
label : {
show : true ,
position : 'insideRight' ,
color : '#fff' ,
fontWeight : 'bold' ,
formatter : '{c}'
} ,
itemStyle : {
color : ( params ) => {
return data [ params . dataIndex ] . color
} ,
{
offset : 1 ,
color : '#ff9d62'
}
] ) ,
barBorderRadius : [ 0 , 4 , 4 , 0 ] ,
barBorderRadius : [ 0 , 4 , 4 , 0 ] ,
} ,
}
]
} )
} ,
setPieOptions ( ) {
let data = [ {
name : "政府" ,
val : 40 ,
color : new echarts . graphic . LinearGradient ( 0.5 , 0 , 0.5 , 1 , [
{
offset : 0 ,
color : '#202aed'
} ,
label : {
show : true ,
position : 'right' ,
color : '#31abe3' ,
fontWeight : 'bold' ,
formatter : '{c}㎡'
{
offset : 1 ,
color : '#3b82f0'
}
] )
} , {
name : "商业" ,
val : 60 ,
color : new echarts . graphic . LinearGradient ( 0.5 , 0 , 0.5 , 1 , [
{
offset : 0 ,
color : '#84d7ee'
} ,
animationDuration : 3000
} ]
} )
{
offset : 1 ,
color : '#6fe7fa'
}
] )
} ]
this . chartPie . setOption ( {
title : {
show : false ,
} ,
tooltip : {
trigger : 'item'
} ,
series : [
{
type : 'pie' ,
radius : '64%' ,
center : [ '50%' , '50%' ] ,
data : data . map ( i => ( {
value : i . val ,
name : i . name ,
itemStyle : {
color : i . color ,
shadowBlur : 10 ,
}
} ) ) . sort ( function ( a , b ) {
return a . value - b . value ;
} ) ,
roseType : 'radius' ,
label : {
color : '#fff' ,
formatter : '{b} \n {d}%'
} ,
labelLine : {
lineStyle : {
color : '#71e8fc'
} ,
smooth : 0.2 ,
length : 10 ,
length2 : 20
} ,
animationType : 'scale' ,
animationEasing : 'elasticOut' ,
animationDelay : function ( idx ) {
return Math . random ( ) * 200 ;
}
}
]
} )
}
} ,
computed : { } ,
mounted ( ) {
this . initChart ( )
this . initPieChart ( )
}
}
< / script >
@ -255,7 +315,11 @@ export default {
}
# property - line - chart {
height : 140 px ;
width : 388 px ;
height : 335 px ;
width : 100 % ;
}
# property - pie - chart {
width : 100 % ;
height : 100 % ;
}
< / style >
