195 lines
3.9 KiB
Vue
195 lines
3.9 KiB
Vue
<template>
|
|
<div class="analysis">
|
|
<el-row :gutter="16" style="margin-bottom: 10px">
|
|
<el-col :span="12">
|
|
<el-card shadow="hover">
|
|
<custom-echart-bar :chart-data="state.yieldTrendData" height="460px" :option="state.yieldTrendOption" />
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-card shadow="hover">
|
|
<custom-echart-line :chart-data="state.yieldData" height="460px" :option="state.yieldOption" />
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="16">
|
|
<el-col :span="24">
|
|
<el-card shadow="hover">
|
|
<custom-echart-mixin :chart-data="state.inputOtputRatioData" :option="state.inputOtputRatioOption" height="500px" />
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { reactive } from 'vue';
|
|
|
|
const state = reactive({
|
|
yieldTrendOption: {
|
|
color: ['#3685fe', '#41b879', '#ffd500'],
|
|
title: {
|
|
text: '产量趋势',
|
|
textStyle: {
|
|
color: '#333',
|
|
},
|
|
},
|
|
label: {
|
|
color: '#333',
|
|
},
|
|
barStyle: {
|
|
barWidth: 50,
|
|
stack: 'total',
|
|
},
|
|
},
|
|
yieldTrendData: [
|
|
{ value: 80, type: '花生', name: '耿马镇' },
|
|
{ value: 105, type: '花生', name: '大兴乡' },
|
|
{ value: 187, type: '花生', name: '孟定镇' },
|
|
{ value: 100, type: '土豆', name: '耿马镇' },
|
|
{ value: 125, type: '土豆', name: '大兴乡' },
|
|
{ value: 217, type: '土豆', name: '孟定镇' },
|
|
{ value: 200, type: '玉米', name: '耿马镇' },
|
|
{ value: 155, type: '玉米', name: '大兴乡' },
|
|
{ value: 247, type: '玉米', name: '孟定镇' },
|
|
],
|
|
yieldOption: {
|
|
color: ['#3685fe', '#41b879', '#ffd500'],
|
|
title: {
|
|
text: '单产水平',
|
|
textStyle: {
|
|
color: '#333',
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
name: '年份',
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '产量',
|
|
// splitLine: {
|
|
// show: false,
|
|
// },
|
|
},
|
|
},
|
|
yieldData: [
|
|
{
|
|
type: '花生',
|
|
value: 40,
|
|
name: '2022',
|
|
},
|
|
{
|
|
type: '土豆',
|
|
value: 146,
|
|
name: '2022',
|
|
},
|
|
{
|
|
type: '玉米',
|
|
value: 81,
|
|
name: '2022',
|
|
},
|
|
{
|
|
type: '花生',
|
|
value: 60,
|
|
name: '2023',
|
|
},
|
|
{
|
|
type: '土豆',
|
|
value: 166,
|
|
name: '2023',
|
|
},
|
|
{
|
|
type: '玉米',
|
|
value: 101,
|
|
name: '2023',
|
|
},
|
|
{
|
|
type: '花生',
|
|
value: 80,
|
|
name: '2024',
|
|
},
|
|
{
|
|
type: '土豆',
|
|
value: 176,
|
|
name: '2024',
|
|
},
|
|
{
|
|
type: '玉米',
|
|
value: 91,
|
|
name: '2024',
|
|
},
|
|
],
|
|
inputOtputRatioOption: {
|
|
color: ['#3685fe', '#41b879', '#ffd500', '#e57373'],
|
|
title: {
|
|
text: '投入品产出比',
|
|
textStyle: {
|
|
color: '#333',
|
|
},
|
|
},
|
|
legend: {
|
|
data: ['农药', '化肥', '产出', '产出比'],
|
|
},
|
|
},
|
|
inputOtputRatioData: [
|
|
{
|
|
name: '耿马',
|
|
value: 40,
|
|
type: '农药',
|
|
seriesType: 'bar',
|
|
},
|
|
{
|
|
name: '耿马',
|
|
value: 30,
|
|
type: '化肥',
|
|
seriesType: 'bar',
|
|
},
|
|
{
|
|
name: '耿马',
|
|
value: 100,
|
|
type: '产出',
|
|
seriesType: 'bar',
|
|
},
|
|
{
|
|
name: '耿马',
|
|
value: 60,
|
|
type: '产出比',
|
|
seriesType: 'line',
|
|
},
|
|
{
|
|
name: '大香乡',
|
|
value: 20,
|
|
type: '农药',
|
|
seriesType: 'bar',
|
|
},
|
|
{
|
|
name: '大香乡',
|
|
value: 20,
|
|
type: '化肥',
|
|
seriesType: 'bar',
|
|
},
|
|
{
|
|
name: '大香乡',
|
|
value: 80,
|
|
type: '产出',
|
|
seriesType: 'bar',
|
|
},
|
|
{
|
|
name: '大香乡',
|
|
value: 40,
|
|
type: '产出比',
|
|
seriesType: 'line',
|
|
},
|
|
],
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.analysis {
|
|
&-title {
|
|
font-size: 20px;
|
|
color: #000;
|
|
margin-bottom: 40px;
|
|
}
|
|
}
|
|
</style>
|