This commit is contained in:
郭永超 2025-07-10 16:41:23 +08:00
commit 6f546c8050

View File

@ -1,6 +1,7 @@
<template> <template>
<div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`"> <!-- <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`"> -->
<!-- <div class="custom-page"> <div class="custom-page">
<!-- <div class="custom-page"> -->
<div class="content"> <div class="content">
<div style="display: flex"> <div style="display: flex">
<pieChart v-for="(item, index) in data" :key="index" class="m-left" :refs="item.refs" :title="item.title" :data="item.data" /> <pieChart v-for="(item, index) in data" :key="index" class="m-left" :refs="item.refs" :title="item.title" :data="item.data" />
@ -8,7 +9,7 @@
<div style="display: flex; margin-top: 20px"> <div style="display: flex; margin-top: 20px">
<pieChart v-for="(item, index) in data1" :key="index" class="m-left" :refs="item.refs" :title="item.title" :data="item.data" /> <pieChart v-for="(item, index) in data1" :key="index" class="m-left" :refs="item.refs" :title="item.title" :data="item.data" />
</div> </div>
</div> --> </div>
</div> </div>
</template> </template>
@ -19,21 +20,113 @@ import { ref, onBeforeMount, reactive } from 'vue';
import 'echarts-gl'; import 'echarts-gl';
import pieChart from './components/pie-chart.vue'; import pieChart from './components/pie-chart.vue';
import { ElMessage, ElMessageBox } from 'element-plus'; import { ElMessage, ElMessageBox } from 'element-plus';
import { color } from 'echarts';
let dataColor0 = ['#01D3D3', '#00C4F2', '#4A68FF', '#00DD97', '#01D3D3', '#00C4F2', '#4A68FF', '#00DD97']; let dataColor0 = ['#01D3D3', '#00C4F2', '#4A68FF', '#00DD97', '#01D3D3', '#00C4F2', '#4A68FF', '#00DD97'];
let data = ref([ let data = ref([
{ {
title: '农用地面积数据', title: '农用地面积数据',
data: [], data: [
{
name: '耕地',
itemStyle: {
opacity: 0.9,
color: '#01D3D3',
},
value: '45.60',
},
{
name: '园地',
itemStyle: {
opacity: 0.9,
color: '#00C4F2',
},
value: '28.49',
},
{
name: '草地',
itemStyle: {
opacity: 0.9,
color: '#4A68FF',
},
value: '16.30',
},
{
name: '林地',
itemStyle: {
opacity: 0.9,
color: '#00DD97',
},
value: '17.71',
},
],
refs: 'chart1', refs: 'chart1',
}, },
{ {
title: '土地流转面积数据', title: '土地流转面积数据',
data: [], data: [
{
name: '耕地',
itemStyle: {
opacity: 0.9,
color: '#01D3D3',
},
value: '3.63',
},
{
name: '园地',
itemStyle: {
opacity: 0.9,
color: '#00C4F2',
},
value: '2.65',
},
{
name: '草地',
itemStyle: {
opacity: 0.9,
color: '#4A68FF',
},
value: '2.14',
},
{
name: '林地',
itemStyle: {
opacity: 0.9,
color: '#00DD97',
},
value: '1.65',
},
],
refs: 'chart1', refs: 'chart1',
}, },
{ {
title: '耕地面积数据', title: '耕地面积数据',
data: [], data: [
{
name: '水浇地',
itemStyle: {
opacity: 0.9,
color: '#01D3D3',
},
value: '20.72',
},
{
name: '水田',
itemStyle: {
opacity: 0.9,
color: '#00C4F2',
},
value: '28.49',
},
{
name: '旱地',
itemStyle: {
opacity: 0.9,
color: '#4A68FF',
},
value: '16.30',
},
],
refs: 'chart1', refs: 'chart1',
}, },
]); ]);
@ -41,17 +134,68 @@ let data = ref([
let data1 = ref([ let data1 = ref([
{ {
title: '园地面积数据', title: '园地面积数据',
data: [], data: [
{
name: '果园',
itemStyle: {
opacity: 0.9,
color: '#01D3D3',
},
value: '15.44',
},
{
name: '茶园',
itemStyle: {
opacity: 0.9,
color: '#00C4F2',
},
value: '13.01',
},
],
refs: 'chart1', refs: 'chart1',
}, },
{ {
title: '林地面积数据', title: '林地面积数据',
data: [], data: [
{
name: '灌木从地',
itemStyle: {
opacity: 0.9,
color: '#01D3D3',
},
value: '7.49',
},
{
name: '竹林地',
itemStyle: {
opacity: 0.9,
color: '#00C4F2',
},
value: '8.80',
},
],
refs: 'chart1', refs: 'chart1',
}, },
{ {
title: '草地面积数据', title: '草地面积数据',
data: [], data: [
{
name: '人工牧草地',
itemStyle: {
opacity: 0.9,
color: '#01D3D3',
},
value: '10.71',
},
{
name: '其他',
itemStyle: {
opacity: 0.9,
color: '#00C4F2',
},
value: '1.71',
},
],
refs: 'chart1', refs: 'chart1',
}, },
]); ]);