You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
1.7 KiB
Vue
81 lines
1.7 KiB
Vue
1 year ago
|
<template>
|
||
|
|
<div :style="{ height: height, width: width }" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import * as echarts from 'echarts';
|
||
|
|
import { defineComponent } from '@vue/composition-api';
|
||
|
|
import resize from './dashboard/mixins/resize';
|
||
|
|
import {option} from './options/mid_bot_options';
|
||
|
|
export default defineComponent({
|
||
|
|
mixins: [resize],
|
||
|
|
props: {
|
||
|
|
year: null,
|
||
|
|
className: {
|
||
|
|
type: String,
|
||
|
|
default: 'chart'
|
||
|
|
},
|
||
|
|
width: {
|
||
|
|
type: String,
|
||
|
|
default: '400px'
|
||
|
|
},
|
||
|
|
height: {
|
||
|
|
type: String,
|
||
|
|
default: '230px'
|
||
|
|
},
|
||
|
|
productionData : {
|
||
|
|
type : Object,
|
||
|
|
default () {
|
||
|
|
return {}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// myChart: null,
|
||
|
|
loading: true,
|
||
|
|
dataForCount: [],
|
||
|
|
dataForWeight: [],
|
||
|
|
chartOptions : {}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
async mounted() {
|
||
|
|
// await this.getTypeData()
|
||
|
|
this.chartOptions =JSON.parse(JSON.stringify(option))
|
||
|
|
// this.initChart()
|
||
|
|
},
|
||
|
|
watch : {
|
||
|
|
productionData : {
|
||
|
|
handler (newValue) {
|
||
|
|
console.log('this.chartOptions ==>',this.chartOptions);
|
||
|
|
let series1Data = newValue.wiredrawingNumWeek.map(item => item.putNum);
|
||
|
|
let series2Data = newValue.wiredrawingNumWeek.map(item => item.outNum);
|
||
|
|
let xAxisData = newValue.wiredrawingNumWeek.map(item => item.date);
|
||
|
|
this.chartOptions.xAxis.data = xAxisData;
|
||
|
|
this.chartOptions.series[0].data = series1Data;
|
||
|
|
this.chartOptions.series[1].data = series2Data;
|
||
|
|
this.initChart();
|
||
|
|
},
|
||
|
|
deep : true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
beforeUnmount() {
|
||
|
|
// if (!this.myChart) {
|
||
|
|
// return;
|
||
|
|
// }
|
||
|
|
// this.myChart.dispose();
|
||
|
|
// this.myChart = null;
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initChart() {
|
||
|
|
let myChart = echarts.init(this.$el);
|
||
|
|
myChart.setOption(this.chartOptions);
|
||
|
|
this.$nextTick(() => {
|
||
|
|
myChart.resize()
|
||
|
|
this.$emit('endLoading', 11)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|