143 lines
3.6 KiB
Vue
143 lines
3.6 KiB
Vue
<template>
|
|
<!-- <div>
|
|
<div class="quipmentManager1"> -->
|
|
<div id="maintenanceEchartsLeft"></div>
|
|
<!-- </div>
|
|
</div> -->
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "maintenanceEchartsLeft",
|
|
props: {
|
|
maintenanceEchartsLeftData: {
|
|
default: () => false,
|
|
type: [Array, Boolean],
|
|
required: true
|
|
},
|
|
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
watch:{
|
|
maintenanceEchartsLeftData:{
|
|
handler:function(newV){
|
|
this.getLoadEcharts()
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getLoadEcharts()
|
|
console.log("maintenanceEchartsLeftData",this.maintenanceEchartsLeftData)
|
|
},
|
|
methods: {
|
|
getLoadEcharts() {
|
|
var myChart = this.$echarts.init(
|
|
document.getElementById("maintenanceEchartsLeft")
|
|
);
|
|
var option = {
|
|
title: {
|
|
show: false,
|
|
text: "Referer of a Website",
|
|
subtext: "Fake Data",
|
|
left: "center",
|
|
},
|
|
tooltip: {
|
|
trigger: "item",
|
|
},
|
|
legend: {
|
|
show: false,
|
|
orient: "vertical",
|
|
left: "left",
|
|
},
|
|
color:["rgb(100,177,239)","rgb(66,149,247)","rgb(73,158,188)"],
|
|
series: [
|
|
{
|
|
name: "",
|
|
type: "pie",
|
|
radius: "50%",
|
|
|
|
data:this.maintenanceEchartsLeftData,
|
|
// [{
|
|
// value: 1048,
|
|
// name: "转向系统：",
|
|
// itemStyle: { color: "rgb(100,177,239)" },
|
|
// },
|
|
// {
|
|
// value: 735,
|
|
// name: "制动系统：",
|
|
// itemStyle: { color: "rgb(109,177,237)" },
|
|
// },
|
|
// {
|
|
// value: 100,
|
|
// name: "行驶系统：",
|
|
// itemStyle: { color: "rgb(66,149,247)" },
|
|
// },
|
|
// {
|
|
// value: 100,
|
|
// name: "电子电器：",
|
|
// itemStyle: { color: "rgb(73,158,188)" },
|
|
// },
|
|
// {
|
|
// value: 800,
|
|
// name: "传统系统零部件：",
|
|
// itemStyle: { color: "rgb(91,200,157)" },
|
|
// },
|
|
// {
|
|
// value: 50,
|
|
// name: "其他：",
|
|
// itemStyle: { color: "rgb(91,200,157)" },
|
|
// },
|
|
// {
|
|
// value: 200,
|
|
// name: "铝合金：",
|
|
// itemStyle: { color: "rgb(150,223,72)" },
|
|
// },
|
|
// {
|
|
// value: 100,
|
|
// name: "车身刹件：",
|
|
// itemStyle: { color: "rgb(216,237,252)" },
|
|
// },
|
|
// {
|
|
// value: 100,
|
|
// name: "发动机：",
|
|
// itemStyle: { color: "rgb(167,216,252)" },
|
|
// },],
|
|
label: {
|
|
show: true,
|
|
formatter: "{b}{d}%",
|
|
},
|
|
itemStyle: {
|
|
// shadowBlur: 10,
|
|
// shadowOffsetX: 0,
|
|
// shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
borderWidth: 3,
|
|
borderColor: "rgb(9,62,70)",
|
|
opacity: 0.7,
|
|
},
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.quipmentManager1 {
|
|
width: 100%;
|
|
height: 150px;
|
|
}
|
|
|
|
#maintenanceEchartsLeft {
|
|
/* width: 100%;
|
|
height: 150px; */
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|