loveflow
12 months ago
parent
483fad8bb6
commit
a9698c733a
|
After Width: | Height: | Size: 990 B |
|
After Width: | Height: | Size: 963 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
@ -0,0 +1,193 @@
|
|||||||
|
<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 temp = this.getHeight();
|
||||||
|
let height = parseInt(temp / 2) - 20;
|
||||||
|
//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: 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,
|
||||||
|
},
|
||||||
|
title: [
|
||||||
|
{
|
||||||
|
text: "放射源总数",
|
||||||
|
top: 44,
|
||||||
|
textAlign: "center",
|
||||||
|
left: "48%",
|
||||||
|
textStyle: {
|
||||||
|
color: "#D0DEEE",
|
||||||
|
fontSize: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: total,
|
||||||
|
top: 60,
|
||||||
|
textAlign: "center",
|
||||||
|
left: "48%",
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: "400",
|
||||||
|
color: "#92E0FF",
|
||||||
|
fontSize: 18,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
legend: {
|
||||||
|
data: legend,
|
||||||
|
orient: "vertical",
|
||||||
|
bottom: 20,
|
||||||
|
icon: "diamond",
|
||||||
|
left: "center",
|
||||||
|
width: "100%",
|
||||||
|
height: 40,
|
||||||
|
itemHeight: 8,
|
||||||
|
itemWidth: 8,
|
||||||
|
itemGap: 10,
|
||||||
|
padding: 0,
|
||||||
|
//backgroundColor: "rgba(108,128,151,0.2)",
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
name: {
|
||||||
|
fontSize: 10,
|
||||||
|
padding: [0, 4, 0, 0],
|
||||||
|
color: "#D0DEEE",
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
width: 32,
|
||||||
|
color: "#FFFFFF;",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
rate: {
|
||||||
|
color: "#FFFFFF;",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
formatter: function (name) {
|
||||||
|
const item = barChartList.filter((item) => item.name === name)[0];
|
||||||
|
let rate = ((100 * item.value) / total).toFixed(0);
|
||||||
|
console.log(rate);
|
||||||
|
return `{name|${name}}{value| ${item.value}}{rate| ${rate}%}`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: this.chartObj.color,
|
||||||
|
graphic: {
|
||||||
|
elements: [
|
||||||
|
{
|
||||||
|
type: "image",
|
||||||
|
style: {
|
||||||
|
image: bgImg,
|
||||||
|
width: 80,
|
||||||
|
height: 80,
|
||||||
|
zIndex: 1,
|
||||||
|
},
|
||||||
|
left: "center",
|
||||||
|
top: 20,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: this.chartObj.name,
|
||||||
|
type: "pie",
|
||||||
|
radius: [38, 48],
|
||||||
|
center: ["center", 60],
|
||||||
|
clockWise: false,
|
||||||
|
hoverAnimation: false,
|
||||||
|
itemStyle: {},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: "right",
|
||||||
|
},
|
||||||
|
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,157 @@
|
|||||||
|
<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, // 是否显示
|
||||||
|
text: this.chartObj.name,
|
||||||
|
textStyle: { fontSize: 12, color: "#D0DEEE" },
|
||||||
|
/* subtextStyle: {
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: 500,
|
||||||
|
lineHeight: 10,
|
||||||
|
color: "#E3FEFF",
|
||||||
|
}, */
|
||||||
|
textAlign: "center",
|
||||||
|
left: "47%",
|
||||||
|
top: 84,
|
||||||
|
},
|
||||||
|
color: this.chartObj.color,
|
||||||
|
graphic: {
|
||||||
|
elements: [
|
||||||
|
{
|
||||||
|
type: "image",
|
||||||
|
style: {
|
||||||
|
image: this.chartObj.icon,
|
||||||
|
width: 120,
|
||||||
|
height: 120,
|
||||||
|
zIndex: 1,
|
||||||
|
},
|
||||||
|
left: "center",
|
||||||
|
top: -15,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
// name: '访问来源1',
|
||||||
|
type: "pie",
|
||||||
|
radius: [25, 30],
|
||||||
|
center: ["center", 45],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: total, //对应显示的部分数据即100%
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderRadius: 15,
|
||||||
|
color: "#1B2221",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
position: "center",
|
||||||
|
formatter: ((100 * point) / total).toFixed(0) + "%",
|
||||||
|
color: this.chartObj.color[0],
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// name: '访问来源2',
|
||||||
|
type: "pie",
|
||||||
|
showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
|
||||||
|
radius: [25, 30],
|
||||||
|
center: ["center", 45],
|
||||||
|
avoidLabelOverlap: true, // 标签重叠时进行调整
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: total,
|
||||||
|
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: total, //百分比
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(255,255,255,0)", //透明
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
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,191 @@
|
|||||||
|
<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 temp = this.getHeight();
|
||||||
|
let height = parseInt(temp / 2) - 20;
|
||||||
|
//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: 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,
|
||||||
|
},
|
||||||
|
title: [
|
||||||
|
{
|
||||||
|
text: "总数量",
|
||||||
|
top: "38%",
|
||||||
|
textAlign: "center",
|
||||||
|
left: 68,
|
||||||
|
textStyle: {
|
||||||
|
color: "#D0DEEE",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: total,
|
||||||
|
top: "48%",
|
||||||
|
textAlign: "center",
|
||||||
|
left: 66,
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: "400",
|
||||||
|
color: "#92E0FF",
|
||||||
|
fontSize: 22,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
legend: {
|
||||||
|
data: legend,
|
||||||
|
orient: "vertical",
|
||||||
|
top: "center",
|
||||||
|
icon: "diamond",
|
||||||
|
right: "5%",
|
||||||
|
itemHeight: 8,
|
||||||
|
itemWidth: 8,
|
||||||
|
itemGap: 8,
|
||||||
|
padding: 0,
|
||||||
|
//backgroundColor: "rgba(108,128,151,0.2)",
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
name: {
|
||||||
|
fontSize: 10,
|
||||||
|
width: 70,
|
||||||
|
color: "#D0DEEE",
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
width: 50,
|
||||||
|
color: "#FFFFFF;",
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
console.log(rate);
|
||||||
|
return `{name|${name}}{value| ${item.value}}{rate| ${rate}%}`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: this.chartObj.color,
|
||||||
|
graphic: {
|
||||||
|
elements: [
|
||||||
|
{
|
||||||
|
type: "image",
|
||||||
|
style: {
|
||||||
|
image: bgImg,
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
zIndex: 1,
|
||||||
|
},
|
||||||
|
left: 20,
|
||||||
|
top: "center",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: this.chartObj.name,
|
||||||
|
type: "pie",
|
||||||
|
radius: [48, 58],
|
||||||
|
center: [70, "center"],
|
||||||
|
clockWise: false,
|
||||||
|
hoverAnimation: false,
|
||||||
|
itemStyle: {},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: "right",
|
||||||
|
},
|
||||||
|
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>
|
||||||
Loading…
Reference in new issue