286 lines
6.9 KiB
Vue
286 lines
6.9 KiB
Vue
<template>
|
|
<div :id="idName" style="width:100%;height:100%"></div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "equipmentManageEcharts1",
|
|
props: {
|
|
life: {
|
|
type: Number,
|
|
required: true,
|
|
default: true
|
|
},
|
|
idName:{
|
|
type: String,
|
|
required: true,
|
|
}
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
watch:{
|
|
life:{
|
|
handler:function(newV){
|
|
this.getLoadEcharts()
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getLoadEcharts()
|
|
},
|
|
methods: {
|
|
getLoadEcharts() {
|
|
var myChart = this.$echarts.init(
|
|
document.getElementById(this.idName)
|
|
);
|
|
let color = new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{//color为渐变色
|
|
offset: 1,
|
|
color: 'rgb(252,184,96)',
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: 'rgb(249,64,1)',
|
|
},
|
|
])
|
|
var option = {
|
|
title: [{
|
|
text: this.life+'\n使用年限',
|
|
left: 'center',
|
|
top: 'center',
|
|
textStyle: {
|
|
fontSize: 14,
|
|
color: 'rgb(249,64,1)',
|
|
foontWeight: '400',
|
|
// background: 'rgba(9,119,150,0.3)',
|
|
},
|
|
}
|
|
],
|
|
grid:{
|
|
top:0,
|
|
bottom:0,
|
|
left:0,
|
|
right:0
|
|
},
|
|
tooltip: {
|
|
show:false,
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
top: '5%',
|
|
left: 'center'
|
|
},
|
|
|
|
// backgroundColor: '#000',
|
|
color: ['rgb(252,184,96)',color],
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
legendHoverLink: false,
|
|
hoverAnimation: false,
|
|
radius: ['50%', '54%'],
|
|
center: ['50%', '50%'],
|
|
avoidLabelOverlap: false,
|
|
// showBackground: true,
|
|
// backgroundStyle: {
|
|
// color: 'rgb(24,55,123,0.7)',
|
|
// },
|
|
itemStyle: {
|
|
borderRadius: 6,
|
|
borderColor: 'rgb(0,228,231)',
|
|
// borderWidth: 15,
|
|
normal : {
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
position: 'center',
|
|
textStyle : {
|
|
fontSize : '15',
|
|
fontWeight : 'bold'
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{ value: 50, }
|
|
],
|
|
|
|
},
|
|
{
|
|
name: '使用年限',
|
|
type: 'pie',
|
|
hoverAnimation: false,
|
|
legendHoverLink: false,
|
|
radius: ['46%', '58%'],
|
|
center: ['50%', '50%'],
|
|
avoidLabelOverlap: false,
|
|
// showBackground: true,
|
|
// backgroundStyle: {
|
|
// color: 'rgb(24,55,123,0.7)',
|
|
// },
|
|
itemStyle: {
|
|
borderRadius: 6,
|
|
borderColor: 'rgb(0,228,231)',
|
|
// borderWidth: 15,
|
|
normal : {
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
position: 'center',
|
|
textStyle : {
|
|
fontSize : '15',
|
|
fontWeight : 'bold'
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{ value: 100 - this.life,
|
|
itemStyle: {
|
|
normal:{
|
|
color: "rgba(255,255,255,0)"
|
|
}
|
|
},
|
|
},
|
|
{ value: this.life,
|
|
itemStyle: {
|
|
normal:{
|
|
color: color
|
|
}
|
|
}
|
|
},
|
|
],
|
|
|
|
},
|
|
{
|
|
type: 'gauge',
|
|
// radius: ["95%", "95%"],
|
|
center: ['50%', '50%'],
|
|
radius: 60,
|
|
startAngle: 0,
|
|
endAngle: 10000,
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
width: 3,
|
|
opacity: 0
|
|
}
|
|
},
|
|
title: { show: false },
|
|
detail: { show: false },
|
|
splitLine: { show: false },
|
|
axisTick: {
|
|
length: 10,
|
|
splitNumber: 6,
|
|
lineStyle: {
|
|
color: 'rgb(252,184,96)',
|
|
width: 2
|
|
}
|
|
},
|
|
axisLabel: { show: false },
|
|
pointer: { show: false },
|
|
itemStyle: {},
|
|
data: [
|
|
{
|
|
value: 20,
|
|
name: 'test gauge'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
// myChart.on('mouseover', (v) => {
|
|
// if (v.dataIndex != 0) {
|
|
// // 高亮显示悬停的那块
|
|
// myChart.dispatchAction({
|
|
// type: 'hideTip',
|
|
// seriesIndex: 0,
|
|
// dataIndex: 0
|
|
// });
|
|
// // 当检测到鼠标悬停事件，取消所有选中高亮
|
|
// myChart.dispatchAction({
|
|
// type: 'downplay',
|
|
// seriesIndex: 0,
|
|
// dataIndex: 0
|
|
// });
|
|
// }
|
|
// });
|
|
//
|
|
// // 检测鼠标移出后显示之前默认高亮的那块
|
|
// myChart.on('mouseout', (v) => {
|
|
// myChart.dispatchAction({
|
|
// type: 'showTip',
|
|
// seriesIndex: 0,
|
|
// dataIndex: 0
|
|
// });
|
|
// myChart.dispatchAction({
|
|
// type: 'highlight',
|
|
// seriesIndex: 0,
|
|
// dataIndex: 0
|
|
// });
|
|
// });
|
|
|
|
myChart.setOption(option);
|
|
// 默认展示第一条数据的提示框
|
|
// myChart.dispatchAction({
|
|
// type: 'showTip',
|
|
// seriesIndex: 0,
|
|
// dataIndex: 0
|
|
// });
|
|
// 默认高亮展示第一条数据
|
|
// myChart.dispatchAction({
|
|
// type: 'highlight',
|
|
// seriesIndex: 0,
|
|
// dataIndex: 1
|
|
// });
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.quipmentManager1 {
|
|
width: 100%;
|
|
height: 150px;
|
|
}
|
|
|
|
#equipmentManageEcharts1 {
|
|
width: 100%;
|
|
height: 150px;
|
|
}
|
|
</style>
|
|
|