This commit is contained in:
13713575202 2025-07-10 16:34:58 +08:00
parent b741c624f2
commit 0c90f9cf1c

View File

@ -1,6 +1,7 @@
<template>
<div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`">
<!-- <div class="custom-page">
<!-- <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`"> -->
<div class="custom-page">
<!-- <div class="custom-page"> -->
<div class="content">
<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" />
@ -8,7 +9,7 @@
<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" />
</div>
</div> -->
</div>
</div>
</template>
@ -19,21 +20,113 @@ import { ref, onBeforeMount, reactive } from 'vue';
import 'echarts-gl';
import pieChart from './components/pie-chart.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { color } from 'echarts';
let dataColor0 = ['#01D3D3', '#00C4F2', '#4A68FF', '#00DD97', '#01D3D3', '#00C4F2', '#4A68FF', '#00DD97'];
let data = ref([
{
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',
},
{
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',
},
{
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',
},
]);
@ -41,17 +134,68 @@ let data = ref([
let data1 = ref([
{
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',
},
{
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',
},
{
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',
},
]);