xiabin
This commit is contained in:
parent
b741c624f2
commit
0c90f9cf1c
@ -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',
|
||||
},
|
||||
]);
|
||||
|
Loading…
x
Reference in New Issue
Block a user