94 lines
1.7 KiB
Vue
94 lines
1.7 KiB
Vue
<script setup>
|
|
import { onMounted, ref } from "vue";
|
|
import * as echarts from "echarts";
|
|
import getOptions from "./yieldOption";
|
|
|
|
const props = defineProps({
|
|
rawData: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
targetProduction: 0,
|
|
nowProduction: 0,
|
|
targetYield: 0,
|
|
nowYield: 0,
|
|
};
|
|
},
|
|
},
|
|
});
|
|
|
|
const chart = ref(null);
|
|
const yieldChartRef = ref(null);
|
|
|
|
function reInitChart() {
|
|
if (chart.value) chart.value.dispose();
|
|
const _chart = echarts.init(yieldChartRef.value);
|
|
_chart.setOption(getOptions(props.rawData));
|
|
chart.value = _chart;
|
|
}
|
|
|
|
onMounted(() => {
|
|
reInitChart();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="chart yield-chart">
|
|
<div ref="yieldChartRef" class="chart-container"></div>
|
|
<div class="text-intro">
|
|
<div class="text-intro__item">
|
|
<span class="legend-box green"></span>
|
|
<span>当前产量: {{ rawData.nowProduction }}片</span>
|
|
</div>
|
|
<div class="text-intro__item">
|
|
<span>目标产量: {{ rawData.targetProduction }}片</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.yield-chart {
|
|
height: 240px;
|
|
flex-grow: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.chart-container {
|
|
margin: auto;
|
|
width: 320px;
|
|
height: 100%;
|
|
background: "#0f01";
|
|
}
|
|
|
|
.text-intro {
|
|
position: absolute;
|
|
height: auto;
|
|
width: 220px;
|
|
bottom: 18px;
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0 auto;
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
align-items: center;
|
|
user-select: none;
|
|
}
|
|
|
|
.text-intro__item {
|
|
font-size: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.legend-box {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 4px;
|
|
background: #4cf0e8;
|
|
}
|
|
</style>
|