loveflow
1 year ago
|
After Width: | Height: | Size: 9.2 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 73 KiB |
|
After Width: | Height: | Size: 624 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 72 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div style="height: 100%; width: 100%" id="pieWrap">
|
||||
<g-chart :echartdata="option"></g-chart>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
let bgImg = require("@/assets/images/topic/pie.png");
|
||||
let iconImg = require("@/assets/images/topic/pieIcon.png");
|
||||
export default {
|
||||
props: {
|
||||
chartObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.setOption();
|
||||
},
|
||||
methods: {
|
||||
setOption() {
|
||||
let total = 0;
|
||||
let data = [];
|
||||
let barChartList = this.chartObj.data;
|
||||
let legend = [];
|
||||
for (var i = 0; i < barChartList.length; i++) {
|
||||
legend.push(barChartList[i]["name"]);
|
||||
total = total + barChartList[i].value;
|
||||
data.push(
|
||||
{
|
||||
value: barChartList[i].value,
|
||||
name: barChartList[i].name,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 20,
|
||||
name: "",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
color: "rgba(0, 0, 0, 0)",
|
||||
borderColor: "rgba(0, 0, 0, 0)",
|
||||
borderWidth: 0,
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
if (!total) {
|
||||
total = 1;
|
||||
}
|
||||
|
||||
this.option = {
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
legend: {
|
||||
data: legend,
|
||||
orient: "vertical",
|
||||
bottom: "6%",
|
||||
left: "20%",
|
||||
icon: "diamond",
|
||||
itemHeight: 8,
|
||||
itemWidth: 8,
|
||||
itemGap: 16,
|
||||
padding: 2,
|
||||
//backgroundColor: "rgba(108,128,151,0.2)",
|
||||
textStyle: {
|
||||
color: "#D0DEEE",
|
||||
align: "left",
|
||||
verticalAlign: "middle",
|
||||
fontSize: 12,
|
||||
rich: {
|
||||
name: {
|
||||
width: 80,
|
||||
},
|
||||
rate: {
|
||||
width: 60,
|
||||
color: "#FFFFFF;",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
},
|
||||
formatter: function (name) {
|
||||
const item = barChartList.filter((item) => item.name === name)[0];
|
||||
let rate = ((100 * item.value) / total).toFixed(2);
|
||||
return `{name|${name}}{rate| ${item.value}} {rate| ${rate}%}`;
|
||||
},
|
||||
},
|
||||
color: this.chartObj.color,
|
||||
graphic: {
|
||||
elements: [
|
||||
{
|
||||
type: "image",
|
||||
style: {
|
||||
image: bgImg,
|
||||
width: 110,
|
||||
height: 110,
|
||||
zIndex: 1,
|
||||
},
|
||||
left: "center",
|
||||
top: 50,
|
||||
},
|
||||
],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: this.chartObj.name,
|
||||
type: "pie",
|
||||
radius: [60, 80],
|
||||
width: 220,
|
||||
height: 220,
|
||||
center: ["center", 105],
|
||||
clockWise: false,
|
||||
hoverAnimation: false,
|
||||
left: "center",
|
||||
itemStyle: {},
|
||||
label: {
|
||||
show: true,
|
||||
position: "center",
|
||||
formatter: "{b_style|{b}}\n{c_style|{c}}",
|
||||
rich: {
|
||||
b_style: {
|
||||
padding: [0, 0, 10, 0],
|
||||
fontSize: 12,
|
||||
fontWeight: 400,
|
||||
color: "#D0DEEE",
|
||||
},
|
||||
c_style: {
|
||||
fontSize: 20,
|
||||
fontWeight: 500,
|
||||
color: "#D0DEEE",
|
||||
},
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: data,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
getHeight() {
|
||||
let div = document.getElementById("pieWrap");
|
||||
return div.clientHeight;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chartObj: {
|
||||
handler(newval) {
|
||||
this.setOption();
|
||||
},
|
||||
deep: true,
|
||||
// immediate: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div style="height: 100%; width: 100%" id="pieWrap">
|
||||
<g-chart :echartdata="option"></g-chart>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
let bgImg = require("@/assets/images/topic/pie.png");
|
||||
let iconImg = require("@/assets/images/topic/pieIcon.png");
|
||||
export default {
|
||||
props: {
|
||||
chartObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.setOption();
|
||||
},
|
||||
methods: {
|
||||
setOption() {
|
||||
let total = 0;
|
||||
let data = [];
|
||||
let barChartList = this.chartObj.data;
|
||||
let legend = [];
|
||||
for (var i = 0; i < barChartList.length; i++) {
|
||||
legend.push(barChartList[i]["name"]);
|
||||
total = total + barChartList[i].value;
|
||||
data.push(
|
||||
{
|
||||
value: barChartList[i].value,
|
||||
name: barChartList[i].name,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 20,
|
||||
name: "",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
color: "rgba(0, 0, 0, 0)",
|
||||
borderColor: "rgba(0, 0, 0, 0)",
|
||||
borderWidth: 0,
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
if (!total) {
|
||||
total = 1;
|
||||
}
|
||||
|
||||
this.option = {
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
legend: {
|
||||
data: legend,
|
||||
orient: "vertical",
|
||||
bottom: "6%",
|
||||
left: "20%",
|
||||
icon: "diamond",
|
||||
itemHeight: 8,
|
||||
itemWidth: 8,
|
||||
itemGap: 16,
|
||||
padding: 2,
|
||||
//backgroundColor: "rgba(108,128,151,0.2)",
|
||||
textStyle: {
|
||||
color: "#D0DEEE",
|
||||
align: "left",
|
||||
verticalAlign: "middle",
|
||||
fontSize: 12,
|
||||
rich: {
|
||||
name: {
|
||||
width: 80,
|
||||
},
|
||||
rate: {
|
||||
width: 60,
|
||||
color: "#FFFFFF;",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
},
|
||||
formatter: function (name) {
|
||||
const item = barChartList.filter((item) => item.name === name)[0];
|
||||
let rate = ((100 * item.value) / total).toFixed(2);
|
||||
return `{name|${name}}{rate| ${item.value}} {rate| ${rate}%}`;
|
||||
},
|
||||
},
|
||||
color: this.chartObj.color,
|
||||
graphic: {
|
||||
elements: [
|
||||
{
|
||||
type: "image",
|
||||
style: {
|
||||
image: bgImg,
|
||||
width: 110,
|
||||
height: 110,
|
||||
zIndex: 1,
|
||||
},
|
||||
left: "center",
|
||||
top: 50,
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
style: {
|
||||
image: iconImg,
|
||||
width: 60,
|
||||
height: 60,
|
||||
zIndex: 2,
|
||||
},
|
||||
left: "center",
|
||||
top: 74,
|
||||
},
|
||||
],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: this.chartObj.name,
|
||||
type: "pie",
|
||||
radius: [60, 80],
|
||||
width: 220,
|
||||
height: 220,
|
||||
center: ["center", 105],
|
||||
clockWise: false,
|
||||
hoverAnimation: false,
|
||||
left: "center",
|
||||
itemStyle: {},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: data,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
getHeight() {
|
||||
let div = document.getElementById("pieWrap");
|
||||
return div.clientHeight;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chartObj: {
|
||||
handler(newval) {
|
||||
this.setOption();
|
||||
},
|
||||
deep: true,
|
||||
// immediate: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="personCardWrap">
|
||||
<div
|
||||
class="icon"
|
||||
:style="{ backgroundImage: 'url(' + info.icon + ')' }"
|
||||
></div>
|
||||
<div class="name">{{ info.name }}</div>
|
||||
<div class="value">{{ info.value.toLocaleString() }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
info: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/loveflow/assets/index.scss";
|
||||
.personCardWrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: vw(256);
|
||||
height: vw(275);
|
||||
background: url("~@/assets/images/topic/ct.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.icon {
|
||||
margin-top: vh(40);
|
||||
width: vw(111);
|
||||
height: vw(104);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: vw(6);
|
||||
}
|
||||
.name {
|
||||
margin-bottom: vw(4);
|
||||
font-size: vw(16);
|
||||
color: #ffffff;
|
||||
}
|
||||
.value {
|
||||
font-size: vw(18);
|
||||
color: #f3fff9;
|
||||
text-shadow: 0px 0px 9px rgba(87, 255, 238, 0.56);
|
||||
background: radial-gradient(
|
||||
52% 50% at 50% 24%,
|
||||
rgba(103, 232, 217, 0.25) 0%,
|
||||
rgba(14, 38, 88, 0) 100%
|
||||
);
|
||||
}
|
||||
&:hover {
|
||||
background: url("~@/assets/images/topic/xf.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div
|
||||
class="pTotalWrap"
|
||||
:style="{ backgroundImage: 'url(' + info.icon + ')' }"
|
||||
>
|
||||
<div class="value">{{ info.value.toLocaleString() }}</div>
|
||||
<div class="name">{{ info.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
info: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/loveflow/assets/index.scss";
|
||||
.pTotalWrap {
|
||||
margin-bottom: vw(16);
|
||||
width: vw(240);
|
||||
height: vw(70);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.value {
|
||||
margin-left: vw(76);
|
||||
font-family: AlibabaPuHuiTiM;
|
||||
font-size: vw(24);
|
||||
color: #ffffff;
|
||||
}
|
||||
.name {
|
||||
margin-left: vw(76);
|
||||
font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
color: #d0deee;
|
||||
}
|
||||
}
|
||||
</style>
|
||||