This commit is contained in:
13713575202 2025-04-20 15:26:50 +08:00
parent d5f528bc03
commit fc74f46a05
11 changed files with 138 additions and 119 deletions

View File

@ -56,7 +56,7 @@ export default {
{ name: '科技支撑', type: 'pageTwo' }, { name: '科技支撑', type: 'pageTwo' },
{ name: '产业基地', type: 'pageThree' }, { name: '产业基地', type: 'pageThree' },
{ name: '全维监测', type: 'pageFour' }, { name: '全维监测', type: 'pageFour' },
{ name: '朔源追朔', type: 'pageFive' }, { name: '农产品溯源', type: 'pageFive' },
], ],
titleImg1: require('./img/1.png'), titleImg1: require('./img/1.png'),
titleImg2: require('./img/2.png'), titleImg2: require('./img/2.png'),

View File

@ -75,13 +75,12 @@ export default {
{ name: '旱地', id: '01' }, { name: '旱地', id: '01' },
{ name: '果园', id: '02' }, { name: '果园', id: '02' },
{ name: '水浇地', id: '03' }, { name: '水浇地', id: '03' },
{ name: '沟渠', id: '04' }, { name: '灌溉水田', id: '04' },
{ name: '田坎', id: '05' }, { name: '茶园', id: '05' },
{ name: '茶园', id: '06' }, { name: '菜地', id: '06' },
{ name: '设施农用地', id: '07' },
], ],
checkAll: false, checkAll: false,
checkedlist: ['01','02','03','04','05','06','07'], checkedlist: ['01', '02', '03', '04', '05', '06'],
isIndeterminate: true, isIndeterminate: true,
}; };
}, },
@ -101,13 +100,13 @@ export default {
}); });
this.checkedlist = val ? list : []; this.checkedlist = val ? list : [];
this.isIndeterminate = false; this.isIndeterminate = false;
this.upLayersIds(this.checkedlist) this.upLayersIds(this.checkedlist);
}, },
doSingleChange(value) { doSingleChange(value) {
let checkedCount = value.length; let checkedCount = value.length;
this.checkAll = checkedCount === this.options.length; this.checkAll = checkedCount === this.options.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length; this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
this.upLayersIds(this.checkedlist) this.upLayersIds(this.checkedlist);
}, },
}, },
}; };
@ -131,7 +130,7 @@ export default {
border-radius: 8px; border-radius: 8px;
min-height: 50px; min-height: 50px;
z-index: 9999; z-index: 9999;
background: rgba(255,255,255,0.1); background: rgba(255, 255, 255, 0.1);
} }
} }
#landMap::v-deep { #landMap::v-deep {

View File

