<span style="font-weight:600">操作系统</span>
<div
class="echart"
id="system-echart"
:style="{ float: 'left', width: '100%', height: '300px' }"
></div>
<script>
import * as echarts from "echarts";
import { pieEchart } from "../util/pieechart";
export default {
name: "PieEchart",
props: ["breakdownData"],
data() {
return {
systemName: "操作系统",
os_types: [
{
"name": "Windows",
"value": 17
},
{
"name": "Mac OS X",
"value": 3
},
{
"name": "Android",
"value": 1
}
]
};
},
methods: {
refreshpies() {
let system_echart = document.getElementById("system-echart");
this.renderInitEchart(system_echart, this.systemName, this.os_types);
},
renderInitEchart(id, name, pieData) {
let total = 0;
if (pieData.length > 0) {
for (let item of pieData) {
total += item.value;
}
}
let getchart = echarts.init(id);
let option = pieEchart(name, pieData, total);
getchart.setOption(option);
getchart.on("mouseover", function() {
getchart.setOption({
title: {
text: ""
}
});
});
getchart.on("mouseout", function() {
getchart.setOption({
title: {
text: ["{value|" + total + "}"]
}
});
});
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
getchart.resize();
});
}
}
};
</script>
util/pieechart.js
function pieEchart(name, data, total) {
let option = {
title: {
text: [`{value|${total > 0 ? total : "无数据"}}`],
top: "center",
left: "24%",
textAlign: "center",
textStyle: {
rich: {
value: {
fontSize: 30,
fontWeight: "600"
}
}
}
},
tooltip: {
trigger: "item"
},
legend: {
type: "scroll",
orient: "vertical",
left: "50%",
top: 26,
icon: "rect",
itemHeight: 26,
itemWidth: 8,
selectedMode: false,
textStyle: {
rich: {
name: {
fontSize: 12,
color: "#011",
padding: [4, 0, 0, 0]
},
num: {
fontSize: 14,
fontWeight: 600,
padding: [4, 0, 0, 0],
color: "#000"
}
}
},
formatter: function(name) {
let tarValue;
if (data.length > 0) {
for (let i = 0; i < data.length; i++) {
if (data[i].name == name) {
tarValue = data[i].value;
}
}
}
return [`{name|${name}}`, `{num|${tarValue || "无数据"}}`].join("\n");
}
},
series: [
{
name,
center: ["24%", "50%"],
type: "pie",
radius: ["50%", "74%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
formatter: "{c}",
fontSize: "30",
fontWeight: "600"
},
emphasis: {
label: {
show: true,
fontSize: "30",
fontWeight: "600"
}
},
labelLine: {
show: false
},
data
}
]
};
return option;
}
export { pieEchart };