160 lines
3.2 KiB
Vue
160 lines
3.2 KiB
Vue
<!--
|
|
* @Author: zhp
|
|
* @Date: 2024-01-29 13:45:56
|
|
* @LastEditTime: 2024-02-18 14:20:01
|
|
* @LastEditors: zhp
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<div>
|
|
<!-- <NotMsg v-show="notMsg"/> -->
|
|
<div id="israChart" class="isra-chart" style="height:390px;"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
// import resize from './../mixins/resize'
|
|
// import NotMsg from './../components/NotMsg'
|
|
|
|
export default {
|
|
name: 'ISRAChart',
|
|
// mixins: [resize],
|
|
// components:{ NotMsg },
|
|
props: {},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
// notMsg:true,
|
|
colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
|
|
chartData: []
|
|
};
|
|
},
|
|
activated() {
|
|
},
|
|
computed: {
|
|
israChartMsg() {
|
|
return this.$store.state.websocket.israKiln
|
|
}
|
|
},
|
|
watch: {
|
|
israChartMsg: {
|
|
handler(newVal, oldVal) {
|
|
this.chartData = newVal || []
|
|
this.updateChart()
|
|
this.$emit('emitFun')
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
updateChart() {
|
|
console.log('update')
|
|
let num = 0
|
|
this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
|
|
num+=i.num
|
|
})
|
|
if (
|
|
this.chart !== null &&
|
|
this.chart !== '' &&
|
|
this.chart !== undefined
|
|
) {
|
|
this.chart.dispose()
|
|
}
|
|
// if (this.chartData && this.chartData.length > 0) {
|
|
// this.notMsg = false
|
|
// } else {
|
|
// this.notMsg = true
|
|
// return
|
|
// }
|
|
this.chart = echarts.init(document.getElementById('israChart'));
|
|
var option = {
|
|
color:this.colors,
|
|
title:{
|
|
text: num,
|
|
subtext: '总数',
|
|
top: '32%',
|
|
left: '49%',
|
|
textAlign: 'center',
|
|
textStyle: {
|
|
fontSize: 32,
|
|
color: '#fff',
|
|
},
|
|
subtextStyle: {
|
|
fontSize: 20,
|
|
color: '#fff00',
|
|
},
|
|
},
|
|
legend: {
|
|
bottom: '10%',
|
|
left: 'center',
|
|
itemWidth: 20,
|
|
itemHeight:12,
|
|
icon: 'rect',
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
data:this.chartData && this.chartData.length > 0 && this.chartData.map((item,index)=>({
|
|
name:item.name,
|
|
itemStyle:{
|
|
color: this.colors[index%4]
|
|
}
|
|
}))
|
|
},
|
|
series:[{
|
|
name: 'ISRA缺陷检测',
|
|
type: 'pie',
|
|
center: ['50%', '40%'],
|
|
radius: ['45%', '70%'],
|
|
avoidLabelOverlap: true,
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
show: true,
|
|
},
|
|
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
|
|
name:item.name,
|
|
value: item.num,
|
|
itemStyle:{
|
|
color:{
|
|
type: 'linear',
|
|
x: 1,
|
|
y: 1,
|
|
x2: 0,
|
|
y2: 0,
|
|
global: false,
|
|
colorStops:[
|
|
{offset: 0,color: this.colors[index%4]},
|
|
{offset: 1,color: this.colors[index%4]+'33'}
|
|
]
|
|
}
|
|
}
|
|
}))}],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
className: "isra-chart-tooltip"
|
|
},
|
|
}
|
|
this.chart.setOption(option);
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.isra-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
<style>
|
|
.isra-chart-tooltip {
|
|
background: #0a2b4f77 !important;
|
|
border: none !important;
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
.isra-chart-tooltip * {
|
|
color: #fff !important;
|
|
}
|
|
</style>
|