98 lines
2.1 KiB
Vue
98 lines
2.1 KiB
Vue
<template>
|
|
<div class="index-nav-body">
|
|
<div class="index-nav-body-title">劳务人员参与教育人员比例</div>
|
|
<div class="chart-content">
|
|
<my-chart ref="chart" id="navAttWokerPropChart" width="100%" height="100%" :render="renderChart" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import MyChart from "@/components/Chart/MyChart";
|
|
export default {
|
|
components: {
|
|
MyChart,
|
|
},
|
|
data() {
|
|
return {
|
|
chartData: [],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.init();
|
|
},
|
|
methods: {
|
|
renderChart(opt) {
|
|
let pieOption = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{b} <br/> {c} 人 ({d}%)",
|
|
textStyle: {
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
legend: {
|
|
orient: "horizontal",
|
|
left: "center",
|
|
top: "10",
|
|
data: this.chartData.map((d) => d.name),
|
|
textStyle: {
|
|
color: "#444",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: "60%", // 设置为圆环图
|
|
center: ["50%", "50%"],
|
|
avoidLabelOverlap: false,
|
|
data: this.chartData,
|
|
label: {
|
|
normal: {
|
|
formatter: "{b}\n{c}",
|
|
textStyle: {
|
|
color: "#444",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
emphasis: {
|
|
formatter: "{b}\n{c}",
|
|
textStyle: {
|
|
color: "#444",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
return pieOption;
|
|
},
|
|
init() {
|
|
setTimeout(() => {
|
|
this.chartData = [
|
|
{
|
|
name: "参与人数",
|
|
value: 33,
|
|
},
|
|
{
|
|
name: "未参与人数",
|
|
value: 22,
|
|
},
|
|
];
|
|
this.$refs.chart.reLoad();
|
|
}, 1000);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style></style>
|