211 lines
4.2 KiB
Vue
211 lines
4.2 KiB
Vue
<template>
|
|
<div>
|
|
<NotMsg v-show="notMsg" />
|
|
<div
|
|
id="israChart"
|
|
class="isra-chart"
|
|
style="width: 600px; height: 390px"
|
|
v-show="!notMsg"></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: {
|
|
getEqualNewlineString(params, length) {
|
|
let text = '';
|
|
let count = Math.ceil(params.length / length); // 向上取整数
|
|
// 一行展示length个
|
|
if (count > 1) {
|
|
for (let z = 1; z <= count; z++) {
|
|
text += params.substr((z - 1) * length, length);
|
|
if (z < count) {
|
|
text += '\n';
|
|
}
|
|
}
|
|
} else {
|
|
text += params.substr(0, length);
|
|
}
|
|
return text;
|
|
},
|
|
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: '2%',
|
|
left: 'center',
|
|
itemWidth: 18,
|
|
itemHeight: 18,
|
|
icon: 'circle',
|
|
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: true,
|
|
// },
|
|
// labelLine: {
|
|
// show: true,
|
|
// },
|
|
label: {
|
|
show: true,
|
|
normal: {
|
|
alignTo: 'labelLine',
|
|
margin: 10,
|
|
edgeDistance: 10,
|
|
lineHeight: 16,
|
|
formatter: (params) => {
|
|
//调用自定义显示格式
|
|
return this.getEqualNewlineString(
|
|
params.value + ' | ' + params.percent.toFixed(0) + '%'
|
|
);
|
|
},
|
|
textStyle: {
|
|
// 提示文字的样式
|
|
// color: '#595959',
|
|
fontSize: 16,
|
|
},
|
|
},
|
|
},
|
|
labelLine: {
|
|
show: true,
|
|
length: 25,
|
|
length2: 10,
|
|
},
|
|
data:
|
|
this.chartData &&
|
|
this.chartData.length > 0 &&
|
|
this.chartData.map((item, index) => ({
|
|
name: item.name,
|
|
value: item.num,
|
|
label: {
|
|
color: this.colors[index % 4],
|
|
},
|
|
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>
|