数据大屏首页数据修改

This commit is contained in:
13713575202 2025-04-16 19:00:09 +08:00
parent 8c2a42b80b
commit e2e3f3c914
11 changed files with 88 additions and 36 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 MiB

After

Width:  |  Height:  |  Size: 2.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 168 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

View File

@ -49,7 +49,7 @@ export default {
return { return {
baseId: null, baseId: null,
titleList: [ titleList: [
{ name: '产业分布', type: 'pageOne' }, { name: '首\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0页', type: 'pageOne' },
{ name: '科技支撑', type: 'pageTwo' }, { name: '科技支撑', type: 'pageTwo' },
{ name: '产业基地', type: 'pageThree' }, { name: '产业基地', type: 'pageThree' },
{ name: '全维监测', type: 'pageFour' }, { name: '全维监测', type: 'pageFour' },

View File

@ -39,7 +39,8 @@ export default {
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
data: ['产业园规划', '标准农田', '种植业', '标注养殖', '养殖业', '高标准农田'], // data: ['', '', '', '', '', ''],
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#FFFFFF', color: '#FFFFFF',
@ -109,7 +110,47 @@ export default {
}, },
label: { label: {
normal: { normal: {
show: true, show: false,
lineHeight: 30,
formatter: '{c}',
position: 'top',
textStyle: {
color: '#00D6F9',
fontSize: 16,
},
},
},
},
{
type: 'line',
data: [90, 100, 107, 63, 105, 56],
barWidth: '14px',
itemStyle: {
normal: {
color: this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(0,244,255,1)', // 0%
},
{
offset: 1,
color: 'rgba(0,77,167,1)', // 100%
},
],
false
),
shadowColor: 'rgba(0,160,221,1)',
shadowBlur: 4,
},
},
label: {
normal: {
show: false,
lineHeight: 30, lineHeight: 30,
formatter: '{c}', formatter: '{c}',
position: 'top', position: 'top',

View File

@ -3,7 +3,7 @@
<div class="topBox"> <div class="topBox">
<div class="topLft"> <div class="topLft">
<p>6%</p> <p>6%</p>
<p>家庭农场</p> <p>经营主体</p>
</div> </div>
<div class="topRit"> <div class="topRit">
<div class="topList" v-for="(item, index) in dataList" :key="index"> <div class="topList" v-for="(item, index) in dataList" :key="index">
@ -30,10 +30,11 @@ export default {
data() { data() {
return { return {
dataList: [ dataList: [
{ name: '龙头企业', nums: 10, imgs: require('../img/5.png'), homer: '(家)' }, { name: '农户', nums: 125, imgs: require('../img/5.png'), homer: '(家)' },
{ name: '入园参与', nums: 28, imgs: require('../img/6.png'), homer: '(家)' }, { name: '农企/合作社', nums: 28, imgs: require('../img/6.png'), homer: '(家)' },
{ name: '家庭农场', nums: 56, imgs: require('../img/7.png'), homer: '(家)' }, { name: '生产加工企业', nums: 56, imgs: require('../img/7.png'), homer: '(家)' },
{ name: '合作社', nums: 811, imgs: require('../img/8.png'), homer: '(家)' }, { name: '农资企业', nums: 811, imgs: require('../img/8.png'), homer: '(家)' },
{ name: '种源企业', nums: 69, imgs: require('../img/5.png'), homer: '(家)' },
], ],
}; };
}, },
@ -104,10 +105,13 @@ export default {
} }
} }
.topList:nth-child(3) { .topList:nth-child(3) {
margin-top: 30px; margin-top: 16px;
} }
.topList:nth-child(4) { .topList:nth-child(4) {
margin-top: 30px; margin-top: 16px;
}
.topList:nth-child(5) {
margin-top: 16px;
} }
} }
} }

View File

@ -8,35 +8,41 @@
<li> <li>
<img src="../img/output.png" alt="" /> <img src="../img/output.png" alt="" />
<div class="topRit"> <div class="topRit">
<p>农业总产值亿元</p> <!-- <p>农业总产值亿元</p>
<p style="color: #2effb7">1,000.00</p> <p style="color: #2effb7">1,000.00</p> -->
<p>农业人口(万人)</p>
<p style="color: #2effb7">20.49</p>
</div> </div>
</li> </li>
<li> <li>
<img src="../img/level.png" alt="" /> <img src="../img/level.png" alt="" />
<div class="topRit"> <div class="topRit">
<p>产业园总产值亿元</p> <!-- <p>产业园总产值亿元</p>
<p style="color: #ff6e6f">27.51</p> <p style="color: #ff6e6f">27.51</p> -->
<p>耕地面积(万亩)</p>
<p style="color: #ff6e6f">100.45</p>
</div> </div>
</li> </li>
<li> <li>
<img src="../img/production.png" alt="" /> <img src="../img/production.png" alt="" />
<div class="topRit"> <div class="topRit">
<p>主导鸡肉产量</p> <!-- <p>主导鸡肉产量</p>
<p style="color: #fcde1f">30,656.00</p> <p style="color: #fcde1f">30,656.00</p> -->
<p>农业总产值(亿元)</p>
<p style="color: #fcde1f">90.83</p>
</div> </div>
</li> </li>
<li> <li>
<img src="../img/123.png" alt="" /> <img src="../img/123.png" alt="" />
<div class="topRit"> <div class="topRit">
<p>主导小麦产量</p> <p>人均增收(万元)</p>
<p style="color: #00f6ff">44,120.00</p> <p style="color: #00f6ff">1.02</p>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
<div class="topRight" style="text-align: center;"> <div class="topRight" style="text-align: center;">
<img src="../img/3.png" alt="" style="width: 65%;height: 65%;margin: 0 auto;transform: rotate(10deg);"/> <img src="../img/3.png" alt="" style="width: 80%;height: 80%;margin: 0 auto;"/>
</div> </div>
</div> </div>
</template> </template>

