e
7 months ago
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.3 KiB |
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 51 KiB |
@ -0,0 +1,155 @@
|
|||||||
|
<template>
|
||||||
|
<div style="height: 100%; width: 100%" id="pieWrap">
|
||||||
|
<g-chart :echartdata="option"></g-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
chartObj: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
option: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.setOption();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setOption() {
|
||||||
|
let point = this.chartObj.point; //环形图的具体 百分比
|
||||||
|
let total = this.chartObj.total;
|
||||||
|
|
||||||
|
this.option = {
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
// 圆环中央文字
|
||||||
|
show: true, // 是否显示
|
||||||
|
subtext: point + "",
|
||||||
|
text: this.chartObj.name,
|
||||||
|
textStyle: { fontSize: 12, lineHeight: 12, color: "#D0DEEE" },
|
||||||
|
subtextStyle: {
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: 500,
|
||||||
|
lineHeight: 10,
|
||||||
|
color: "#E3FEFF",
|
||||||
|
},
|
||||||
|
textAlign: "center",
|
||||||
|
left: "45%",
|
||||||
|
bottom: "10",
|
||||||
|
},
|
||||||
|
color: this.chartObj.color,
|
||||||
|
graphic: {
|
||||||
|
elements: [
|
||||||
|
{
|
||||||
|
type: "image",
|
||||||
|
style: {
|
||||||
|
image: this.chartObj.icon,
|
||||||
|
width: 160,
|
||||||
|
height: 160,
|
||||||
|
zIndex: 1,
|
||||||
|
},
|
||||||
|
left: "center",
|
||||||
|
top: 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
// name: '访问来源1',
|
||||||
|
type: "pie",
|
||||||
|
radius: [30, 40],
|
||||||
|
center: ["50%", "40%"],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 100, //对应显示的部分数据即100%
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderRadius: 15,
|
||||||
|
color: "#1B2221",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// name: '访问来源2',
|
||||||
|
type: "pie",
|
||||||
|
showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
|
||||||
|
radius: [30, 40],
|
||||||
|
avoidLabelOverlap: true, // 标签重叠时进行调整
|
||||||
|
center: ["50%", "40%"],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: (point / total) * 100,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderRadius: 15, //圆角
|
||||||
|
color: {
|
||||||
|
// 设置渐变色
|
||||||
|
type: "linear",
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: this.chartObj.color[1], // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: this.chartObj.color[2], // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
value: 120, //百分比
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(255,255,255,0)", //透明
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: "center",
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
getHeight() {
|
||||||
|
let div = document.getElementById("pieWrap");
|
||||||
|
return div.clientHeight;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
chartObj: {
|
||||||
|
handler(newval) {
|
||||||
|
this.setOption();
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
// immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
<template>
|
||||||
|
<div class="digitWrap">
|
||||||
|
<div class="num" v-for="(item, index) in numArr" :key="index">
|
||||||
|
{{ item }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
num: {
|
||||||
|
type: [Number, String],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
numArr: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.setNum();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setNum() {
|
||||||
|
this.num = this.num + "";
|
||||||
|
this.numArr = [];
|
||||||
|
let length = this.num.length;
|
||||||
|
console.log(length);
|
||||||
|
console.log(this.num);
|
||||||
|
for (let i = 0; i < length; i++) {
|
||||||
|
this.numArr.push(this.num.charAt(i));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
num: {
|
||||||
|
handler(newval) {
|
||||||
|
this.setNum();
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
// immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "@/loveflow/assets/index.scss";
|
||||||
|
.digitWrap {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
padding-top: vw(16);
|
||||||
|
padding-left: vw(20);
|
||||||
|
padding-right: vw(20);
|
||||||
|
width: vw(377);
|
||||||
|
height: vw(105);
|
||||||
|
background: url("~@/assets/images/topic/numb.png") no-repeat center center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
.num {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: vw(38);
|
||||||
|
height: vw(44);
|
||||||
|
background: url("~@/assets/images/topic/num.png") no-repeat center center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: vw(28);
|
||||||
|
color: #f3fff9;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-shadow: 0px 0px 9px rgba(87, 238, 255, 0.88);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||