Web/daimp-front
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

打包时echarts.js部分代码会报错；土地资源统计数据99上出不来，重写；

Browse Source
This commit is contained in:
郭永超 2025-07-10 18:27:39 +08:00
parent 575e5d32c6
commit 17645804dc
10 changed files with 425 additions and 305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
main/src/utils/echarts.js
View File

@ -13,8 +13,8 @@ import {
EffectScatterChart,
} from 'echarts/charts';
import 'echarts-gl';
import 'echarts-liquidfill';
import 'echarts-wordcloud';
// import 'echarts-liquidfill';
// import 'echarts-wordcloud';
import {
TitleComponent,

8
sub-government-affairs-service/.env.development
View File

@ -13,11 +13,11 @@ VITE_APP_UPLOAD_API = '/uploadApis'
# VITE_APP_UPLOAD_URL = 'http://47.109.205.240:9204'
# 内网测试库接口地址
VITE_APP_BASE_URL = 'http://192.168.18.88:8080'
VITE_APP_UPLOAD_URL = 'http://192.168.18.88:8080'
VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
VITE_APP_UPLOAD_URL = 'http://192.168.18.99:8080'
# 本地开发接口地址
# VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
# VITE_APP_UPLOAD_URL = 'http://192.168.18.99:8080'
# VITE_APP_BASE_URL = 'http://192.168.18.88:8080'
# VITE_APP_UPLOAD_URL = 'http://192.168.18.88:8080'
VITE_APP_PLATFORM = 'http://localhost:9000/platform'

1
sub-government-affairs-service/src/styles/custom.scss
View File

@ -372,6 +372,7 @@
}
}
// 图表页面饼图条形图样式
.statistics-cont {
padding: 10px 20px;
.statistics-echart-box {

4
sub-government-affairs-service/src/utils/echarts.js
View File

@ -13,8 +13,8 @@ import {
EffectScatterChart,
} from 'echarts/charts';
import 'echarts-gl';
import 'echarts-liquidfill';
import 'echarts-wordcloud';
// import 'echarts-liquidfill';
// import 'echarts-wordcloud';
import {
TitleComponent,

17
sub-government-affairs-service/src/views/inputSuppliesManage/demandManage/demandOverview.vue
View File

@ -1,20 +1,3 @@
<!-- <template>
<div class="custom-page" :style="`background-image: url(${getAssetsFile('images/output/output.png')})`"></div>
</template>
<script setup>
import { ref, watch, onMounted, computed } from 'vue';
import { getAssetsFile } from '@/utils';
</script>
<style scoped lang="scss">
.custom-page {
height: calc(100vh - 150px);
background-size: cover;
background-repeat: no-repeat;
}
</style> -->
<template>
<div class="app-container">
<div class="container-custom">

9
sub-government-affairs-service/src/views/output-products/output-statistics/index.vue
View File

@ -24,8 +24,7 @@ import { getAssetsFile } from '@/utils';
<div class="search-bar-left">
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
<el-form-item label="" style="margin-left: -15px">
<AreaCascader v-model:region-code="formInline.regionCode" v-model:grid-id="formInline.gridId"
label="行政区域-网格" :width="500" />
<AreaCascader v-model:region-code="formInline.regionCode" v-model:grid-id="formInline.gridId" label="行政区域-网格" :width="500" />
</el-form-item>
<el-form-item label="">
<el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
@ -38,13 +37,11 @@ import { getAssetsFile } from '@/utils';
<el-row :gutter="20">
<el-col :span="12" class="statistics-echart-box">
<p class="statistics-echart-title">产出品产量数据</p>
<customEchartPie ref="pie1" :chart-data="chartData1" :option="option" :width="'100%'" :height="'90%'">
</customEchartPie>
<customEchartPie ref="pie1" :chart-data="chartData1" :option="option" :width="'100%'" :height="'90%'"> </customEchartPie>
</el-col>
<el-col :span="12" class="statistics-echart-box">
<p class="statistics-echart-title">产出品产量排行</p>
<customEchartBar ref="pie1" :chart-data="chartData2" :option="option2" :width="'100%'" :height="'100%'">
</customEchartBar>
<customEchartBar ref="pie1" :chart-data="chartData2" :option="option2" :width="'100%'" :height="'100%'"> </customEchartBar>
</el-col>
</el-row>
</div>

283
sub-government-affairs-service/src/views/resource/database/Statistics copy.vue Normal file
View File

@ -0,0 +1,283 @@
<template>
<!-- <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" />
</div>
<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>
</template>
<script setup>
import { getOverview, getSubArea } from '../../../apis/resource/statisticAnalysis';
import { getAssetsFile } from '@/utils';
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: [
{
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: [
{
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: [
{
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',
},
]);
let data1 = ref([
{
title: '园地面积数据',
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: [
{
name: '灌木从地',
itemStyle: {
opacity: 0.9,
color: '#01D3D3',
},
value: '7.49',
},
{
name: '竹林地',
itemStyle: {
opacity: 0.9,
color: '#00C4F2',
},
value: '8.80',
},
],
refs: 'chart1',
},
{
title: '草地面积数据',
data: [
{
name: '人工牧草地',
itemStyle: {
opacity: 0.9,
color: '#01D3D3',
},
value: '10.71',
},
{
name: '其他',
itemStyle: {
opacity: 0.9,
color: '#00C4F2',
},
value: '1.71',
},
],
refs: 'chart1',
},
]);
onBeforeMount(() => {
// getData();
});
const getData = async () => {
try {
let res = await getOverview();
console.log(res);
let res1 = await getOverview({ landTransfer: 1 });
res1.data.list.forEach((data2, index) => {
data.value[1].data.push({
name: data2.landTypeName,
value: data2.area,
itemStyle: {
opacity: 0.9,
color: dataColor0[index],
},
});
});
res.data.list.forEach(async (data1, index) => {
data.value[0].data.push({
name: data1.landTypeName,
value: data1.area,
itemStyle: {
opacity: 0.9,
color: dataColor0[index],
},
});
// data.value[0].data[index].value = data1.area;
// data.value[0].data[index].name = data1.landTypeName;
getOrderData({ pid: data1.landTypeId, landTransfer: 1 }, index);
});
console.log(data.value);
} catch (error) {
ElMessage.error(error.message || '新增失败，请重试');
}
};
const getOrderData = async (datas, indexs) => {
let res = await getSubArea(datas);
if (res.data.title) {
if (res.data.title == '耕地面积数据') {
res.data.data.forEach((data3, index) => {
data.value[2].data.push({
name: data3.landTypeName,
value: data3.area,
itemStyle: {
opacity: 0.9,
color: dataColor0[index],
},
});
});
} else {
res.data.data.forEach((data4, index) => {
console.log(indexs);
data1.value[indexs - 1].data.push({
name: data4.landTypeName,
value: data4.area,
itemStyle: {
opacity: 0.9,
color: dataColor0[index],
},
});
});
}
}
};
</script>
<style scoped lang="scss">
.custom-page {
height: calc(100vh - 150px);
background-size: cover;
background-repeat: no-repeat;
}
.m-left {
margin-left: 2%;
}
</style>

391
sub-government-affairs-service/src/views/resource/database/Statistics.vue
View File

@ -1,283 +1,136 @@
<template>
<!-- <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" />
<div class="app-container">
<div class="container-custom">
<h2 class="custom-h2">统计数据</h2>
<div ref="searchBarRef" class="search-box">
<div class="search-bar">
<div class="search-bar-left">
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
<el-form-item label="" style="margin-left: -15px">
<AreaCascader :region-code="formInline.regionCode" :grid-id="formInline.gridId" label="行政区域-网格" :width="500" />
</el-form-item>
<el-form-item label="">
<el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
<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 class="statistics-cont">
<el-row :gutter="20">
<el-col :span="12" class="statistics-echart-box">
<p class="statistics-echart-title">农用地面积数据</p>
<customEchartPie ref="pie1" :chart-data="chartData1" :option="option" :width="'100%'" :height="'90%'"> </customEchartPie>
</el-col>
<el-col :span="12" class="statistics-echart-box">
<p class="statistics-echart-title">土地流转面积数据</p>
<customEchartPie ref="pie2" :chart-data="chartData2" :option="option" :width="'100%'" :height="'90%'"> </customEchartPie>
</el-col>
<el-col :span="12" class="statistics-echart-box">
<p class="statistics-echart-title">耕地面积数据</p>
<customEchartPie ref="pie3" :chart-data="chartData3" :option="option" :width="'100%'" :height="'90%'"> </customEchartPie>
</el-col>
<el-col :span="12" class="statistics-echart-box">
<p class="statistics-echart-title">园地面积数据</p>
<customEchartPie ref="pie4" :chart-data="chartData4" :option="option" :width="'100%'" :height="'90%'"> </customEchartPie>
</el-col>
<el-col :span="12" class="statistics-echart-box">
<p class="statistics-echart-title">林地面积数据</p>
<customEchartPie ref="pie5" :chart-data="chartData5" :option="option" :width="'100%'" :height="'90%'"> </customEchartPie>
</el-col>
<el-col :span="12" class="statistics-echart-box">
<p class="statistics-echart-title">草地面积数据</p>
<customEchartPie ref="pie6" :chart-data="chartData6" :option="option" :width="'100%'" :height="'90%'"> </customEchartPie>
</el-col>
</el-row>
</div>
</div>
</div>
</template>
<script setup>
import { getOverview, getSubArea } from '../../../apis/resource/statisticAnalysis';
import { getAssetsFile } from '@/utils';
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: [
{
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: [
{
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: [
{
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',
},
]);
import { ref, reactive, computed, onMounted } from 'vue';
import customEchartPie from '@/components/custom-echart-pie';
import customEchartBar from '@/components/custom-echart-bar';
import { ElMessage } from 'element-plus';
let data1 = ref([
{
title: '园地面积数据',
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: [
{
name: '灌木从地',
itemStyle: {
opacity: 0.9,
color: '#01D3D3',
},
value: '7.49',
},
{
name: '竹林地',
itemStyle: {
opacity: 0.9,
color: '#00C4F2',
},
value: '8.80',
},
],
refs: 'chart1',
},
{
title: '草地面积数据',
data: [
{
name: '人工牧草地',
itemStyle: {
opacity: 0.9,
color: '#01D3D3',
},
value: '10.71',
},
{
name: '其他',
itemStyle: {
opacity: 0.9,
color: '#00C4F2',
},
value: '1.71',
},
],
refs: 'chart1',
},
]);
onBeforeMount(() => {
// getData();
// 查询条件
const formInline = reactive({
regionCode: '',
regionName: '',
gridId: '',
gridName: '',
});
const searchForm = ref(null);
const getData = async () => {
try {
let res = await getOverview();
console.log(res);
let res1 = await getOverview({ landTransfer: 1 });
res1.data.list.forEach((data2, index) => {
data.value[1].data.push({
name: data2.landTypeName,
value: data2.area,
itemStyle: {
opacity: 0.9,
color: dataColor0[index],
},
});
});
res.data.list.forEach(async (data1, index) => {
data.value[0].data.push({
name: data1.landTypeName,
value: data1.area,
itemStyle: {
opacity: 0.9,
color: dataColor0[index],
},
});
// data.value[0].data[index].value = data1.area;
// data.value[0].data[index].name = data1.landTypeName;
getOrderData({ pid: data1.landTypeId, landTransfer: 1 }, index);
});
console.log(data.value);
} catch (error) {
ElMessage.error(error.message || '新增失败，请重试');
}
const chartData1 = ref([
{ value: 23.56, name: '草地' },
{ value: 58.02, name: '耕地' },
{ value: 50.05, name: '园地' },
{ value: 38.08, name: '林地' },
]);
const chartData2 = ref([
{ value: 3.65, name: '草地' },
{ value: 2.53, name: '耕地' },
{ value: 1.95, name: '园地' },
{ value: 2.93, name: '林地' },
]);
const chartData3 = ref([
{ value: 8.02, name: '水田' },
{ value: 5.05, name: '旱地' },
{ value: 44.95, name: '水浇地' },
]);
// 此处数据要大的在下，展示出来是按照这个数据的倒序展示的
const chartData4 = ref([
{ value: 20.46, name: '果园' },
{ value: 30.15, name: '茶园' },
{ value: 42.22, name: '其他' },
]);
const chartData5 = ref([
{ value: 18.02, name: '灌木林地' },
{ value: 20.06, name: '竹林地' },
]);
const chartData6 = ref([{ value: 23.56, name: '人工牧草地' }]);
const option = reactive({
tooltip: {
formatter: '{b} ({c} 万亩)',
},
});
const option2 = reactive({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow', // 阴影指示器
},
formatter: '{b}: {c} 吨', // 提示框格式
},
grid: {
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true, // 包含坐标轴标签
},
xAxis: {
type: 'value',
name: '吨',
axisLabel: {
formatter: '{value} 吨',
},
},
yAxis: {
type: 'category',
data: ['凤梨', '铁皮石斛', '芒果', '榴莲', '香蕉', '苦瓜', '丝瓜', '小米椒', '圆茄', '黄皮甘蔗'],
axisLabel: {
interval: 0,
},
},
});
const onSubmit = () => {
console.log(formInline);
};
const getOrderData = async (datas, indexs) => {
let res = await getSubArea(datas);
if (res.data.title) {
if (res.data.title == '耕地面积数据') {
res.data.data.forEach((data3, index) => {
data.value[2].data.push({
name: data3.landTypeName,
value: data3.area,
itemStyle: {
opacity: 0.9,
color: dataColor0[index],
},
});
});
} else {
res.data.data.forEach((data4, index) => {
console.log(indexs);
data1.value[indexs - 1].data.push({
name: data4.landTypeName,
value: data4.area,
itemStyle: {
opacity: 0.9,
color: dataColor0[index],
},
});
});
}
}
};
onMounted(() => {
// onSubmit();
});
</script>
<style scoped lang="scss">
.custom-page {
height: calc(100vh - 150px);
background-size: cover;
background-repeat: no-repeat;
}
.m-left {
margin-left: 2%;
}
</style>
<style lang="scss" scoped></style>

9
sub-government-affairs-service/vite.config.js
View File

@ -22,6 +22,9 @@ export default defineConfig(({ command, mode }) => {
target: 'ESNext',
outDir: 'dist',
minify: 'terser',
rollupOptions: {
external: ['echarts-liquidfill'], // 显式声明外部依赖
},
},
server: {
origin: 'http://localhost:9528/',
@ -72,9 +75,9 @@ export default defineConfig(({ command, mode }) => {
vue(),
qiankun(VITE_APP_NAME, { useDevMode }),
vueSetupExtend(),
eslintPlugin({
include: ['src/**/*.ts', 'src/**/*.vue', 'src/*.ts', 'src/*.vue'],
}),
// eslintPlugin({
// include: ['src/**/*.ts', 'src/**/*.vue', 'src/*.ts', 'src/*.vue'],
// }),
Components({
dirs: ['src/components'],
extensions: ['vue', 'js', 'jsx', 'ts', 'tsx'],

4
sub-operation-service/src/utils/echarts.js
View File

@ -13,8 +13,8 @@ import {
EffectScatterChart,
} from 'echarts/charts';
import 'echarts-gl';
import 'echarts-liquidfill';
import 'echarts-wordcloud';
// import 'echarts-liquidfill';
// import 'echarts-wordcloud';
import {
TitleComponent,