108 lines
2.4 KiB
Vue
108 lines
2.4 KiB
Vue
<template>
|
|
<div ref="LChartRef" class="cc"></div>
|
|
</template>
|
|
|
|
<script setup lang='ts'>
|
|
import { ref, getCurrentInstance, onMounted, watch } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
let { t } = useI18n();
|
|
|
|
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: [t('default.计划产量'), t('default.实际产量')],
|
|
textStyle: {
|
|
fontSize: 14
|
|
},
|
|
|
|
},
|
|
textStyle: {
|
|
fontSize: 14
|
|
|
|
},
|
|
grid: {
|
|
left: '80',
|
|
right: '10',
|
|
bottom: '40',
|
|
},
|
|
color: ['#2FC5D4', '#FEDA81'],
|
|
xAxis: {
|
|
type: 'category',
|
|
data: prop.xData,
|
|
axisLabel: {
|
|
formatter: function (value) {
|
|
// 自定义换行逻辑，这里以每两个字符换行为例
|
|
return value.split(' ').join('\n');
|
|
}
|
|
}
|
|
// axisLabel: {
|
|
// interval: 0, //控制X轴刻度全部显示
|
|
// rotate: 45, //倾斜角度
|
|
// },
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: t('default.日产量'),
|
|
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>
|