战立标
2 years ago
19 changed files with 376 additions and 275 deletions
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
@ -1,59 +1,73 @@ |
|||
import * as echarts from "echarts"; |
|||
|
|||
export function pieOption() { |
|||
const center = ["50%", "170px"]; |
|||
return { |
|||
color: [ |
|||
"#1A95FF", |
|||
"#FF6138", |
|||
"#2adcea", |
|||
"#2cc4ad", |
|||
"#7377f5", |
|||
"#32de66", |
|||
"#8155d4", |
|||
"#c7ea48", |
|||
"#ef47c2", |
|||
"d43349", |
|||
], |
|||
tooltip: { |
|||
trigger: "item", |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "", |
|||
type: "pie", |
|||
radius: ["50%", "80%"], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 1, |
|||
}, |
|||
avoidLabelOverlap: true, |
|||
labelLine: { |
|||
show: true, |
|||
normal: { |
|||
length: 3, |
|||
length2: 0 |
|||
} |
|||
}, |
|||
label: { |
|||
normal: { |
|||
show: true, |
|||
color: "#FFFFFF", |
|||
formatter: '{name|{b}}\n{rate|{d}%}', |
|||
fontSize: 14, |
|||
// distanceToLabelLine: -60,
|
|||
rich: { |
|||
name: { |
|||
padding: [0, 0, 2, 0], |
|||
}, |
|||
rate: { |
|||
padding: [2, 0, 0, 0], |
|||
} |
|||
} |
|||
}, |
|||
}, |
|||
data: [], |
|||
}, |
|||
], |
|||
}; |
|||
const center = ["50%", "170px"]; |
|||
return { |
|||
color: [ |
|||
"#1A95FF", |
|||
"#FF6138", |
|||
"#2adcea", |
|||
"#2cc4ad", |
|||
"#7377f5", |
|||
"#32de66", |
|||
"#8155d4", |
|||
"#c7ea48", |
|||
"#ef47c2", |
|||
"d43349", |
|||
], |
|||
tooltip: { |
|||
trigger: "item", |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "", |
|||
type: "pie", |
|||
radius: ["50%", "80%"], |
|||
center: ["50%", "50%"], |
|||
// roseType: "area",
|
|||
itemStyle: { |
|||
borderRadius: 1, |
|||
}, |
|||
avoidLabelOverlap: true, |
|||
labelLine: { |
|||
show: true, |
|||
normal: { |
|||
length: 3, |
|||
length2: 0 |
|||
} |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
fontSize: '14', |
|||
fontWeight: 'normal' |
|||
} |
|||
}, |
|||
label: { |
|||
normal: { |
|||
show: false, |
|||
position: "center", |
|||
color: "#FFFFFF", |
|||
formatter: '{name|{c}}\n{rate|{b}}', |
|||
fontSize: 14, |
|||
// distanceToLabelLine: -60,
|
|||
rich: { |
|||
name: { |
|||
fontSize: 30, |
|||
fontWeight: "bold", |
|||
color: "#7FCEFF", |
|||
padding: [0, 0, 2, 0], |
|||
}, |
|||
rate: { |
|||
fontSize: 14, |
|||
color: "#A3B9DA", |
|||
padding: [2, 0, 0, 0], |
|||
} |
|||
} |
|||
}, |
|||
}, |
|||
data: [], |
|||
}, |
|||
], |
|||
}; |
|||
} |
|||
|
|||
@ -1,66 +1,58 @@ |
|||
|
|||
<template> |
|||
<div class="title" :class="noBg ? 'no-bg' : ''"> |
|||
<span class="text"> |
|||
<span class="txt">{{ text }}</span> |
|||
</span> |
|||
<div :class="noBg ? 'no-bg' : ''" class="title"> |
|||
<div class="text"> |
|||
<span class="txt">{{ text }}</span> |
|||
<slot name="time"></slot> |
|||
<slot name="info"></slot> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "Title", |
|||
props: { |
|||
text: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
noBg: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
<slot name="info"></slot> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "Title", |
|||
props: { |
|||
text: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.title { |
|||
// width: 100%; |
|||
height: 30px; |
|||
background: url(../../../../../assets/images/shuju/overview/title-small-bg.png) no-repeat; |
|||
background-size: 100% 100%; |
|||
padding: 7px 0px 5px 34px; |
|||
noBg: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.title { |
|||
// width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
height: 30px; |
|||
padding: 7px 0px 5px 34px; |
|||
background: url(@/assets/images/shuju/overview/title-small-bg.png) no-repeat; |
|||
//background-size: 100% 100%; |
|||
|
|||
.text { |
|||
font-family: PingFang SC; |
|||
font-size: 18px; |
|||
font-weight: 400; |
|||
position: relative; |
|||
z-index: 2; |
|||
color: #fff; |
|||
-webkit-background-clip: text; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.text { |
|||
position: relative; |
|||
font-size: 18px; |
|||
// font-family: HYShuYuanHeiJ; |
|||
font-weight: 400; |
|||
color: #fff; |
|||
.txt { |
|||
font-family: PingFang SC; |
|||
-webkit-background-clip: text; |
|||
// -webkit-text-fill-color: transparent; |
|||
position: relative; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.text-shadow { |
|||
top: 4px; |
|||
left: 3px; |
|||
position: absolute; |
|||
color: #020f21; |
|||
white-space: nowrap; |
|||
} |
|||
.txt { |
|||
margin-right: 20px; |
|||
} |
|||
} |
|||
.no-bg { |
|||
background: none; |
|||
} |
|||
</style> |
|||
} |
|||
|
|||
.no-bg { |
|||
background: none; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue