土地资源布局调整
This commit is contained in:
parent
764c59a18f
commit
65461a1950
@ -48,7 +48,8 @@ module.exports = {
|
||||
'camelcase': [0, {
|
||||
'properties': 'always'
|
||||
}],
|
||||
'comma-dangle': [1, 'off'],
|
||||
// 'comma-dangle': [1, 'off'],
|
||||
"comma-dangle": ["error", "never"],
|
||||
'comma-spacing': [2, {
|
||||
'before': false,
|
||||
'after': true
|
||||
|
||||
@ -22,35 +22,31 @@
|
||||
<div v-if="type != 'pageFive' && type != 'pageFour'" class="boxLeftTop">
|
||||
<div class="title">{{ title[0] }}</div>
|
||||
<div class="content">
|
||||
<slot name="five" />
|
||||
<slot name="one" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type != 'pageFive' && type != 'pageFour'" class="boxLeftCenter">
|
||||
<div class="title">{{ title[1] }}</div>
|
||||
<div class="content">
|
||||
<slot name="five" />
|
||||
<slot name="two" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type != 'pageFive' && type != 'pageFour'" class="boxLeftBottom">
|
||||
<div class="title">{{ title[2] }}</div>
|
||||
<div class="content">
|
||||
<slot name="four" />
|
||||
<slot name="three" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxTop" />
|
||||
<div v-if="type != 'pageThree' && type != 'pageFive' && type != 'pageLand'" class="boxCentLeft">
|
||||
<slot name="one" />
|
||||
</div>
|
||||
<div class="boxRightTop">
|
||||
<div class="title">{{ title[3] }}</div>
|
||||
<div class="content">
|
||||
<slot name="two" />
|
||||
<slot name="four" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxRightCenter">
|
||||
<div class="title">{{ title[4] }}</div>
|
||||
<div class="content">
|
||||
<slot name="three" />
|
||||
<slot name="five" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxRightBottom">
|
||||
@ -59,11 +55,6 @@
|
||||
<slot name="six" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type == 'pageFive' || type == 'pageFour'" class="left">
|
||||
<div class="content">
|
||||
<slot name="seven" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -110,11 +101,13 @@ export default {
|
||||
});
|
||||
this.checkedlist = val ? list : [];
|
||||
this.isIndeterminate = false;
|
||||
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)
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -132,9 +132,12 @@ const mapMixinLand = {
|
||||
devicePointList.push(marker);
|
||||
}
|
||||
});
|
||||
this.map.add(new this.AMap.OverlayGroup(devicePointList));
|
||||
this.map.add(new this.AMap.OverlayGroup(devicePointList));
|
||||
this.loading = false;
|
||||
},
|
||||
upLayersIds(ids) {
|
||||
console.info('upLayersIds**********',ids)
|
||||
},
|
||||
/** 获取地块中心点 */
|
||||
getAreaCenter(location) {
|
||||
var total = location.length;
|
||||
|
||||
@ -1,20 +1,23 @@
|
||||
<template>
|
||||
<div class="industrialBase">
|
||||
<layOutLand :baseId="baseId" :title="title">
|
||||
<template v-slot:one>
|
||||
<land-area-total :baseId="baseId"></land-area-total>
|
||||
</template>
|
||||
<template v-slot:two>
|
||||
<land-type-compose :baseId="baseId"></land-type-compose>
|
||||
<land-resource-pro :baseId="baseId"></land-resource-pro>
|
||||
</template>
|
||||
<template v-slot:three>
|
||||
<land-type-distribution :baseId="baseId"></land-type-distribution>
|
||||
<landProbenefit :baseId="baseId"></landProbenefit>
|
||||
</template>
|
||||
<template v-slot:four>
|
||||
<land-area-total :baseId="baseId"></land-area-total>
|
||||
<land-type-compose :baseId="baseId"></land-type-compose>
|
||||
</template>
|
||||
<template v-slot:five>
|
||||
<plant-area :baseId="baseId"></plant-area>
|
||||
<land-type-distribution :baseId="baseId"></land-type-distribution>
|
||||
</template>
|
||||
<template v-slot:six>
|
||||
<land-type-area :baseId="baseId"></land-type-area>
|
||||
<land-type-area :baseId="baseId"></land-type-area>
|
||||
</template>
|
||||
</layOutLand>
|
||||
<el-dialog :visible.sync="show" width="60%" custom-class="taskDetail" :modal="false">
|
||||
@ -29,11 +32,12 @@ import layOutLand from '../layOutLand.vue';
|
||||
import baseInfo from './baseInfo.vue';
|
||||
import productPrices from './productPrices.vue';
|
||||
import farmTask from './farmTask.vue';
|
||||
import plantArea from './plantArea.vue';
|
||||
import landResourcePro from './landResourcePro.vue';
|
||||
import landTypeCompose from './landTypeCompose.vue';
|
||||
import landTypeDistribution from './landTypeDistribution.vue';
|
||||
import landTypeArea from './landTypeArea.vue';
|
||||
import landAreaTotal from './landAreaTotal.vue';
|
||||
import landProbenefit from './landProbenefit.vue'
|
||||
import task from './task.vue';
|
||||
export default {
|
||||
components: {
|
||||
@ -41,11 +45,12 @@ export default {
|
||||
baseInfo,
|
||||
productPrices,
|
||||
farmTask,
|
||||
plantArea,
|
||||
landResourcePro,
|
||||
landTypeCompose,
|
||||
landTypeDistribution,
|
||||
landTypeArea,
|
||||
landAreaTotal,
|
||||
landProbenefit,
|
||||
task,
|
||||
},
|
||||
props: {
|
||||
@ -53,7 +58,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: ['耕地面积统计', '农村土地资源项目', '项目效益分析', '耕地类型', '根底类型面积统计','作物情况'],
|
||||
title: ['耕地面积统计', '农村土地资源项目', '项目效益分析','耕地类型', '耕地类型面积统计', '作物情况', ],
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
|
||||
170
src/views/dataV/pageLand/landProbenefit.vue
Normal file
170
src/views/dataV/pageLand/landProbenefit.vue
Normal file
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="land-Pro-benefit-warp">
|
||||
<div class="filter-warp">
|
||||
<el-dropdown @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
{{ currentType && currentType.id ? currentType.name : '请选择地区' }}
|
||||
<el-icon class="el-icon-arrow-down"><arrow-down /></el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="(n, indexn) in typelist" :key="n.id" :command="n"> {{ n.name }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div id="landProbenefit" class="charts-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { selectBatchInfo } from '@/api/agriculture/dataStatistics';
|
||||
import { bar, autoHover } from '../echartsOption';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
typelist: [
|
||||
{ name: '勐佑镇', id: '01' },
|
||||
{ name: '三岔河镇', id: '02' },
|
||||
{ name: '小湾镇', id: '03' },
|
||||
{ name: '洛党镇', id: '04' },
|
||||
{ name: '雪山镇', id: '05' },
|
||||
{ name: '营盘镇', id: '06' },
|
||||
{ name: '郭大寨乡', id: '07' },
|
||||
{ name: '大寺乡', id: '08' },
|
||||
{ name: '鲁史镇', id: '09' },
|
||||
{ name: '诗礼乡', id: '010' },
|
||||
{ name: '新华乡', id: '011' },
|
||||
{ name: '腰街乡', id: '012' },
|
||||
],
|
||||
currentType: { name: '勐佑镇', id: '01' },
|
||||
};
|
||||
},
|
||||
props: {
|
||||
baseId: Number,
|
||||
},
|
||||
watch: {
|
||||
baseId: {
|
||||
handler: async function (n) {
|
||||
if (n) {
|
||||
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: '2024', value: 4 },
|
||||
{ name: '2025', value: 9 },
|
||||
];
|
||||
let option = {
|
||||
// tooltip: {
|
||||
// trigger: 'axis',
|
||||
// showContent: false,
|
||||
// axisPointer: {
|
||||
// type: 'shadow',
|
||||
// crossStyle: {
|
||||
// color: '#999',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
grid: {
|
||||
left: 30,
|
||||
top: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
},
|
||||
xAxis: {
|
||||
// show:false,
|
||||
type: 'category',
|
||||
// data: rows.map((item) => item.name),
|
||||
data: product.map((item) => item.name),
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, // 显示分割线
|
||||
lineStyle: {
|
||||
type: 'dashed', // 设置为虚线
|
||||
width: 0.5, // 分割线宽度
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, // 显示分割线
|
||||
lineStyle: {
|
||||
type: 'dashed', // 设置为虚线
|
||||
width: 0.5, // 分割线宽度
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// data: rows.map((item) => item.value),
|
||||
data: product.map((item) => item.value),
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#99dcf3' },
|
||||
{ offset: 1, color: '#01589c' },
|
||||
],
|
||||
global: false, // 默认为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
let myChart = this.$echarts.init(document.getElementById('landProbenefit'));
|
||||
myChart.setOption(option);
|
||||
autoHover(myChart, option, 1500);
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
handleCommand(data) {
|
||||
console.info('handleCommand', data);
|
||||
this.currentType = data;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.land-Pro-benefit-warp {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.filter-warp {
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
.el-dropdown {
|
||||
width: 100px;
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
span {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.charts-content {
|
||||
width: calc(100% - 100px);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
198
src/views/dataV/pageLand/landResourcePro.vue
Normal file
198
src/views/dataV/pageLand/landResourcePro.vue
Normal file
@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div class="land-type-area-warp">
|
||||
<!-- <div class="filter-warp">
|
||||
<el-dropdown @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
{{ currentType && currentType.id ? currentType.name : '请选择地区' }}
|
||||
<el-icon class="el-icon-arrow-down"><arrow-down /></el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="(n, indexn) in typelist" :key="n.id" :command="n"> {{ n.name }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div> -->
|
||||
<div id="landResourcePro" class="charts-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { selectBatchInfo } from '@/api/agriculture/dataStatistics';
|
||||
import { bar, autoHover } from '../echartsOption';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
typelist: [
|
||||
{ name: '勐佑镇', id: '01' },
|
||||
{ name: '三岔河镇', id: '02' },
|
||||
{ name: '小湾镇', id: '03' },
|
||||
{ name: '洛党镇', id: '04' },
|
||||
{ name: '雪山镇', id: '05' },
|
||||
{ name: '营盘镇', id: '06' },
|
||||
{ name: '郭大寨乡', id: '07' },
|
||||
{ name: '大寺乡', id: '08' },
|
||||
{ name: '鲁史镇', id: '09' },
|
||||
{ name: '诗礼乡', id: '010' },
|
||||
{ name: '新华乡', id: '011' },
|
||||
{ name: '腰街乡', id: '012' },
|
||||
],
|
||||
currentType: { name: '勐佑镇', id: '01' },
|
||||
};
|
||||
},
|
||||
props: {
|
||||
baseId: Number,
|
||||
},
|
||||
watch: {
|
||||
baseId: {
|
||||
handler: async function (n) {
|
||||
if (n) {
|
||||
await this.$nextTick();
|
||||
const { rows } = await selectBatchInfo(this.baseId);
|
||||
let product = [
|
||||
{ name: '凤山镇', value: 35 },
|
||||
{ name: '勐佑镇', value: 12 },
|
||||
{ name: '三岔河镇', value: 30 },
|
||||
{ name: '小湾镇', value: 4 },
|
||||
{ name: '洛党镇', value: 9 },
|
||||
{ name: '雪山镇', value: 12 },
|
||||
{ name: '营盘镇', value: 32 },
|
||||
{ name: '郭大寨乡', value: 13 },
|
||||
{ name: '大寺乡', value: 35 },
|
||||
{ name: '鲁史镇', value: 4 },
|
||||
{ name: '诗礼乡', value: 9 },
|
||||
{ name: '新华乡', value: 11 },
|
||||
{ name: '腰街乡', value: 15 },
|
||||
];
|
||||
let option = {
|
||||
// tooltip: {
|
||||
// trigger: 'axis',
|
||||
// showContent: false,
|
||||
// axisPointer: {
|
||||
// type: 'shadow',
|
||||
// crossStyle: {
|
||||
// color: '#999',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
grid: {
|
||||
left: 30,
|
||||
top: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
},
|
||||
// xAxis: {
|
||||
// // show:false,
|
||||
// type: 'category',
|
||||
// // data: rows.map((item) => item.name),
|
||||
// data: product.map((item) => item.name),
|
||||
// axisLabel: {
|
||||
// color: '#fff',
|
||||
// },
|
||||
// splitLine: {
|
||||
// show: false, // 显示分割线
|
||||
// lineStyle: {
|
||||
// type: 'dashed', // 设置为虚线
|
||||
// width: 0.5, // 分割线宽度
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// yAxis: {
|
||||
// type: 'value',
|
||||
// axisLabel: {
|
||||
// color: '#fff',
|
||||
// },
|
||||
// splitLine: {
|
||||
// show: false, // 显示分割线
|
||||
// lineStyle: {
|
||||
// type: 'dashed', // 设置为虚线
|
||||
// width: 0.5, // 分割线宽度
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
// data: rows.map((item) => item.value),
|
||||
data: product,
|
||||
type: 'pie',
|
||||
roseType: 'area',
|
||||
center: ['50%', '50%'],
|
||||
radius: ['20%', '80%'],
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 12,
|
||||
formatter: '{c}个',
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
textBorderColor: 'transparent',
|
||||
},
|
||||
},
|
||||
barWidth: 20,
|
||||
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
|
||||
// },
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
let myChart = this.$echarts.init(document.getElementById('landResourcePro'));
|
||||
myChart.setOption(option);
|
||||
autoHover(myChart, option, 1500);
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
handleCommand(data) {
|
||||
console.info('handleCommand', data);
|
||||
this.currentType = data;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.land-type-area-warp {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.filter-warp {
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
.el-dropdown {
|
||||
width: 100px;
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
span {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.charts-content {
|
||||
// width: calc(100% - 100px);
|
||||
width: calc(100% - 0px);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="land-type-area-warp">
|
||||
<div class="filter-warp">
|
||||
<!-- <div class="filter-warp">
|
||||
<el-dropdown @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
{{ currentType && currentType.id ? currentType.name : '请选择地区' }}
|
||||
@ -12,7 +12,7 @@
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div> -->
|
||||
<div id="landTypeArea" class="charts-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
@ -50,64 +50,67 @@ export default {
|
||||
await this.$nextTick();
|
||||
const { rows } = await selectBatchInfo(this.baseId);
|
||||
let product = [
|
||||
{ name: '旱地', value: 3.5 },
|
||||
{ name: '旱地', value: 3.2 },
|
||||
{ name: '果园', value: 1.2 },
|
||||
{ name: '水浇地', value: 3.0 },
|
||||
{ name: '沟渠', value: 0.4 },
|
||||
{ name: '田坎', value: 0.4},
|
||||
{ name: '茶园', value: 3.8 },
|
||||
{ name: '设施农用地', value: 0.9 },
|
||||
{ name: '水浇地', value: 3.5 },
|
||||
{ name: '灌溉水田', value: 1.6 },
|
||||
{ name: '茶园', value: 3.5 },
|
||||
{ name: '菜地', value: 1.2 },
|
||||
];
|
||||
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,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
// data: rows.map((item) => item.name),
|
||||
data: product.map((item) => item.name),
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, // 显示分割线
|
||||
lineStyle: {
|
||||
type: 'dashed', // 设置为虚线
|
||||
width: 0.5, // 分割线宽度
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, // 显示分割线
|
||||
lineStyle: {
|
||||
type: 'dashed', // 设置为虚线
|
||||
width: 0.5, // 分割线宽度
|
||||
},
|
||||
},
|
||||
},
|
||||
// xAxis: {
|
||||
// // show:false,
|
||||
// type: 'category',
|
||||
// // data: rows.map((item) => item.name),
|
||||
// data: product.map((item) => item.name),
|
||||
// axisLabel: {
|
||||
// color: '#fff',
|
||||
// },
|
||||
// splitLine: {
|
||||
// show: false, // 显示分割线
|
||||
// lineStyle: {
|
||||
// type: 'dashed', // 设置为虚线
|
||||
// width: 0.5, // 分割线宽度
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// yAxis: {
|
||||
// type: 'value',
|
||||
// axisLabel: {
|
||||
// color: '#fff',
|
||||
// },
|
||||
// splitLine: {
|
||||
// show: false, // 显示分割线
|
||||
// lineStyle: {
|
||||
// type: 'dashed', // 设置为虚线
|
||||
// width: 0.5, // 分割线宽度
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
// data: rows.map((item) => item.value),
|
||||
data: product.map((item) => item.value),
|
||||
type: 'bar',
|
||||
data:product,
|
||||
type: 'pie',
|
||||
roseType: 'area',
|
||||
center: ['50%', '50%'],
|
||||
radius: ['20%', '80%'],
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
@ -121,22 +124,23 @@ export default {
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
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
|
||||
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
|
||||
// },
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -151,7 +155,7 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods:{
|
||||
methods: {
|
||||
handleCommand(data) {
|
||||
console.info('handleCommand', data);
|
||||
this.currentType = data;
|
||||
@ -179,7 +183,8 @@ export default {
|
||||
}
|
||||
}
|
||||
.charts-content {
|
||||
width: calc(100% - 100px);
|
||||
// width: calc(100% - 100px);
|
||||
width: calc(100% - 0px);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,139 +0,0 @@
|
||||
<template>
|
||||
<div class="plantArea" id="plnatArea"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { selectBatchInfo } from '@/api/agriculture/dataStatistics';
|
||||
import { bar, autoHover } from '../echartsOption';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
datalist: [],
|
||||
};
|
||||
},
|
||||
props: {
|
||||
baseId: Number,
|
||||
},
|
||||
watch: {
|
||||
baseId: {
|
||||
handler: async function (n) {
|
||||
if (n) {
|
||||
await this.$nextTick();
|
||||
const { rows } = await selectBatchInfo(this.baseId);
|
||||
this.datalist = [
|
||||
{ name: '凤山镇', value: 35 },
|
||||
{ name: '勐佑镇', value: 12 },
|
||||
{ name: '三岔河镇', value: 30 },
|
||||
{ name: '小湾镇', value: 4 },
|
||||
{ name: '洛党镇', value: 9 },
|
||||
{ name: '雪山镇', value: 12 },
|
||||
{ name: '营盘镇', value: 32 },
|
||||
{ name: '郭大寨乡', value: 13 },
|
||||
{ name: '大寺乡', value: 35 },
|
||||
{ name: '鲁史镇', value: 4 },
|
||||
{ name: '诗礼乡', value: 9 },
|
||||
{ name: '新华乡', value: 11 },
|
||||
{ name: '腰街乡', value: 15 },
|
||||
];
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
showContent: false,
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
crossStyle: {
|
||||
color: '#999',
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 30,
|
||||
top: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
// data: rows.map((item) => item.name),
|
||||
data: this.datalist.map((item) => item.name),
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, // 显示分割线
|
||||
lineStyle: {
|
||||
type: 'dashed', // 设置为虚线
|
||||
width: 0.5, // 分割线宽度
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, // 显示分割线
|
||||
lineStyle: {
|
||||
type: 'dashed', // 设置为虚线
|
||||
width: 0.5, // 分割线宽度
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// data: rows.map((item) => item.value),
|
||||
data: this.datalist.map((item) => item.value),
|
||||
type: 'bar',
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 12,
|
||||
formatter: '{c}个',
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
textBorderColor: 'transparent',
|
||||
},
|
||||
},
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
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: '#b6fdf7' },
|
||||
{ offset: 1, color: '#019c8f' },
|
||||
],
|
||||
global: false, // 默认为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
let myChart = this.$echarts.init(document.getElementById('plnatArea'));
|
||||
myChart.setOption(option);
|
||||
autoHover(myChart, option, 1500);
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.plantArea {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user