2023-04-17 18:02:03 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div class="center">
|
|
|
|
|
|
<div style="width: 100%; height: 100%" id="cesiumContainer"></div>
|
|
|
|
|
|
<div class="leftWra">
|
|
|
|
|
|
<div class="leftTop">
|
|
|
|
|
|
<div class="title">作物分类面积统计</div>
|
|
|
|
|
|
<div ref="areaDiv" class="areaDiv"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="leftbottom">
|
|
|
|
|
|
<div class="title">作物类型统计</div>
|
|
|
|
|
|
<div ref="typesofDiv" class="typesofDiv"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="rightWra">
|
|
|
|
|
|
<div class="rightTop">
|
|
|
|
|
|
<div class="title">
|
|
|
|
|
|
作物类型统计-高标准农田
|
|
|
|
|
|
<p>
|
|
|
|
|
|
下载
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="@/assets/icons/svg/downloads.svg"
|
|
|
|
|
|
style="width: 14px; height: 14px; cursor: pointer"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div ref="farmlandDiv" class="farmlandDiv"></div>
|
|
|
|
|
|
<div ref="ProgressBarDiv" class="ProgressBar"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="rightbottom">
|
|
|
|
|
|
<div class="title">
|
|
|
|
|
|
作物类型统计-行政区划
|
|
|
|
|
|
<p>
|
|
|
|
|
|
下载
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="@/assets/icons/svg/downloads.svg"
|
|
|
|
|
|
style="width: 14px; height: 14px; cursor: pointer"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-select v-model="value" clearable placeholder="Select">
|
|
|
|
|
|
<el-option
|
|
|
|
|
|
v-for="item in options"
|
|
|
|
|
|
:key="item.value"
|
|
|
|
|
|
:label="item.label"
|
|
|
|
|
|
:value="item.value"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
<div ref="ASdivisionDiv" class="ASdivision"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="legend">
|
|
|
|
|
|
<p>图例</p>
|
|
|
|
|
|
<div class="mt-4">
|
|
|
|
|
|
<el-checkbox
|
|
|
|
|
|
style="
|
|
|
|
|
|
background: rgba(102, 142, 214, 0.8);
|
|
|
|
|
|
border: 1px solid rgba(102, 142, 214, 1);
|
|
|
|
|
|
"
|
|
|
|
|
|
v-model="checked3"
|
|
|
|
|
|
label="小麦"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<el-checkbox
|
|
|
|
|
|
style="
|
|
|
|
|
|
background: rgba(255, 225, 104, 0.8);
|
|
|
|
|
|
border: 1px solid rgba(255, 225, 104, 1);
|
|
|
|
|
|
"
|
|
|
|
|
|
v-model="checked4"
|
|
|
|
|
|
label="玉米"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<el-checkbox
|
|
|
|
|
|
style="
|
|
|
|
|
|
background: rgba(156, 220, 130, 0.8);
|
|
|
|
|
|
border: 1px solid rgba(156, 220, 130, 1);
|
|
|
|
|
|
"
|
|
|
|
|
|
v-model="checked3"
|
|
|
|
|
|
label="大豆"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<el-checkbox
|
|
|
|
|
|
style="
|
|
|
|
|
|
background: rgba(209, 91, 127, 0.8);
|
|
|
|
|
|
border: 1px solid rgba(209, 91, 127, 1);
|
|
|
|
|
|
"
|
|
|
|
|
|
v-model="checked4"
|
|
|
|
|
|
label="地瓜"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<el-checkbox
|
|
|
|
|
|
style="
|
|
|
|
|
|
background: rgba(212, 236, 89, 0.8);
|
|
|
|
|
|
border: 1px solid rgba(212, 236, 89, 1);
|
|
|
|
|
|
"
|
|
|
|
|
|
v-model="checked3"
|
|
|
|
|
|
label="花生"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<el-checkbox
|
|
|
|
|
|
style="
|
|
|
|
|
|
background: rgba(50, 211, 235, 0.8);
|
|
|
|
|
|
border: 1px solid rgba(50, 211, 235, 1);
|
|
|
|
|
|
"
|
|
|
|
|
|
v-model="checked4"
|
|
|
|
|
|
label="蓝莓"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<el-checkbox
|
|
|
|
|
|
style="
|
|
|
|
|
|
background: rgba(91, 196, 159, 0.8);
|
|
|
|
|
|
border: 1px solid rgba(91, 196, 159, 1);
|
|
|
|
|
|
"
|
|
|
|
|
|
v-model="checked3"
|
|
|
|
|
|
label="茶叶"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<el-checkbox
|
|
|
|
|
|
style="
|
|
|
|
|
|
background: rgba(254, 182, 77, 0.8);
|
|
|
|
|
|
border: 1px solid rgba(254, 182, 77, 1);
|
|
|
|
|
|
"
|
|
|
|
|
|
v-model="checked4"
|
|
|
|
|
|
label="马铃薯"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<el-checkbox
|
|
|
|
|
|
style="
|
|
|
|
|
|
background: rgba(250, 129, 109, 0.8);
|
|
|
|
|
|
border: 1px solid rgba(250, 129, 109, 1);
|
|
|
|
|
|
"
|
|
|
|
|
|
v-model="checked3"
|
|
|
|
|
|
label="白菜和萝卜"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bottom_center"></div>
|
|
|
|
|
|
</div>
|
2023-04-16 22:33:44 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
|
2023-04-17 18:02:03 +08:00
|
|
|
|
<script setup>
|
|
|
|
|
|
import { ref, onMounted, inject } from 'vue';
|
|
|
|
|
|
import * as echarts from 'echarts';
|
2023-04-16 22:33:44 +08:00
|
|
|
|
|
2023-04-17 18:02:03 +08:00
|
|
|
|
const viewer = ref(null);
|
|
|
|
|
|
const areaDiv = ref(null);
|
|
|
|
|
|
const typesofDiv = ref(null);
|
|
|
|
|
|
const farmlandDiv = ref(null);
|
|
|
|
|
|
const ProgressBarDiv = ref(null);
|
|
|
|
|
|
const ASdivisionDiv = ref(null);
|
|
|
|
|
|
const value = ref('');
|
|
|
|
|
|
var data = {
|
|
|
|
|
|
title: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六', '区域七', '区域八'],
|
|
|
|
|
|
corn: [333.3, null, 500, 500, 333.3, null, 333.3, 500],
|
|
|
|
|
|
soybean: [333.3, null, null, null, 333.3, null, 333.3, null],
|
|
|
|
|
|
peanut: [333.3, 500, 500, null, 333.3, 500, 333.3, null],
|
|
|
|
|
|
wheat: [null, 500, null, 500, null, 500, null, null],
|
|
|
|
|
|
Blueberries: [null, null, null, null, null, null, null, 500],
|
|
|
|
|
|
};
|
|
|
|
|
|
const options = [
|
|
|
|
|
|
{
|
|
|
|
|
|
value: 'Option1',
|
|
|
|
|
|
label: 'Option1',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
value: 'Option2',
|
|
|
|
|
|
label: 'Option2',
|
|
|
|
|
|
},
|
|
|
|
|
|
];
|
|
|
|
|
|
// 组件挂载完成后执行
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
initMap();
|
|
|
|
|
|
areachar();
|
|
|
|
|
|
typesof();
|
|
|
|
|
|
farmland();
|
|
|
|
|
|
ProgressBar();
|
|
|
|
|
|
ASdivision();
|
|
|
|
|
|
});
|
|
|
|
|
|
function initMap() {
|
|
|
|
|
|
viewer.value = new Cesium.Viewer('cesiumContainer', {});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//
|
|
|
|
|
|
function areachar() {
|
|
|
|
|
|
const areaDivIntance = echarts.init(areaDiv.value);
|
|
|
|
|
|
var option = {
|
|
|
|
|
|
// backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'shadow',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
top: '15%',
|
|
|
|
|
|
right: '3%',
|
|
|
|
|
|
left: '11%',
|
|
|
|
|
|
bottom: '12%',
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
data: ['小麦', '玉米', '大豆', '花生', '蓝莓'],
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#C0C4CC',
|
|
|
|
|
|
width: 1,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
margin: 10,
|
|
|
|
|
|
color: 'rgba(255, 255, 255, 0.7)',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
yAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
formatter: '{value}',
|
|
|
|
|
|
color: 'rgba(255, 255, 255, 0.7)',
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: 'rgba(192,196,204,1)',
|
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
name: '面积(亩)',
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '面积',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
data: [3598, 1235, 2354, 3251, 1652],
|
|
|
|
|
|
barWidth: '14px',
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
|
|
|
0,
|
|
|
|
|
|
0,
|
|
|
|
|
|
0,
|
|
|
|
|
|
1,
|
|
|
|
|
|
[
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: 'rgba(71,179,161,0.8)', // 0% 处的颜色
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: 'rgba(212,236,89,1) ', // 100% 处的颜色
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
false
|
|
|
|
|
|
),
|
|
|
|
|
|
barBorderRadius: [30, 30, 30, 30],
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'top',
|
|
|
|
|
|
formatter: '{c}',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: 'rgba(255, 255, 255, 0.8)',
|
|
|
|
|
|
fontSize: '14',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
right: 0,
|
|
|
|
|
|
top: 14,
|
|
|
|
|
|
data: ['面积'],
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: ' rgba(255,255,255,0.7)',
|
|
|
|
|
|
fontSize: '14',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
option && areaDivIntance.setOption(option);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function typesof() {
|
|
|
|
|
|
const typesofDivIntance = echarts.init(typesofDiv.value);
|
|
|
|
|
|
var option = {
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'item',
|
|
|
|
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
|
|
|
|
|
},
|
|
|
|
|
|
color: [
|
|
|
|
|
|
'rgba(212,236,89,0.8)',
|
|
|
|
|
|
'rgba(102,142,214,0.8)',
|
|
|
|
|
|
'rgba(156,220,130,0.8)',
|
|
|
|
|
|
'rgba(255,225,104,0.8)',
|
|
|
|
|
|
], // 指定饼图颜色
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
orient: 'vertical', //图例方向分水平和垂直
|
|
|
|
|
|
icon: 'rect', //图例样式
|
|
|
|
|
|
x: 'center', //图例位置
|
|
|
|
|
|
bottom: 'bottom',
|
|
|
|
|
|
data: ['花生', '小麦', '大豆', '玉米'],
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: ' rgba(255,255,255,0.7)',
|
|
|
|
|
|
fontSize: '14',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '占比',
|
|
|
|
|
|
type: 'pie',
|
|
|
|
|
|
radius: ['50%', '70%'],
|
|
|
|
|
|
avoidLabelOverlap: true,
|
|
|
|
|
|
label: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'left',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: 'rgba(41,255,219,1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: '30',
|
|
|
|
|
|
fontWeight: 'bold',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
labelLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: [
|
|
|
|
|
|
{ value: 25, name: '花生' },
|
|
|
|
|
|
{ value: 25, name: '小麦' },
|
|
|
|
|
|
{ value: 25, name: '大豆' },
|
|
|
|
|
|
{ value: 25, name: '玉米' },
|
|
|
|
|
|
],
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
option && typesofDivIntance.setOption(option);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function farmland() {
|
|
|
|
|
|
const farmlandDivIntance = echarts.init(farmlandDiv.value);
|
|
|
|
|
|
var option = {
|
|
|
|
|
|
title: {
|
|
|
|
|
|
text: '',
|
|
|
|
|
|
subtext: '',
|
|
|
|
|
|
},
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'shadow',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
icon: 'circle',
|
|
|
|
|
|
left: 'center',
|
|
|
|
|
|
top: '5',
|
|
|
|
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
containLabel: true,
|
|
|
|
|
|
bottom: '10%',
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
data: ['区域一', '区域二', '区域三', '区域四', '区域五'],
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#C0C4CC',
|
|
|
|
|
|
width: 1,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
margin: 10,
|
|
|
|
|
|
color: 'rgba(255, 255, 255, 0.7)',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: 'rgba(192,196,204,1)',
|
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '生活',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barWidth: 14,
|
|
|
|
|
|
stack: '数量',
|
|
|
|
|
|
data: [1666, 1666, 1666, 1666, 1666],
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
//颜色渐变
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: 'rgba(102, 142, 214, 0.8)',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: 'rgba(102, 142, 214, 0.8)',
|
|
|
|
|
|
},
|
|
|
|
|
|
]),
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '工业',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barWidth: 30,
|
|
|
|
|
|
stack: '数量',
|
|
|
|
|
|
data: [1666, 1666, 1666, 1666, 1666],
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
//颜色渐变
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: 'rgba(255, 225, 104, 0.8)',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: 'rgba(255, 225, 104, 0.8)',
|
|
|
|
|
|
},
|
|
|
|
|
|
]),
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '农业',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barWidth: 30,
|
|
|
|
|
|
stack: '数量',
|
|
|
|
|
|
data: [1666, 1666, 1666, 1666, 1666],
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
//颜色渐变
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: 'rgba(209, 91, 127, 0.8)',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: 'rgba(209, 91, 127, 0.8)',
|
|
|
|
|
|
},
|
|
|
|
|
|
]),
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
|
|
|
|
|
|
}
|
|
|
|
|
|
function ProgressBar() {
|
|
|
|
|
|
const ProgressBarDivIntance = echarts.init(ProgressBarDiv.value);
|
|
|
|
|
|
var option = {
|
|
|
|
|
|
// backgroundColor: '#031d33',
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
top: 0,
|
|
|
|
|
|
bottom: 0,
|
|
|
|
|
|
left: '10%',
|
|
|
|
|
|
right: '10%',
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
boundaryGap: [0, 0],
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
data: [''],
|
|
|
|
|
|
axisLine: { show: false },
|
|
|
|
|
|
axisTick: [
|
|
|
|
|
|
{
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '金额',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
zlevel: 1,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
barBorderRadius: 30,
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: 'rgba(7,99,84,0.95) ',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: 'rgba(71,179,161,0.95)',
|
|
|
|
|
|
},
|
|
|
|
|
|
]),
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
barWidth: 20,
|
|
|
|
|
|
data: [10],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '背景',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barWidth: 20,
|
|
|
|
|
|
barGap: '-100%',
|
|
|
|
|
|
data: [20],
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: 'rgba(255, 255, 255, 0.2)',
|
|
|
|
|
|
|
|
|
|
|
|
barBorderRadius: 50,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
};
|
|
|
|
|
|
option && ProgressBarDivIntance.setOption(option);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function ASdivision(params) {
|
|
|
|
|
|
const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
|
|
|
|
|
|
var option = {
|
|
|
|
|
|
// title: {
|
|
|
|
|
|
// text: 'BY制程单位：',
|
|
|
|
|
|
// left: '1%',
|
|
|
|
|
|
// top: '1%',
|
|
|
|
|
|
// textStyle: {
|
|
|
|
|
|
// fontSize: 16,
|
|
|
|
|
|
// color: '#9d9d9d',
|
|
|
|
|
|
// fontWeight: 'bold',
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
// legend: {
|
|
|
|
|
|
// data: ['正式工占比', '派遣工占比'],
|
|
|
|
|
|
// orient: 'horizontal',
|
|
|
|
|
|
// itemHeight: 20,
|
|
|
|
|
|
// itemWidth: 40,
|
|
|
|
|
|
// left: '30%',
|
|
|
|
|
|
// top: '8%',
|
|
|
|
|
|
// textStyle: {
|
|
|
|
|
|
// fontSize: 16,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
// 设置图表的位置
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
bottom: '8%',
|
|
|
|
|
|
left: '6%',
|
|
|
|
|
|
right: '6%',
|
|
|
|
|
|
top: '6%',
|
|
|
|
|
|
containLabel: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
// X轴
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
|
|
|
|
|
|
// 坐标轴刻度
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false, // 是否显示坐标轴刻度 默认显示
|
|
|
|
|
|
},
|
|
|
|
|
|
// 坐标轴轴线
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
// 是否显示坐标轴轴线 默认显示
|
|
|
|
|
|
show: false, // 是否显示坐标轴轴线 默认显示
|
|
|
|
|
|
},
|
|
|
|
|
|
// 坐标轴在图表区域中的分隔线
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: false, // 是否显示分隔线。默认数值轴显示
|
|
|
|
|
|
},
|
|
|
|
|
|
// 坐标轴刻度标签
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: false, // 是否显示刻度标签 默认显示
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
// Y轴
|
|
|
|
|
|
yAxis: [
|
|
|
|
|
|
// 左侧Y轴
|
|
|
|
|
|
{
|
|
|
|
|
|
// 坐标轴类型, 'category' 类目轴，适用于离散的类目数据
|
|
|
|
|
|
// 为该类型时必须通过 data 设置类目数据
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
// 坐标轴刻度
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false, // 是否显示坐标轴刻度 默认显示
|
|
|
|
|
|
},
|
|
|
|
|
|
// 坐标轴轴线
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
// 是否显示坐标轴轴线 默认显示
|
|
|
|
|
|
show: false, // 是否显示坐标轴轴线 默认显示
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
// 坐标轴线线的颜色
|
|
|
|
|
|
color: '#cdd3ee',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
// 坐标轴在图表区域中的分隔线
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: false, // 是否显示分隔线。默认数值轴显示
|
|
|
|
|
|
},
|
|
|
|
|
|
// 坐标轴刻度标签
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: true, // 是否显示刻度标签 默认显示
|
|
|
|
|
|
fontSize: 16, // 文字的字体大小
|
|
|
|
|
|
color: 'rgba(255, 255, 255, 1)', // 刻度标签文字的颜色
|
|
|
|
|
|
// 使用字符串模板，模板变量为刻度默认标签 {value}
|
|
|
|
|
|
formatter: '{value}',
|
|
|
|
|
|
},
|
|
|
|
|
|
// 类目数据，在类目轴（type: 'category'）中有效
|
|
|
|
|
|
data: data.title,
|
|
|
|
|
|
inverse: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
// 系列列表
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'bar', // 系列类型
|
|
|
|
|
|
name: '玉米', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
|
|
|
|
|
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
|
|
|
|
|
stack: '总量',
|
|
|
|
|
|
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
|
|
|
|
|
// 图形上的文本标签
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'inside',
|
|
|
|
|
|
formatter: '玉米',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
fontWeight: 'bolder',
|
|
|
|
|
|
color: 'rgba(255,255,255,1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
// 图形样式
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: '#fdad3c',
|
|
|
|
|
|
},
|
|
|
|
|
|
data: data.corn, // 系列中的数据内容数组
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'bar', // 系列类型
|
|
|
|
|
|
name: '大豆', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
|
|
|
|
|
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
|
|
|
|
|
stack: '总量',
|
|
|
|
|
|
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
|
|
|
|
|
// 图形上的文本标签
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'inside',
|
|
|
|
|
|
formatter: '大豆',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
fontWeight: 'bolder',
|
|
|
|
|
|
color: 'rgba(255,255,255,1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
// 图形样式
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: 'rgba(156, 220, 130, 0.8)',
|
|
|
|
|
|
},
|
|
|
|
|
|
data: data.soybean, // 系列中的数据内容数组
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'bar', // 系列类型
|
|
|
|
|
|
name: '花生', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
|
|
|
|
|
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
|
|
|
|
|
stack: '总量',
|
|
|
|
|
|
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
|
|
|
|
|
// 图形上的文本标签
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'inside',
|
|
|
|
|
|
formatter: '花生',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
fontWeight: 'bolder',
|
|
|
|
|
|
color: 'rgba(255,255,255,1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
// 图形样式
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: 'rgba(212, 236, 89, 0.8)',
|
|
|
|
|
|
},
|
|
|
|
|
|
data: data.peanut, // 系列中的数据内容数组
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'bar', // 系列类型
|
|
|
|
|
|
name: '小麦', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
|
|
|
|
|
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
|
|
|
|
|
stack: '总量',
|
|
|
|
|
|
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
|
|
|
|
|
// 图形上的文本标签
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'inside',
|
|
|
|
|
|
formatter: '小麦',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
fontWeight: 'bolder',
|
|
|
|
|
|
color: 'rgba(255,255,255,1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
// 图形样式
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: 'rgba(102, 142, 214, 0.8)',
|
|
|
|
|
|
},
|
|
|
|
|
|
data: data.wheat, // 系列中的数据内容数组
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'bar', // 系列类型
|
|
|
|
|
|
name: '蓝莓', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
|
|
|
|
|
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
|
|
|
|
|
stack: '总量',
|
|
|
|
|
|
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
|
|
|
|
|
// 图形上的文本标签
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'inside',
|
|
|
|
|
|
formatter: '蓝莓',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
fontWeight: 'bolder',
|
|
|
|
|
|
color: 'rgba(255,255,255,1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
// 图形样式
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: 'rgba(50, 211, 235, 0.8)',
|
|
|
|
|
|
},
|
|
|
|
|
|
data: data.Blueberries, // 系列中的数据内容数组
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
};
|
|
|
|
|
|
option && ASdivisionDivIntance.setOption(option);
|
2023-04-16 22:33:44 +08:00
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
2023-04-17 18:02:03 +08:00
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
$height: calc(100vh - 100px);
|
|
|
|
|
|
.center {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
.title {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 45px;
|
|
|
|
|
|
background: url('@/assets/images/title.png');
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
line-height: 45px;
|
|
|
|
|
|
padding-left: 46px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
p {
|
|
|
|
|
|
width: 79px;
|
|
|
|
|
|
height: 25px;
|
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
|
180deg,
|
|
|
|
|
|
rgba(16, 111, 111, 1) 0%,
|
|
|
|
|
|
rgba(47, 214, 214, 1) 100%
|
|
|
|
|
|
);
|
|
|
|
|
|
border: 1.5px solid rgba(23, 194, 180, 1);
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-right: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.leftWra {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 20px;
|
|
|
|
|
|
top: 50px;
|
|
|
|
|
|
width: 455px;
|
|
|
|
|
|
height: 957px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
background: rgba(2, 31, 26, 0.3);
|
|
|
|
|
|
|
|
|
|
|
|
.leftTop {
|
|
|
|
|
|
width: 455px;
|
|
|
|
|
|
height: 397px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
.areaDiv {
|
|
|
|
|
|
width: 415px;
|
|
|
|
|
|
height: 327px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
padding: 1px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.leftbottom {
|
|
|
|
|
|
width: 455px;
|
|
|
|
|
|
height: 337px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
.typesofDiv {
|
|
|
|
|
|
width: 410px;
|
|
|
|
|
|
height: 267px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.rightWra {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 50px;
|
|
|
|
|
|
right: 20px;
|
|
|
|
|
|
width: 455px;
|
|
|
|
|
|
height: 957px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
background: rgba(2, 31, 26, 0.3);
|
|
|
|
|
|
.rightTop {
|
|
|
|
|
|
width: 455px;
|
|
|
|
|
|
height: 439px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
.farmlandDiv {
|
|
|
|
|
|
width: 415px;
|
|
|
|
|
|
height: 340px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
.ProgressBar {
|
|
|
|
|
|
width: 372px;
|
|
|
|
|
|
height: 9px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.rightbottom {
|
|
|
|
|
|
width: 455px;
|
|
|
|
|
|
height: 490px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.el-select {
|
|
|
|
|
|
width: 400px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
background: rgba(22, 94, 102, 1);
|
|
|
|
|
|
border: 1px solid rgba(4, 153, 153, 1) !important;
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
:deep(.el-input__wrapper) {
|
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.ASdivision {
|
|
|
|
|
|
width: 415px;
|
|
|
|
|
|
height: 368px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.legend {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 1296px;
|
|
|
|
|
|
top: 540px;
|
|
|
|
|
|
width: 129px;
|
|
|
|
|
|
height: 338px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
background: rgba(2, 31, 26, 0.6);
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding: 10px 10px 10px 10px;
|
|
|
|
|
|
p {
|
|
|
|
|
|
margin: 10px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
letter-spacing: 0px;
|
|
|
|
|
|
line-height: 0px;
|
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
.mt-4 {
|
|
|
|
|
|
.el-checkbox--large {
|
|
|
|
|
|
height: 30px;
|
|
|
|
|
|
width: 108px;
|
|
|
|
|
|
margin-bottom: 2px;
|
|
|
|
|
|
margin: 2px 10px;
|
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
letter-spacing: 0px;
|
|
|
|
|
|
line-height: 0px;
|
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
:deep(.el-checkbox__label) {
|
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2023-04-16 22:33:44 +08:00
|
|
|
|
|
2023-04-17 18:02:03 +08:00
|
|
|
|
.bottom_center {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
left: 693px;
|
|
|
|
|
|
top: 975px;
|
|
|
|
|
|
width: 732px;
|
|
|
|
|
|
height: 75px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
background: rgba(2, 31, 26, 0.6);
|
|
|
|
|
|
border: 1px solid rgba(4, 153, 153, 1);
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
