|
|
|
@ -0,0 +1,124 @@
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<div ref="chart" style="width:100%;height:300px"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
require('echarts/theme/macarons') // echarts theme
|
|
|
|
|
import resize from './mixins/resize'
|
|
|
|
|
import {getLineQcData} from '@/api/mes/reportWork'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
mixins: [resize],
|
|
|
|
|
props: {
|
|
|
|
|
className: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: 'chart'
|
|
|
|
|
},
|
|
|
|
|
width: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: '99%'
|
|
|
|
|
},
|
|
|
|
|
height: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: '260px'
|
|
|
|
|
},
|
|
|
|
|
autoResize: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: true
|
|
|
|
|
},
|
|
|
|
|
chartData: {
|
|
|
|
|
type: Object,
|
|
|
|
|
required: true
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
chart: null
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getLineQcInfo();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
getLineQcInfo(){
|
|
|
|
|
getLineQcData().then(returnData => {
|
|
|
|
|
const chart = this.$refs.chart
|
|
|
|
|
if (chart) {
|
|
|
|
|
const myChart = this.$echarts.init(chart)
|
|
|
|
|
const option = {
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis'
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
data: returnData.seriesNames
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: '3%',
|
|
|
|
|
right: '4%',
|
|
|
|
|
bottom: '3%',
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
toolbox: {
|
|
|
|
|
feature: {
|
|
|
|
|
saveAsImage: {}
|
|
|
|
|
}
|
|
|
|
|
},**/
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: 'shadow'
|
|
|
|
|
},
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
let result="";
|
|
|
|
|
for (let i = 0; i < params.length; i++) {
|
|
|
|
|
if(params[i].data!=0){
|
|
|
|
|
result+=params[i].marker + params[i].seriesName + ':' + params[i].data + '%<br>'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return params[0].name + '<br/>'
|
|
|
|
|
+ result
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
data: returnData.xAxisDatas
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'value',
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: '{value} %'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
series: returnData.seriesDatas
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
myChart.setOption(option)
|
|
|
|
|
window.addEventListener("resize", function() {
|
|
|
|
|
myChart.resize()
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
this.$on('hook:destroyed',()=>{
|
|
|
|
|
window.removeEventListener("resize", function() {
|
|
|
|
|
myChart.resize();
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|