163 lines
3.5 KiB
Vue
163 lines
3.5 KiB
Vue
<template>
|
|
<div style="width: 100%; margin-top: 5px">
|
|
<div class="tableTitle">
|
|
<div>
|
|
<span
|
|
style="
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background-color: #3297ff;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: 8px;
|
|
"
|
|
></span>
|
|
<span
|
|
style="font-size: 18px"
|
|
>{{this.componentName + '-' + this.chartName + '-' + '饼状图'+'-'+status, }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div id="pieChart" ref="pieChart" style="width: 705px; height: 300px"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "pieChart", //饼图图组件
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
},
|
|
},
|
|
componentName: {
|
|
type: String,
|
|
},
|
|
chartName: {
|
|
type: String,
|
|
},
|
|
typeValue: {
|
|
type: Object,
|
|
},
|
|
status: {
|
|
type: String,
|
|
},
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
created() {},
|
|
methods: {
|
|
drawPie(newVal) {
|
|
if (newVal&&newVal.type_data&&newVal.type_data.length>0) {
|
|
var legend = newVal.type_data.map((ele) => {
|
|
return ele.name;
|
|
});
|
|
var seriesData = [];
|
|
newVal.type_data.forEach((ele) => {
|
|
seriesData.push({
|
|
name: ele.name,
|
|
value: ele.quantity,
|
|
});
|
|
});
|
|
this.drawPie();
|
|
}
|
|
let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart);
|
|
if (myChart == null) {
|
|
myChart = this.$echarts.init(this.$refs.pieChart);
|
|
}
|
|
var color = [
|
|
"#0CD2E6",
|
|
"#3751E6",
|
|
"#FFC722",
|
|
"#00FFFF",
|
|
"#00FF80",
|
|
"#FFEA00",
|
|
"#FF7300",
|
|
"#9500B3",
|
|
"#3377FF",
|
|
"#5087EC",
|
|
"#68BBC4",
|
|
"#58A55C",
|
|
"#F2BD42",
|
|
"#EE752F",
|
|
"#D95040",
|
|
"#14CAFB"
|
|
];
|
|
let option = {
|
|
// title: {
|
|
// show: true,
|
|
// text: this.componentName + '-' + this.chartName + '-' + '饼状图',
|
|
// textStyle: {
|
|
// lineHeight: '30'
|
|
// }
|
|
// },
|
|
color: color,
|
|
animation: false,
|
|
legend: {
|
|
top: 20,
|
|
right: "center",
|
|
textStyle: {},
|
|
data: legend,
|
|
},
|
|
tooltip: {},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
center: ["50%", "55%"],
|
|
radius: "70%",
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
length: 0,
|
|
length2: 0,
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: "inside",
|
|
formatter: "{value|{c}}",
|
|
rich: {
|
|
value: {
|
|
fontSize: 20,
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
data: seriesData,
|
|
},
|
|
],
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
// this.$nextTick(() => {
|
|
// myChart.setOption(option)
|
|
// myChart.resize();
|
|
// })
|
|
},
|
|
},
|
|
mounted() {},
|
|
watch: {
|
|
// 监听单个的数据
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.tableTitle {
|
|
background: #f7f8fa;
|
|
margin-bottom: 5px;
|
|
padding: 8px;
|
|
}
|
|
</style>
|