View File

@ -21,12 +21,12 @@ export default {
data() { data() {
return { return {
list: [ list: [
{ name: '农产品认证', num: 40.2, percent: '%', img: require('../img/10.png') }, { name: '种子使用', num: 4900.67, percent: '吨', img: require('../img/10.png') },
{ name: '农产品面积', num: 5475, percent: '亩', img: require('../img/11.png') }, { name: '农药使用', num: 5100.15, percent: '吨', img: require('../img/11.png') },
{ name: '综合利用率', num: 93.9, percent: '%', img: require('../img/12.png') }, { name: '化肥使用', num: 9100.59, percent: '吨', img: require('../img/12.png') },
{ name: '化肥利用率', num: 40.2, percent: '%', img: require('../img/13.png') }, { name: '饲料', num: 89043.09, percent: '吨', img: require('../img/13.png') },
{ name: '农药利用率', num: 40.7, percent: '%', img: require('../img/14.png') }, { name: '兽药', num: 110.34, percent: '吨', img: require('../img/14.png') },
{ name: '监测合格率', num: 99.9, percent: '%', img: require('../img/15.png') }, { name: '农机使用', num: 8100.86, percent: '台', img: require('../img/15.png') },
], ],
}; };
}, },

View File

@ -48,7 +48,7 @@ export default {
data() { data() {
return { return {
bg: require('../img/bg.png'), bg: require('../img/bg.png'),
title: ['集约经营主体', '主导产业面积', '产业绿色发展', '主导产业产值', '主导产业占比'], title: ['经营主体数据统计', '溯源赋码与扫码数据统计', '使用投入品数据统计', '土地分布数据', '种养殖数据统计'],
}; };
}, },
watch: { watch: {

View File

@ -183,7 +183,7 @@ export default {
this.statusChart.resize(); this.statusChart.resize();
}, },
initChart2() { initChart2() {
let data = ['三产产值', '二产产值', '一产产值', '产园总产值']; let data = ['种植面积', '养殖面积', '种植基地', '养殖基地'];
let option = { let option = {
grid: { grid: {
top: '8%', top: '8%',
@ -197,7 +197,7 @@ export default {
axisPointer: { axisPointer: {
type: 'shadow', type: 'shadow',
}, },
formatter: '{b0}: {c0}亿元', formatter: '{b0}: {c0}',
}, },
xAxis: { xAxis: {
@ -246,7 +246,8 @@ export default {
color: 'white', color: 'white',
fontSize: 12, fontSize: 12,
}, },
formatter: '{c}' + '亿元', // formatter: '{c}' + '亿',
formatter: '{c}',
}, },
}, },
itemStyle: { itemStyle: {

View File

@ -9,27 +9,27 @@ export default {
return { return {
chartData: [ chartData: [
{ {
name: '三产产值', name: '三岔河镇',
value: 50, value: 50,
test: '备注1', test: '备注1',
}, },
{ {
name: '二产产值', name: '大寺乡',
value: 60, value: 60,
test: '备注2', test: '备注2',
}, },
{ {
name: '二产产值', name: '凤山镇',
value: 66, value: 66,
test: '备注3', test: '备注3',
}, },
{ {
name: '一产产值', name: '小湾镇',
value: 72, value: 72,
test: '备注4', test: '备注4',
}, },
{ {
name: '产园总产值', name: '勐佑镇',
value: 80, value: 80,
test: '备注5', test: '备注5',
}, },
@ -61,7 +61,7 @@ export default {
axisPointer: { axisPointer: {
type: 'shadow', type: 'shadow',
}, },
formatter: '{b0}: {c0}亿元', formatter: '{b0}: {c0}万亩',
}, },
legend: { legend: {
show: false, show: false,
@ -165,7 +165,7 @@ export default {
color: 'white', color: 'white',
fontSize: 16, fontSize: 16,
}, },
formatter: '{c}' + '亿元', formatter: '{c}' + '万亩',
}, },
}, },
barWidth: 12, barWidth: 12,