loveflow
11 months ago
parent
d3dd108bad
commit
fc212c8f2b
@ -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");
|
||||
export default {
|
||||
props: {
|
||||
chartObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.setOption();
|
||||
},
|
||||
methods: {
|
||||
setOption() {
|
||||
let temp = this.getHeight();
|
||||
let height = parseInt(temp / 5);
|
||||
console.log(height);
|
||||
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: 4,
|
||||
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: "10%",
|
||||
left: "center",
|
||||
icon: "diamond",
|
||||
itemHeight: 8,
|
||||
itemWidth: 8,
|
||||
itemGap: 8,
|
||||
padding: 2,
|
||||
//backgroundColor: "rgba(108,128,151,0.2)",
|
||||
textStyle: {
|
||||
color: "#D0DEEE",
|
||||
align: "left",
|
||||
verticalAlign: "middle",
|
||||
fontSize: 12,
|
||||
rich: {
|
||||
name: {
|
||||
width: parseInt(height)+20,
|
||||
},
|
||||
rate: {
|
||||
color: "#FFFFFF;",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
},
|
||||
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: 2 * height - 20,
|
||||
height: 2 * height - 20,
|
||||
zIndex: 1,
|
||||
},
|
||||
left: "center",
|
||||
top: parseInt(10 + 0.3 * height),
|
||||
},
|
||||
],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: this.chartObj.name,
|
||||
type: "pie",
|
||||
radius: [height - 10, height],
|
||||
center: ["center", parseInt(1.3 * height)],
|
||||
clockWise: false,
|
||||
hoverAnimation: false,
|
||||
left: "center",
|
||||
itemStyle: {},
|
||||
label: {
|
||||
show: true,
|
||||
position: "center",
|
||||
formatter: `{label|总数}\n{value|${total}}`,
|
||||
rich: {
|
||||
label: {
|
||||
padding: [0, 0, 10, 0],
|
||||
fontSize: 12,
|
||||
fontWeight: 400,
|
||||
color: "#D0DEEE",
|
||||
},
|
||||
value: {
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
color: "#D0DEEE",
|
||||
},
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter: `{label|总数}\n{value|${total}}`,
|
||||
},
|
||||
},
|
||||
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>
|
||||
Loading…
Reference in new issue