@ -21,19 +21,18 @@ export default {
await this.$nextTick(); await this.$nextTick();
const { rows } = await selectBatchInfo(this.baseId); const { rows } = await selectBatchInfo(this.baseId);
this.datalist = [ this.datalist = [
{ name: '凤山镇', value: 3.5 }, { name: '勐佑镇', value: 37.28 },
{ name: '勐佑镇', value: 1.2 }, { name: '三岔河镇', value: 22.1 },
{ name: '三岔河镇', value: 3.0 }, { name: '小湾镇', value: 9.76 },
{ name: '小湾镇', value: 0.4 }, { name: '洛党镇', value: 18.7 },
{ name: '洛党镇', value: 0.9 }, { name: '雪山镇', value: 14.7 },
{ name: '雪山镇', value: 1.2 }, { name: '营盘镇', value: 35.05 },
{ name: '营盘镇', value: 3.2 }, { name: '郭大寨乡', value: 6.3 },
{ name: '郭大寨乡', value: 1.3 }, { name: '大寺乡', value: 13.5 },
{ name: '大寺乡', value: 3.5 }, { name: '鲁史镇', value: 27.7 },
{ name: '鲁史镇', value: 0.4 }, { name: '诗礼乡', value: 12.57 },
{ name: '诗礼乡', value: 0.9 }, { name: '新华乡', value: 22.1 },
{ name: '新华乡', value: 1.1 }, { name: '腰街乡', value: 8.7 },
{ name: '腰街乡', value: 1.5 },
]; ];
let option = { let option = {
tooltip: { tooltip: {

View File

@ -50,24 +50,24 @@ export default {
await this.$nextTick(); await this.$nextTick();
const { rows } = await selectBatchInfo(this.baseId); const { rows } = await selectBatchInfo(this.baseId);
let product = [ let product = [
{ name: '2020', value: 35 }, { name: '2020', value: 5 },
{ name: '2021', value: 9 }, { name: '2021', value: 2 },
{ name: '2022', value: 12 }, { name: '2022', value: 3 },
{ name: '2023', value: 30 }, { name: '2023', value: 5 },
{ name: '2024', value: 4 }, { name: '2024', value: 4 },
{ name: '2025', value: 9 }, { name: '2025', value: 6 },
]; ];
let option = { let option = {
// tooltip: { tooltip: {
// trigger: 'axis', trigger: 'axis',
// showContent: false, showContent: false,
// axisPointer: { axisPointer: {
// type: 'shadow', type: 'shadow',
// crossStyle: { crossStyle: {
// color: '#999', color: '#999',
// }, },
// }, },
// }, },
grid: { grid: {
left: 30, left: 30,
top: 20, top: 20,
@ -109,6 +109,16 @@ export default {
data: product.map((item) => item.value), data: product.map((item) => item.value),
type: 'line', type: 'line',
smooth: true, smooth: true,
emphasis: {
label: {
show: true,
fontSize: 10,
formatter: '{b}年: {c}百万',
position: 'right',
color: '#fff',
textBorderColor: 'transparent',
},
},
areaStyle: { areaStyle: {
color: { color: {
type: 'linear', // 线 type: 'linear', // 线

View File

@ -117,37 +117,31 @@ export default {
type: 'pie', type: 'pie',
roseType: 'area', roseType: 'area',
center: ['50%', '50%'], center: ['50%', '50%'],
radius: ['20%', '80%'], radius: ['30%', '80%'],
emphasis: { emphasis: {
label: { label: {
show: true, show: true,
fontSize: 12, fontSize: 12,
formatter: '{c}个', formatter: '{b}{c}个',
position: 'top', position: 'top',
color: '#fff', color: '#fff',
textBorderColor: 'transparent', textBorderColor: 'transparent',
}, },
}, },
barWidth: 20, label: {
show: true, //
},
labelLine: {
// 线
show: true, //
position:'outer',
},
itemStyle: { itemStyle: {
normal: { normal: {
borderRadius: 8, borderRadius: 8,
// borderRadius: [20, 20, 0, 0],
color: (params) => { color: (params) => {
return this.$colorList[params.dataIndex]; return this.$colorList[params.dataIndex];
}, },
// color: {
// type: 'linear', // 线
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// { offset: 0, color: '#adf5a1' },
// { offset: 1, color: '#198905' },
// ],
// global: false, // false
// },
}, },
}, },
}, },

View File

@ -50,24 +50,27 @@ export default {
await this.$nextTick(); await this.$nextTick();
const { rows } = await selectBatchInfo(this.baseId); const { rows } = await selectBatchInfo(this.baseId);
let product = [ let product = [
{ name: '旱地', value: 3.2 }, { name: '水稻', value: 9.3 },
{ name: '果园', value: 1.2 }, { name: '玉米', value: 33.63 },
{ name: '水浇地', value: 3.5 }, { name: '小麦', value: 17.93 },
{ name: '灌溉水田', value: 1.6 }, { name: '薯类', value: 2.42 },
{ name: '茶园', value: 3.5 }, { name: '茶叶', value: 40.17 },
{ name: '菜地', value: 1.2 }, { name: '核桃', value: 172.14 },
{ name: '坚果', value: 32.76 },
{ name: '中药材', value: 1.7 },
{ name: '烤烟', value: 7.55 },
]; ];
let option = { let option = {
// tooltip: { tooltip: {
// trigger: 'axis', trigger: 'axis',
// showContent: false, showContent: false,
// axisPointer: { axisPointer: {
// type: 'shadow', type: 'shadow',
// crossStyle: { crossStyle: {
// color: '#999', color: '#999',
// }, },
// }, },
// }, },
grid: { grid: {
left: 30, left: 30,
top: 20, top: 20,
@ -106,7 +109,7 @@ export default {
series: [ series: [
{ {
// data: rows.map((item) => item.value), // data: rows.map((item) => item.value),
data:product, data: product,
type: 'pie', type: 'pie',
roseType: 'area', roseType: 'area',
center: ['50%', '50%'], center: ['50%', '50%'],
@ -115,12 +118,23 @@ export default {
label: { label: {
show: true, show: true,
fontSize: 12, fontSize: 12,
formatter: '{c}万亩', formatter: '{b}{c}万亩',
position: 'top', position: 'top',
color: '#fff', color: '#fff',
textBorderColor: 'transparent', textBorderColor: 'transparent',
}, },
}, },
label: {
show: true, //
},
labelLine: {
// 线
show: true, //
normal: {
length: 10,
length2: 5,
},
},
barWidth: 20, barWidth: 20,
itemStyle: { itemStyle: {
normal: { normal: {

View File

@ -29,12 +29,11 @@ export default {
{ name: '旱地', id: '01' }, { name: '旱地', id: '01' },
{ name: '果园', id: '02' }, { name: '果园', id: '02' },
{ name: '水浇地', id: '03' }, { name: '水浇地', id: '03' },
{ name: '沟渠', id: '04' }, { name: '灌溉水田', id: '04' },
{ name: '田坎', id: '05' }, { name: '茶园', id: '05' },
{ name: '茶园', id: '06' }, { name: '菜地', id: '06' },
{ name: '设施农用地', id: '07' },
], ],
currentType: { name: '茶园', id: '06' }, currentType: { name: '茶园', id: '05' },
}; };
}, },
props: { props: {
@ -160,8 +159,20 @@ export default {
itemStyle: { itemStyle: {
normal: { normal: {
borderRadius: [0, 10, 10, 0], borderRadius: [0, 10, 10, 0],
color: (params) => { // color: (params) => {
return this.$colorList[params.dataIndex]; // return this.$colorList[params.dataIndex];
// },
color: {
type: 'linear', // 线
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{ offset: 0, color: '#99dcf3' },
{ offset: 1, color: '#01589c' },
],
global: false, // false
}, },
}, },
}, },

View File

@ -82,29 +82,24 @@ export default {
], ],
series: [ series: [
{ {
name: '赋码',
type: 'bar', type: 'bar',
data: [80, 80, 97, 53, 95, 26], data: [80, 80, 97, 53, 95, 26],
barWidth: '14px', barWidth: '14px',
itemStyle: { itemStyle: {
normal: { normal: {
color: this.$echarts.graphic.LinearGradient( color: {
0, type: 'linear', // 线
0, x: 0,
0, y: 0,
1, x2: 0,
[ y2: 1,
{ colorStops: [
offset: 0, { offset: 0, color: '#b9e1ba' },
color: 'rgba(0,244,255,1)', // 0% { offset: 1, color: '#2c8b30' },
},
{
offset: 1,
color: 'rgba(0,77,167,1)', // 100%
},
], ],
false },
), shadowColor: 'rgba(19,99,21,1)',
shadowColor: 'rgba(0,160,221,1)',
shadowBlur: 4, shadowBlur: 4,
}, },
}, },
@ -122,28 +117,25 @@ export default {
}, },
}, },
{ {
name: '扫码',
type: 'line', type: 'line',
data: [90, 100, 107, 63, 105, 56], data: [90, 100, 107, 63, 105, 56],
barWidth: '14px', barWidth: '14px',
itemStyle: { itemStyle: {
normal: { normal: {
color: this.$echarts.graphic.LinearGradient( color: {
0, type: 'linear', // 线
0, x: 0,
0, y: 0,
1, x2: 0,
[ y2: 1,
{ colorStops: [
offset: 0, { offset: 0, color: 'rgba(0,244,255,1)' },
color: 'rgba(0,244,255,1)', // 0% { offset: 1, color: 'rgba(0,77,167,1)' },
},
{
offset: 1,
color: 'rgba(0,77,167,1)', // 100%
},
], ],
false shadowColor: 'rgba(0,160,221,1)',
), shadowBlur: 4,
},
shadowColor: 'rgba(0,160,221,1)', shadowColor: 'rgba(0,160,221,1)',
shadowBlur: 4, shadowBlur: 4,
}, },

View File

@ -2,8 +2,8 @@
<div class="w100 h100"> <div class="w100 h100">
<div class="topBox"> <div class="topBox">
<div class="topLft"> <div class="topLft">
<p>6%</p> <p>3200万元</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">

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: {
@ -247,7 +247,7 @@ export default {
fontSize: 12, fontSize: 12,
}, },
// formatter: '{c}' + '亿', // formatter: '{c}' + '亿',
formatter: '{c}', formatter: '{c}万吨',
}, },
}, },
itemStyle: { itemStyle: {
@ -261,7 +261,7 @@ export default {
}, },
}, },
barWidth: 10, barWidth: 10,
data: [40, 63, 20, 100], data: [63, 100, 30, 26],
}, },
{ {
name: '外框', name: '外框',