up
This commit is contained in:
parent
51f754a51d
commit
797688e4fd
BIN
src/assets/images/crops.png
Executable file
BIN
src/assets/images/crops.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
@ -42,11 +42,46 @@
|
||||
</div>
|
||||
<div ref="typesofDiv" class="typesofDiv"></div>
|
||||
<div class="tableDiv">
|
||||
<el-table max-height="200" class="ones" :data="tableData" style="width: 415px">
|
||||
<el-table-column prop="date" label="类型" />
|
||||
<el-table-column prop="name" label="面积" />
|
||||
<el-table-column prop="address" label="占比" />
|
||||
</el-table>
|
||||
<div class="Crops">
|
||||
<div>
|
||||
<img src="@/assets/images/crops.png" alt="" />
|
||||
小麦
|
||||
</div>
|
||||
<div style="color: rgba(110, 209, 84, 1);">12364亩</div>
|
||||
<div style="color: rgba(110, 209, 84, 1);">35%</div>
|
||||
</div>
|
||||
<div class="Crops">
|
||||
<div>
|
||||
<img src="@/assets/images/crops.png" alt="" />
|
||||
玉米
|
||||
</div>
|
||||
<div style="color: rgba(229, 205, 38, 1);">12364亩</div>
|
||||
<div style="color: rgba(229, 205, 38, 1);">35%</div>
|
||||
</div>
|
||||
<div class="Crops">
|
||||
<div>
|
||||
<img src="@/assets/images/crops.png" alt="" />
|
||||
大豆
|
||||
</div>
|
||||
<div style="color: rgba(252, 169, 63, 1);">12364亩</div>
|
||||
<div style="color: rgba(252, 169, 63, 1);">35%</div>
|
||||
</div>
|
||||
<div class="Crops">
|
||||
<div>
|
||||
<img src="@/assets/images/crops.png" alt="" />
|
||||
地瓜
|
||||
</div>
|
||||
<div style="color: rgba(103, 153, 242, 1);">12364亩</div>
|
||||
<div style="color: rgba(103, 153, 242, 1);">35%</div>
|
||||
</div>
|
||||
<div class="Crops">
|
||||
<div>
|
||||
<img src="@/assets/images/crops.png" alt="" />
|
||||
花生
|
||||
</div>
|
||||
<div style="color: rgba(4, 179, 228, 1);">12364亩</div>
|
||||
<div style="color: rgba(4, 179, 228, 1);">35%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -287,10 +322,10 @@ let tableData = [
|
||||
},
|
||||
];
|
||||
let TypeTime = {
|
||||
大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490],
|
||||
小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929],
|
||||
地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323],
|
||||
花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279],
|
||||
大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490, 2323],
|
||||
小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929, 3434],
|
||||
地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323, 2545],
|
||||
花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279, 1739],
|
||||
};
|
||||
|
||||
// 组件挂载完成后执行
|
||||
@ -307,7 +342,6 @@ onMounted(() => {
|
||||
farmland();
|
||||
ProgressBar();
|
||||
ASdivision();
|
||||
leftProgressBar();
|
||||
});
|
||||
|
||||
/*-------------地图------------------------*/
|
||||
@ -929,11 +963,11 @@ function areachar() {
|
||||
fontFamily: 'Din-Light',
|
||||
},
|
||||
color: [
|
||||
'#123dac',
|
||||
'#73e2e2',
|
||||
'#ff7e85',
|
||||
'#9b52ff',
|
||||
'#fac524',
|
||||
'rgba(252, 169, 63, 0.8)',
|
||||
'rgba(110, 209, 84, 0.8)',
|
||||
'rgba(103, 153, 242, 0.8)',
|
||||
'rgba(4, 199, 247, 0.9)',
|
||||
'rgba(229, 205, 38, 0.8)',
|
||||
'#46caff',
|
||||
'#a1e867',
|
||||
'#10b2b2',
|
||||
@ -966,6 +1000,15 @@ function areachar() {
|
||||
fontSize: 24,
|
||||
},
|
||||
},
|
||||
// legend: {
|
||||
// show: true,
|
||||
// top: '10',
|
||||
// left: 'center',
|
||||
// textStyle: { color: 'rgba(255,255,255,.9)' },
|
||||
// itemWidth: 20,
|
||||
// itemHeight: 12.5,
|
||||
// icon: 'stack',
|
||||
// },
|
||||
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
@ -999,9 +1042,42 @@ function areachar() {
|
||||
grid: {
|
||||
left: 60,
|
||||
right: 10,
|
||||
top: 50,
|
||||
top: 60,
|
||||
bottom: 50,
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
// start: 0,//默认为0
|
||||
// end: 100,//默认为100
|
||||
type: 'slider',
|
||||
show: false,
|
||||
// xAxisIndex: [0],
|
||||
handleSize: 0, //滑动条的 左右2个滑动条的大小
|
||||
startValue: 0, // 初始显示值
|
||||
endValue: 6, // 结束显示值
|
||||
height: 10, //组件高度
|
||||
left: '5%', //左边的距离
|
||||
right: '4%', //右边的距离
|
||||
bottom: 5, //底边的距离
|
||||
borderColor: '#000',
|
||||
fillerColor: '#269cdb',
|
||||
borderRadius: 5,
|
||||
backgroundColor: '#33384b', //两边未选中的滑动条区域的颜色
|
||||
showDataShadow: false, //是否显示数据阴影 默认auto
|
||||
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
|
||||
realtime: true, //是否实时更新
|
||||
filterMode: 'filter',
|
||||
},
|
||||
//下面这个属性是里面拖到
|
||||
{
|
||||
type: 'inside',
|
||||
show: true,
|
||||
// xAxisIndex: [0],
|
||||
start: 1, //默认为1
|
||||
end: 100, //默认为100
|
||||
},
|
||||
],
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
@ -1056,9 +1132,31 @@ function areachar() {
|
||||
cursor: 'pointer',
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(252, 169, 63, 0.8)',
|
||||
shadowColor: 'rgba(18,61,172,0.5)',
|
||||
shadowBlur: 10,
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(252, 169, 63, 0.8)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(252, 169, 63, 0)',
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '小麦',
|
||||
@ -1069,9 +1167,31 @@ function areachar() {
|
||||
cursor: 'pointer',
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(110, 209, 84, 0.8)',
|
||||
shadowColor: 'rgba(115,226,226,0.5)',
|
||||
shadowBlur: 10,
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(110, 209, 84, 0.8)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(110, 209, 84, 0)',
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '地瓜',
|
||||
@ -1082,9 +1202,31 @@ function areachar() {
|
||||
cursor: 'pointer',
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(103, 153, 242, 0.8)',
|
||||
shadowColor: 'rgba(255,126,133,0.5)',
|
||||
shadowBlur: 10,
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(103, 153, 242, 0.8)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(103, 153, 242, 0)',
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '花生',
|
||||
@ -1095,9 +1237,67 @@ function areachar() {
|
||||
cursor: 'pointer',
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(4, 199, 247, 0.9)',
|
||||
shadowColor: 'rgba(255,120,168,0.5)',
|
||||
shadowBlur: 10,
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(4, 199, 247, 0.9)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(4, 199, 247, 0)',
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '玉米',
|
||||
data: TypeTime.玉米,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
smoothMonotone: 'x',
|
||||
cursor: 'pointer',
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(229, 205, 38, 0.8)',
|
||||
shadowColor: 'rgba(255,120,168,0.5)',
|
||||
shadowBlur: 10,
|
||||
},
|
||||
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(229, 205, 38, 0.8)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(229, 205, 38, 0)',
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -1108,75 +1308,6 @@ function areachar() {
|
||||
});
|
||||
}
|
||||
|
||||
function leftProgressBar() {
|
||||
const leftProgressBarrDivIntance = echarts.init(leftProgressBarDiv.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 && leftProgressBarrDivIntance.setOption(option, true);
|
||||
// useEcharts(leftProgressBarrDivIntance, option);
|
||||
}
|
||||
|
||||
function typesof() {
|
||||
const typesofDivIntance = echarts.init(typesofDiv.value);
|
||||
var option = {
|
||||
@ -1414,8 +1545,8 @@ function farmland() {
|
||||
],
|
||||
};
|
||||
farmlandDivIntance.on('click', function (params) {
|
||||
console.log(params.name)
|
||||
})
|
||||
console.log(params.name);
|
||||
});
|
||||
|
||||
option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
|
||||
useEcharts(farmlandDivIntance, option);
|
||||
@ -2016,7 +2147,8 @@ $height: calc(100vh - 100px);
|
||||
left: 20px;
|
||||
height: $height;
|
||||
width: 25%;
|
||||
background: rgba(2, 31, 26, 0.3);
|
||||
background: rgba(2, 31, 26, 0.85);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||||
|
||||
.leftTop {
|
||||
max-width: calc(100% - 20px);
|
||||
@ -2054,10 +2186,38 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.tableDiv {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
// background: rgba(255, 255, 255, 0.05);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 85%;
|
||||
flex-direction: column;
|
||||
padding: 5px 10px 5px 10px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
.Crops {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
height: 31px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
opacity: 1;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(21, 173, 148, 0.1) 0%,
|
||||
rgba(21, 173, 148, 0) 100%
|
||||
);
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.el-checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.ones) {
|
||||
width: 100%;
|
||||
@ -2088,7 +2248,8 @@ $height: calc(100vh - 100px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: rgba(2, 31, 26, 0.3);
|
||||
background: rgba(2, 31, 26, 0.85);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||||
|
||||
.rightTop {
|
||||
width: 100%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user