101 lines
2.0 KiB
Vue
101 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<div ref="LChartRef" class="cc"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang='ts'>
|
||
|
|
import { ref, getCurrentInstance, onMounted, watch } from 'vue'
|
||
|
|
|
||
|
|
|
||
|
|
const prop = defineProps({
|
||
|
|
xData: {
|
||
|
|
type: Array,
|
||
|
|
default: ['1050910', '1050269']
|
||
|
|
},
|
||
|
|
seriesData: {
|
||
|
|
type: Array,
|
||
|
|
default: []
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
let LChartRef = ref(null);
|
||
|
|
const { proxy } = getCurrentInstance() as any;
|
||
|
|
let charts = null;
|
||
|
|
const setCharts = () => {
|
||
|
|
charts = proxy.$echarts.init(LChartRef.value, 'dark')
|
||
|
|
let option = {
|
||
|
|
// title: {
|
||
|
|
// text: '工作时间'
|
||
|
|
// },
|
||
|
|
backgroundColor: '#0E0E0E',
|
||
|
|
legend: {
|
||
|
|
data: ['计划产量', '实际产量'],
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 14
|
||
|
|
},
|
||
|
|
|
||
|
|
},
|
||
|
|
textStyle: {
|
||
|
|
fontSize:14
|
||
|
|
|
||
|
|
},
|
||
|
|
grid:{
|
||
|
|
left:'80',
|
||
|
|
right:'10',
|
||
|
|
bottom:'40',
|
||
|
|
},
|
||
|
|
color:['#2FC5D4','#FEDA81'],
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
data: prop.xData,
|
||
|
|
// axisLabel: {
|
||
|
|
// interval: 0, //控制X轴刻度全部显示
|
||
|
|
// rotate: 45, //倾斜角度
|
||
|
|
// },
|
||
|
|
},
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: 'value',
|
||
|
|
name: '日产量',
|
||
|
|
axisLabel:{
|
||
|
|
fontSize:14
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
series: prop.seriesData
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
charts.setOption(option);
|
||
|
|
}
|
||
|
|
|
||
|
|
watch(() => prop.seriesData, (newVal, oldVal) => {
|
||
|
|
charts.setOption({
|
||
|
|
series: newVal
|
||
|
|
});
|
||
|
|
|
||
|
|
}, { deep: true })
|
||
|
|
watch(() => prop.xData, (newVal, oldVal) => {
|
||
|
|
charts.setOption({
|
||
|
|
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
data: prop.xData,
|
||
|
|
// axisLabel: {
|
||
|
|
// interval: 0, //控制X轴刻度全部显示
|
||
|
|
// rotate: 45, //倾斜角度
|
||
|
|
// },
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}, { deep: true })
|
||
|
|
onMounted(() => {
|
||
|
|
setCharts()
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.cc {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|