战立标
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"; |
import * as echarts from "echarts"; |
||||
|
|
||||
export function pieOption() { |
export function pieOption() { |
||||
const center = ["50%", "170px"]; |
const center = ["50%", "170px"]; |
||||
return { |
return { |
||||
color: [ |
color: [ |
||||
"#1A95FF", |
"#1A95FF", |
||||
"#FF6138", |
"#FF6138", |
||||
"#2adcea", |
"#2adcea", |
||||
"#2cc4ad", |
"#2cc4ad", |
||||
"#7377f5", |
"#7377f5", |
||||
"#32de66", |
"#32de66", |
||||
"#8155d4", |
"#8155d4", |
||||
"#c7ea48", |
"#c7ea48", |
||||
"#ef47c2", |
"#ef47c2", |
||||
"d43349", |
"d43349", |
||||
], |
], |
||||
tooltip: { |
tooltip: { |
||||
trigger: "item", |
trigger: "item", |
||||
}, |
}, |
||||
series: [ |
series: [ |
||||
{ |
{ |
||||
name: "", |
name: "", |
||||
type: "pie", |
type: "pie", |
||||
radius: ["50%", "80%"], |
radius: ["50%", "80%"], |
||||
center: ["50%", "50%"], |
center: ["50%", "50%"], |
||||
roseType: "area", |
// roseType: "area",
|
||||
itemStyle: { |
itemStyle: { |
||||
borderRadius: 1, |
borderRadius: 1, |
||||
}, |
}, |
||||
avoidLabelOverlap: true, |
avoidLabelOverlap: true, |
||||
labelLine: { |
labelLine: { |
||||
show: true, |
show: true, |
||||
normal: { |
normal: { |
||||
length: 3, |
length: 3, |
||||
length2: 0 |
length2: 0 |
||||
} |
} |
||||
}, |
}, |
||||
label: { |
emphasis: { |
||||
normal: { |
label: { |
||||
show: true, |
show: true, |
||||
color: "#FFFFFF", |
fontSize: '14', |
||||
formatter: '{name|{b}}\n{rate|{d}%}', |
fontWeight: 'normal' |
||||
fontSize: 14, |
} |
||||
// distanceToLabelLine: -60,
|
}, |
||||
rich: { |
label: { |
||||
name: { |
normal: { |
||||
padding: [0, 0, 2, 0], |
show: false, |
||||
}, |
position: "center", |
||||
rate: { |
color: "#FFFFFF", |
||||
padding: [2, 0, 0, 0], |
formatter: '{name|{c}}\n{rate|{b}}', |
||||
} |
fontSize: 14, |
||||
} |
// distanceToLabelLine: -60,
|
||||
}, |
rich: { |
||||
}, |
name: { |
||||
data: [], |
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> |
<template> |
||||
<div class="title" :class="noBg ? 'no-bg' : ''"> |
<div :class="noBg ? 'no-bg' : ''" class="title"> |
||||
<span class="text"> |
<div class="text"> |
||||
<span class="txt">{{ text }}</span> |
<span class="txt">{{ text }}</span> |
||||
</span> |
|
||||
<slot name="time"></slot> |
<slot name="time"></slot> |
||||
<slot name="info"></slot> |
|
||||
</div> |
</div> |
||||
</template> |
<slot name="info"></slot> |
||||
|
</div> |
||||
<script> |
</template> |
||||
export default { |
|
||||
name: "Title", |
<script> |
||||
props: { |
export default { |
||||
text: { |
name: "Title", |
||||
type: String, |
props: { |
||||
default: "", |
text: { |
||||
}, |
type: String, |
||||
noBg: { |
default: "", |
||||
type: Boolean, |
|
||||
default: false, |
|
||||
}, |
|
||||
}, |
}, |
||||
}; |
noBg: { |
||||
</script> |
type: Boolean, |
||||
|
default: false, |
||||
<style scoped lang="scss"> |
}, |
||||
.title { |
}, |
||||
// width: 100%; |
}; |
||||
height: 30px; |
</script> |
||||
background: url(../../../../../assets/images/shuju/overview/title-small-bg.png) no-repeat; |
|
||||
background-size: 100% 100%; |
<style lang="scss" scoped> |
||||
padding: 7px 0px 5px 34px; |
.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; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
justify-content: space-between; |
.txt { |
||||
|
margin-right: 20px; |
||||
.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; |
|
||||
} |
|
||||
} |
} |
||||
} |
} |
||||
.no-bg { |
} |
||||
background: none; |
|
||||
} |
.no-bg { |
||||
</style> |
background: none; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
Loading…
Reference in new issue