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