修改
This commit is contained in:
parent
d5f528bc03
commit
fc74f46a05
@ -56,7 +56,7 @@ export default {
|
||||
{ name: '科技支撑', type: 'pageTwo' },
|
||||
{ name: '产业基地', type: 'pageThree' },
|
||||
{ name: '全维监测', type: 'pageFour' },
|
||||
{ name: '朔源追朔', type: 'pageFive' },
|
||||
{ name: '农产品溯源', type: 'pageFive' },
|
||||
],
|
||||
titleImg1: require('./img/1.png'),
|
||||
titleImg2: require('./img/2.png'),
|
||||
|
||||
@ -75,13 +75,12 @@ export default {
|
||||
{ name: '旱地', id: '01' },
|
||||
{ name: '果园', id: '02' },
|
||||
{ name: '水浇地', id: '03' },
|
||||
{ name: '沟渠', id: '04' },
|
||||
{ name: '田坎', id: '05' },
|
||||
{ name: '茶园', id: '06' },
|
||||
{ name: '设施农用地', id: '07' },
|
||||
{ name: '灌溉水田', id: '04' },
|
||||
{ name: '茶园', id: '05' },
|
||||
{ name: '菜地', id: '06' },
|
||||
],
|
||||
checkAll: false,
|
||||
checkedlist: ['01','02','03','04','05','06','07'],
|
||||
checkedlist: ['01', '02', '03', '04', '05', '06'],
|
||||
isIndeterminate: true,
|
||||
};
|
||||
},
|
||||
@ -101,13 +100,13 @@ export default {
|
||||
});
|
||||
this.checkedlist = val ? list : [];
|
||||
this.isIndeterminate = false;
|
||||
this.upLayersIds(this.checkedlist)
|
||||
this.upLayersIds(this.checkedlist);
|
||||
},
|
||||
doSingleChange(value) {
|
||||
let checkedCount = value.length;
|
||||
this.checkAll = 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;
|
||||
min-height: 50px;
|
||||
z-index: 9999;
|
||||
background: rgba(255,255,255,0.1);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
#landMap::v-deep {
|
||||
|
||||
@ -21,19 +21,18 @@ export default {
|
||||
await this.$nextTick();
|
||||
const { rows } = await selectBatchInfo(this.baseId);
|
||||
this.datalist = [
|
||||
{ name: '凤山镇', value: 3.5 },
|
||||
{ name: '勐佑镇', value: 1.2 },
|
||||
{ name: '三岔河镇', value: 3.0 },
|
||||
{ name: '小湾镇', value: 0.4 },
|
||||
{ name: '洛党镇', value: 0.9 },
|
||||
{ name: '雪山镇', value: 1.2 },
|
||||
{ name: '营盘镇', value: 3.2 },
|
||||
{ name: '郭大寨乡', value: 1.3 },
|
||||
{ name: '大寺乡', value: 3.5 },
|
||||
{ name: '鲁史镇', value: 0.4 },
|
||||
{ name: '诗礼乡', value: 0.9 },
|
||||
{ name: '新华乡', value: 1.1 },
|
||||
{ name: '腰街乡', value: 1.5 },
|
||||
{ name: '勐佑镇', value: 37.28 },
|
||||
{ name: '三岔河镇', value: 22.1 },
|
||||
{ name: '小湾镇', value: 9.76 },
|
||||
{ name: '洛党镇', value: 18.7 },
|
||||
{ name: '雪山镇', value: 14.7 },
|
||||
{ name: '营盘镇', value: 35.05 },
|
||||
{ name: '郭大寨乡', value: 6.3 },
|
||||
{ name: '大寺乡', value: 13.5 },
|
||||
{ name: '鲁史镇', value: 27.7 },
|
||||
{ name: '诗礼乡', value: 12.57 },
|
||||
{ name: '新华乡', value: 22.1 },
|
||||
{ name: '腰街乡', value: 8.7 },
|
||||
];
|
||||
let option = {
|
||||
tooltip: {
|
||||
|
||||
@ -50,24 +50,24 @@ export default {
|
||||
await this.$nextTick();
|
||||
const { rows } = await selectBatchInfo(this.baseId);
|
||||
let product = [
|
||||
{ name: '2020', value: 35 },
|
||||
{ name: '2021', value: 9 },
|
||||
{ name: '2022', value: 12 },
|
||||
{ name: '2023', value: 30 },
|
||||
{ name: '2020', value: 5 },
|
||||
{ name: '2021', value: 2 },
|
||||
{ name: '2022', value: 3 },
|
||||
{ name: '2023', value: 5 },
|
||||
{ name: '2024', value: 4 },
|
||||
{ name: '2025', value: 9 },
|
||||
{ name: '2025', value: 6 },
|
||||
];
|
||||
let option = {
|
||||
// tooltip: {
|
||||
// trigger: 'axis',
|
||||
// showContent: false,
|
||||
// axisPointer: {
|
||||
// type: 'shadow',
|
||||
// crossStyle: {
|
||||
// color: '#999',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
showContent: false,
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
crossStyle: {
|
||||
color: '#999',
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 30,
|
||||
top: 20,
|
||||
@ -109,6 +109,16 @@ export default {
|
||||
data: product.map((item) => item.value),
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 10,
|
||||
formatter: '{b}年： {c}百万',
|
||||
position: 'right',
|
||||
color: '#fff',
|
||||
textBorderColor: 'transparent',
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
|
||||
@ -117,37 +117,31 @@ export default {
|
||||
type: 'pie',
|
||||
roseType: 'area',
|
||||
center: ['50%', '50%'],
|
||||
radius: ['20%', '80%'],
|
||||
radius: ['30%', '80%'],
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 12,
|
||||
formatter: '{c}个',
|
||||
formatter: '{b}{c}个',
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
textBorderColor: 'transparent',
|
||||
},
|
||||
},
|
||||
barWidth: 20,
|
||||
label: {
|
||||
show: true, // 关闭显示
|
||||
},
|
||||
labelLine: {
|
||||
// 控制标签引导线
|
||||
show: true, // 关闭显示
|
||||
position:'outer',
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderRadius: 8,
|
||||
// borderRadius: [20, 20, 0, 0],
|
||||
color: (params) => {
|
||||
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
|
||||
// },
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -50,24 +50,27 @@ export default {
|
||||
await this.$nextTick();
|
||||
const { rows } = await selectBatchInfo(this.baseId);
|
||||
let product = [
|
||||
{ name: '旱地', value: 3.2 },
|
||||
{ name: '果园', value: 1.2 },
|
||||
{ name: '水浇地', value: 3.5 },
|
||||
{ name: '灌溉水田', value: 1.6 },
|
||||
{ name: '茶园', value: 3.5 },
|
||||
{ name: '菜地', value: 1.2 },
|
||||
{ name: '水稻', value: 9.3 },
|
||||
{ name: '玉米', value: 33.63 },
|
||||
{ name: '小麦', value: 17.93 },
|
||||
{ name: '薯类', value: 2.42 },
|
||||
{ name: '茶叶', value: 40.17 },
|
||||
{ name: '核桃', value: 172.14 },
|
||||
{ name: '坚果', value: 32.76 },
|
||||
{ name: '中药材', value: 1.7 },
|
||||
{ name: '烤烟', value: 7.55 },
|
||||
];
|
||||
let option = {
|
||||
// tooltip: {
|
||||
// trigger: 'axis',
|
||||
// showContent: false,
|
||||
// axisPointer: {
|
||||
// type: 'shadow',
|
||||
// crossStyle: {
|
||||
// color: '#999',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
showContent: false,
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
crossStyle: {
|
||||
color: '#999',
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 30,
|
||||
top: 20,
|
||||
@ -106,7 +109,7 @@ export default {
|
||||
series: [
|
||||
{
|
||||
// data: rows.map((item) => item.value),
|
||||
data:product,
|
||||
data: product,
|
||||
type: 'pie',
|
||||
roseType: 'area',
|
||||
center: ['50%', '50%'],
|
||||
@ -115,12 +118,23 @@ export default {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 12,
|
||||
formatter: '{c}万亩',
|
||||
formatter: '{b}{c}万亩',
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
textBorderColor: 'transparent',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true, // 关闭显示
|
||||
},
|
||||
labelLine: {
|
||||
// 控制标签引导线
|
||||
show: true, // 关闭显示
|
||||
normal: {
|
||||
length: 10,
|
||||
length2: 5,
|
||||
},
|
||||
},
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
@ -184,7 +198,7 @@ export default {
|
||||
}
|
||||
.charts-content {
|
||||
// width: calc(100% - 100px);
|
||||
width: calc(100% - 0px);
|
||||
width: calc(100% - 0px);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,12 +29,11 @@ export default {
|
||||
{ name: '旱地', id: '01' },
|
||||
{ name: '果园', id: '02' },
|
||||
{ name: '水浇地', id: '03' },
|
||||
{ name: '沟渠', id: '04' },
|
||||
{ name: '田坎', id: '05' },
|
||||
{ name: '茶园', id: '06' },
|
||||
{ name: '设施农用地', id: '07' },
|
||||
{ name: '灌溉水田', id: '04' },
|
||||
{ name: '茶园', id: '05' },
|
||||
{ name: '菜地', id: '06' },
|
||||
],
|
||||
currentType: { name: '茶园', id: '06' },
|
||||
currentType: { name: '茶园', id: '05' },
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@ -160,8 +159,20 @@ export default {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderRadius: [0, 10, 10, 0],
|
||||
color: (params) => {
|
||||
return this.$colorList[params.dataIndex];
|
||||
// color: (params) => {
|
||||
// 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
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -82,29 +82,24 @@ export default {
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '赋码',
|
||||
type: 'bar',
|
||||
data: [80, 80, 97, 53, 95, 26],
|
||||
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% 处的颜色
|
||||
},
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#b9e1ba' },
|
||||
{ offset: 1, color: '#2c8b30' },
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: 'rgba(0,160,221,1)',
|
||||
},
|
||||
shadowColor: 'rgba(19,99,21,1)',
|
||||
shadowBlur: 4,
|
||||
},
|
||||
},
|
||||
@ -122,28 +117,25 @@ export default {
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '扫码',
|
||||
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% 处的颜色
|
||||
},
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(0,244,255,1)' },
|
||||
{ offset: 1, color: 'rgba(0,77,167,1)' },
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: 'rgba(0,160,221,1)',
|
||||
shadowBlur: 4,
|
||||
},
|
||||
shadowColor: 'rgba(0,160,221,1)',
|
||||
shadowBlur: 4,
|
||||
},
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
<div class="w100 h100">
|
||||
<div class="topBox">
|
||||
<div class="topLft">
|
||||
<p>6%</p>
|
||||
<p>经营主体</p>
|
||||
<p>3200万元</p>
|
||||
<p>企业总产值</p>
|
||||
</div>
|
||||
<div class="topRit">
|
||||
<div class="topList" v-for="(item, index) in dataList" :key="index">
|
||||
|
||||
@ -48,7 +48,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
bg: require('../img/bg.png'),
|
||||
title: ['经营主体数据统计', '溯源赋码与扫码数据统计', '使用投入品数据统计', '土地分布数据', '种养殖数据统计'],
|
||||
title: ['经营主体数据统计', '溯源赋码与扫码数据统计', '使用投入品数据统计', '土地分布数据', '种殖数据统计'],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
||||
@ -183,7 +183,7 @@ export default {
|
||||
this.statusChart.resize();
|
||||
},
|
||||
initChart2() {
|
||||
let data = ['种植面积', '养殖面积', '种植基地', '养殖基地'];
|
||||
let data = ['核桃', '茶叶', '小麦', '玉米'];
|
||||
let option = {
|
||||
grid: {
|
||||
top: '8%',
|
||||
@ -197,7 +197,7 @@ export default {
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
formatter: '{b0}: {c0}',
|
||||
formatter: '{b0}: {c0}万吨',
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
@ -247,7 +247,7 @@ export default {
|
||||
fontSize: 12,
|
||||
},
|
||||
// formatter: '{c}' + '亿元',
|
||||
formatter: '{c}',
|
||||
formatter: '{c}万吨',
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
@ -261,7 +261,7 @@ export default {
|
||||
},
|
||||
},
|
||||
barWidth: 10,
|
||||
data: [40, 63, 20, 100],
|
||||
data: [63, 100, 30, 26],
|
||||
},
|
||||
{
|
||||
name: '外框',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user