216 lines
4.7 KiB
Vue
216 lines
4.7 KiB
Vue
<template>
|
|
<div class="defect-chart"></div>
|
|
</template>
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import resize from './../mixins/resize'
|
|
export default {
|
|
name: 'DefectChart',
|
|
mixins: [resize],
|
|
props: {
|
|
chartTime: ''
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
tempData: []
|
|
}
|
|
},
|
|
computed: {
|
|
israDayStatistic() {
|
|
return this.$store.state.websocket.israDayStatistic
|
|
},
|
|
israWeekStatistic() {
|
|
return this.$store.state.websocket.israWeekStatistic
|
|
},
|
|
israMonthStatistic() {
|
|
return this.$store.state.websocket.israMonthStatistic
|
|
},
|
|
israYearStatistic() {
|
|
return this.$store.state.websocket.israYearStatistic
|
|
}
|
|
},
|
|
watch: {
|
|
israDayStatistic: {
|
|
handler(newVal, oldVal) {
|
|
if (this.chartTime === '日') {
|
|
this.tempData = israDayStatistic
|
|
this.updateChart()
|
|
}
|
|
}
|
|
},
|
|
israWeekStatistic: {
|
|
handler(newVal, oldVal) {
|
|
if (this.chartTime === '周') {
|
|
this.tempData = israWeekStatistic
|
|
this.updateChart()
|
|
}
|
|
}
|
|
},
|
|
israMonthStatistic: {
|
|
handler(newVal, oldVal) {
|
|
if (this.chartTime === '月') {
|
|
this.tempData = israMonthStatistic
|
|
this.updateChart()
|
|
}
|
|
}
|
|
},
|
|
israYearStatistic: {
|
|
handler(newVal, oldVal) {
|
|
if (this.chartTime === '年') {
|
|
this.tempData = israYearStatistic
|
|
this.updateChart()
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$el.addEventListener('resize', () => {
|
|
console.log('resziing.....');
|
|
});
|
|
this.updateChart()
|
|
},
|
|
methods: {
|
|
updateChart() {
|
|
if (
|
|
this.chart !== null &&
|
|
this.chart !== '' &&
|
|
this.chart !== undefined
|
|
) {
|
|
this.chart.dispose()
|
|
}
|
|
this.chart = echarts.init(this.$el);
|
|
let legendData = []
|
|
let xData = []
|
|
let yData = []
|
|
this.tempData && this.tempData.length > 0 && this.tempData.map(item => {
|
|
xData.push(item.name)
|
|
})
|
|
var series = [
|
|
{
|
|
data: [120, 200, 150, 80, 70, 110, 130],
|
|
type: 'bar',
|
|
stack: 'all',
|
|
name: 'a',
|
|
barWidth: 12,
|
|
},
|
|
{
|
|
data: [10, 46, 64, '-', 0, '-', 0],
|
|
type: 'bar',
|
|
stack: 'all',
|
|
name: 'b',
|
|
barWidth: 12,
|
|
},
|
|
{
|
|
data: [30, '-', 0, 20, 10, '-', 0],
|
|
type: 'bar',
|
|
stack: 'all',
|
|
barWidth: 12,
|
|
name: 'c'
|
|
},
|
|
{
|
|
data: [30, '-', 0, 20, 10, '-', 0],
|
|
type: 'bar',
|
|
stack: 'all',
|
|
barWidth: 12,
|
|
name: 'd'
|
|
},
|
|
{
|
|
data: [10, 20, 150, 0, '-', 50, 10],
|
|
type: 'bar',
|
|
stack: 'all',
|
|
name: 'e',
|
|
barWidth: 12,
|
|
label: {
|
|
show: true,
|
|
position: 'top'
|
|
}
|
|
}
|
|
];
|
|
var option = {
|
|
color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'],
|
|
grid: { top: 40, right: 12, bottom: 20, left: 48 },
|
|
legend: {
|
|
top: 10,
|
|
left: 80,
|
|
padding: 5,
|
|
itemWidth: 12,
|
|
itemHeight: 12,
|
|
itemGap: 12,
|
|
height: 12,
|
|
textStyle: {
|
|
color: "#DFF1FE",
|
|
fontSize: 12,
|
|
},
|
|
data:['a','b','c','d','e'],
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: xData,
|
|
axisLabel: {
|
|
color: "#fffc",
|
|
fontSize: 12,
|
|
},
|
|
axisTick: { show: false },
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: 1,
|
|
color: "#213259",
|
|
},
|
|
},
|
|
},
|
|
yAxis: {
|
|
name: "单位/个",
|
|
nameTextStyle: {
|
|
color: "#fff",
|
|
fontSize: 10,
|
|
align: "right",
|
|
},
|
|
type: "value",
|
|
axisLabel: {
|
|
color: "#fff",
|
|
fontSize: 12,
|
|
formatter: "{value}",
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#213259",
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "#213259a0",
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
className: "defect-chart-tooltip"
|
|
},
|
|
series: series
|
|
};
|
|
option && this.chart.setOption(option)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.defect-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
<style>
|
|
.defect-chart-tooltip {
|
|
background: #0a2b4f77 !important;
|
|
border: none !important;
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
.defect-chart-tooltip * {
|
|
color: #fff !important;
|
|
}
|
|
</style> |