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.
102 lines
2.2 KiB
Vue
102 lines
2.2 KiB
Vue
<template>
|
|
<div class="top-middle-cmp">
|
|
<div ref="chart" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
|
|
export default {
|
|
name: 'TopMiddleCmp',
|
|
props: ['data'],
|
|
data() {
|
|
return {
|
|
chartData: {
|
|
categories: [],
|
|
values: [],
|
|
},
|
|
};
|
|
},
|
|
mounted() {
|
|
this.drawChart();
|
|
},
|
|
methods: {
|
|
drawChart() {
|
|
const chart = echarts.init(this.$refs.chart);
|
|
|
|
const option = {
|
|
title: {
|
|
text: '7天产量',
|
|
textStyle: {
|
|
color: 'white', // Set title font color to white
|
|
},
|
|
},
|
|
grid: {
|
|
left: '10%', // Adjust the left margin
|
|
right: '5%', // Adjust the right margin
|
|
top: '20%', // Adjust the top margin
|
|
bottom: '0%', // Adjust the bottom margin
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: this.chartData.categories,
|
|
axisLabel: {
|
|
color: 'white', // Set X-axis label font color to white
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
color: 'white', // Set Y-axis label font color to white
|
|
},
|
|
},
|
|
|
|
series: [
|
|
{
|
|
data: this.chartData.values,
|
|
type: 'line',
|
|
smooth: true,
|
|
label: {
|
|
show: true, // 显示数据标签
|
|
position: 'top', // 您可以调整标签的位置（例如 'top'、'insideTop'、'insideBottom' 等）
|
|
},
|
|
}
|
|
]
|
|
};
|
|
|
|
chart.setOption(option);
|
|
},
|
|
},
|
|
watch: {
|
|
data(newVal) {
|
|
// Watching the data prop for changes
|
|
// Watching the data prop for changes
|
|
console.log("newVal", newVal);
|
|
this.chartData.categories = newVal.map(item => item.day);
|
|
this.chartData.values = newVal.map(item => item.sum_quantity);
|
|
this.drawChart();
|
|
|
|
// Incrementing the key to force re-render
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.top-middle-cmp {
|
|
position: relative;
|
|
padding: 0 0px;
|
|
box-sizing: border-box;
|
|
|
|
/*.chart-name {*/
|
|
/* position: absolute;*/
|
|
/* right: 70px;*/
|
|
/* text-align: right;*/
|
|
/* font-size: 20px;*/
|
|
/* top: 10px;*/
|
|
/*}*/
|
|
}
|
|
</style>
|