Compare commits
2 Commits
e5eb1ebb6a
...
182ce9dbb6
| Author | SHA1 | Date | |
|---|---|---|---|
| 182ce9dbb6 | |||
| 90d19e06e6 |
BIN
src/assets/images/bj1_00000_iSpt.png
Executable file
BIN
src/assets/images/bj1_00000_iSpt.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 10 MiB |
@ -17,7 +17,10 @@
|
||||
<span>作物类型统计-高标准农田</span>
|
||||
<p>
|
||||
下载
|
||||
<img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div ref="farmlandDiv" class="farmlandDiv"></div>
|
||||
@ -28,12 +31,25 @@
|
||||
<span>作物类型统计-行政区划</span>
|
||||
<p>
|
||||
下载
|
||||
<img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<el-select popper-class="select_city" @change="selectTab(item)" v-model="value" clearable placeholder="全部">
|
||||
<el-option v-for="item in Township.arr" :key="item.properties.XZDM" :label="item.properties.XZMC"
|
||||
:value="item.properties.XZDM" />
|
||||
<el-select
|
||||
popper-class="select_city"
|
||||
@change="selectTab(item)"
|
||||
v-model="value"
|
||||
clearable
|
||||
placeholder="全部"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in Township.arr"
|
||||
:key="item.properties.XZDM"
|
||||
:label="item.properties.XZMC"
|
||||
:value="item.properties.XZDM"
|
||||
/>
|
||||
</el-select>
|
||||
<div ref="ASdivisionDiv" class="ASdivision"></div>
|
||||
</div>
|
||||
@ -43,11 +59,18 @@
|
||||
<template #title>图例</template>
|
||||
<div class="mt-4">
|
||||
<el-checkbox-group v-model="checkList" @change="change">
|
||||
<el-checkbox v-for="(value, item, key) in dic" :key="key" :style="{
|
||||
<el-checkbox
|
||||
v-for="(value, item, key) in dic"
|
||||
:key="key"
|
||||
:style="{
|
||||
background: value.color,
|
||||
border: `1px solid ${value.color}`,
|
||||
width: `100%`,
|
||||
}" v-model="checked3" :disabled="value.disabled" :label="item" />
|
||||
}"
|
||||
v-model="checked3"
|
||||
:disabled="value.disabled"
|
||||
:label="item"
|
||||
/>
|
||||
|
||||
<!-- <el-checkbox style="
|
||||
background: rgba(251, 171, 60, 1);
|
||||
@ -156,7 +179,7 @@ const farmlandDiv = ref(null);
|
||||
const ProgressBarDiv = ref(null);
|
||||
const ASdivisionDiv = ref(null);
|
||||
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
|
||||
const value = ref('');
|
||||
const value = ref('370211');
|
||||
const clickInfoMap = ref({ info: [] });
|
||||
let dd = {
|
||||
小麦: [],
|
||||
@ -203,7 +226,7 @@ var data = {
|
||||
wheat: [null, 500, null, 500, null, 500, null, null],
|
||||
Blueberries: [null, null, null, null, null, null, null, 500],
|
||||
};
|
||||
let classData = [200, 85, 112, 275, 305];
|
||||
let classData = [302034, 243990, 42344, 34234, 304235];
|
||||
const options = [
|
||||
{
|
||||
value: 'Option1',
|
||||
@ -216,7 +239,7 @@ const options = [
|
||||
];
|
||||
// 组件挂载完成后执行
|
||||
onMounted(() => {
|
||||
initonMounted()
|
||||
initonMounted();
|
||||
// checkList.value = Object.keys(dic.filter(item => !item.disabled))
|
||||
});
|
||||
// 初始化
|
||||
@ -230,7 +253,7 @@ function initonMounted() {
|
||||
farmland(); //图表
|
||||
ASdivision(); //图表
|
||||
getArea(); //请求
|
||||
getFarmland()
|
||||
getFarmland();
|
||||
checkList.value = Object.keys(dic);
|
||||
}
|
||||
const mapOption = {
|
||||
@ -307,19 +330,15 @@ function initMap() {
|
||||
// 去除logo
|
||||
viewer.cesiumWidget.creditContainer.style.display = 'none';
|
||||
|
||||
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||||
duration: 2,
|
||||
});
|
||||
|
||||
|
||||
// 图层点击事件
|
||||
layerClick();
|
||||
// 添加镇级矢量
|
||||
addWms('shuzisannong:huangdaoqu_town', 'shuzisannong:huangdaoqu_town')
|
||||
|
||||
|
||||
addWms('shuzisannong:huangdaoqu_town', 'shuzisannong:huangdaoqu_town');
|
||||
}
|
||||
|
||||
const checkList = ref([]);
|
||||
@ -406,7 +425,6 @@ watch(
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
// 添加wms
|
||||
function addWms(layers, customName) {
|
||||
let map = new Cesium.WebMapServiceImageryProvider({
|
||||
@ -422,14 +440,14 @@ function addWms(layers, customName) {
|
||||
map.customName = customName; //自己定义各种属性
|
||||
let dd = viewer.imageryLayers.addImageryProvider(map); //添加图层
|
||||
if (customName.indexOf('gbznt') > -1) {
|
||||
console.log('dididididi')
|
||||
console.log('dididididi');
|
||||
// viewer.imageryLayers.lower(dd);//将图层下移一层
|
||||
viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
|
||||
viewer.imageryLayers.raise(dd); //将图层上移一层
|
||||
}
|
||||
}
|
||||
// 图层点击事件
|
||||
let XZDM = ''
|
||||
let XZDM = '';
|
||||
function layerClick() {
|
||||
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
|
||||
handler.setInputAction(async function (movement) {
|
||||
@ -452,7 +470,12 @@ function layerClick() {
|
||||
const providerPoint = layers[index];
|
||||
// 拿取最后一个图层
|
||||
let provider = providerPoint._imageryProvider;
|
||||
if (provider && provider.ready && provider._layers && providerPoint.show === true) {
|
||||
if (
|
||||
provider &&
|
||||
provider.ready &&
|
||||
provider._layers &&
|
||||
providerPoint.show === true
|
||||
) {
|
||||
xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
|
||||
let promise = provider.pickFeatures(
|
||||
xy.x,
|
||||
@ -470,7 +493,7 @@ function layerClick() {
|
||||
//防止
|
||||
XZDM = newData.properties.XZDM;
|
||||
value.value = XZDM; //
|
||||
// selectTab(); //
|
||||
selectTab(); //
|
||||
let item = newData.data;
|
||||
// 定位
|
||||
viewer.camera.flyTo({
|
||||
@ -499,8 +522,9 @@ function layerClick() {
|
||||
);
|
||||
// 隐藏pop
|
||||
hiddenOverlayChart();
|
||||
} else {//已经点击了镇了，开始监测是否点击作物了
|
||||
zuowuClick(layers, cartographic, level, xy, movement)
|
||||
} else {
|
||||
//已经点击了镇了，开始监测是否点击作物了
|
||||
zuowuClick(layers, cartographic, level, xy, movement);
|
||||
}
|
||||
} else {
|
||||
removeWms(['village_CQL']);
|
||||
@ -511,7 +535,7 @@ function layerClick() {
|
||||
}
|
||||
} else {
|
||||
// 直接种植结构
|
||||
zuowuClick(layers, cartographic, level, xy, movement)
|
||||
zuowuClick(layers, cartographic, level, xy, movement);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -523,17 +547,14 @@ async function zuowuClick(layers, cartographic, level, xy, movement) {
|
||||
let promise = layers.map(async item => {
|
||||
if (item._imageryProvider._layers) {
|
||||
// 是种植结构图层
|
||||
if (Object.values(layersDic).findIndex(it => it === item._imageryProvider._layers) > -1) {
|
||||
if (
|
||||
Object.values(layersDic).findIndex(it => it === item._imageryProvider._layers) > -1
|
||||
) {
|
||||
const providerPoint = item;
|
||||
// 拿取最后一个图层
|
||||
let provider = providerPoint._imageryProvider;
|
||||
if (provider && provider.ready && provider._layers && providerPoint.show === true
|
||||
) {
|
||||
xy = provider.tilingScheme.positionToTileXY(
|
||||
cartographic,
|
||||
level,
|
||||
xy
|
||||
);
|
||||
if (provider && provider.ready && provider._layers && providerPoint.show === true) {
|
||||
xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
|
||||
let promise = provider.pickFeatures(
|
||||
xy.x,
|
||||
xy.y,
|
||||
@ -553,9 +574,7 @@ async function zuowuClick(layers, cartographic, level, xy, movement) {
|
||||
'red'
|
||||
);
|
||||
let info = data['0'].properties;
|
||||
const ind = newData.findIndex(
|
||||
ii => ii && ii.crop === info.crop
|
||||
);
|
||||
const ind = newData.findIndex(ii => ii && ii.crop === info.crop);
|
||||
if (ind < 0) {
|
||||
newData.push(info);
|
||||
}
|
||||
@ -573,12 +592,8 @@ async function zuowuClick(layers, cartographic, level, xy, movement) {
|
||||
var cartesian = viewer.camera.pickEllipsoid(coordinate, ellipsoid);
|
||||
if (cartesian) {
|
||||
let cartographic = ellipsoid.cartesianToCartographic(cartesian);
|
||||
let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(
|
||||
6
|
||||
);
|
||||
let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(
|
||||
6
|
||||
);
|
||||
let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
|
||||
let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
|
||||
clickInfoMap.value = {
|
||||
info: newData,
|
||||
// ...newData['0'],
|
||||
@ -649,7 +664,11 @@ function removeWms(nameArry, isMohu) {
|
||||
const layers = viewer.imageryLayers._layers;
|
||||
for (let f = layers.length - 1; f >= 0; f--) {
|
||||
nameArry.forEach(item => {
|
||||
if (layers[f] && layers[f]._imageryProvider && layers[f]._imageryProvider.customName) {
|
||||
if (
|
||||
layers[f] &&
|
||||
layers[f]._imageryProvider &&
|
||||
layers[f]._imageryProvider.customName
|
||||
) {
|
||||
if (isMohu) {
|
||||
if (layers[f]._imageryProvider.customName.indexOf(item) > -1) {
|
||||
viewer.imageryLayers.remove(layers[f]);
|
||||
@ -718,11 +737,15 @@ function showOverlayChart(position) {
|
||||
// 获取高标准农田
|
||||
function getFarmland() {
|
||||
axios({
|
||||
url: serverAPI.geoserverUrl + '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afarmland&maxFeatures=50&outputFormat=application%2Fjson',
|
||||
method: 'get'
|
||||
}).then(res => {
|
||||
console.log('农田：', res)
|
||||
}).catch(err => { })
|
||||
url:
|
||||
serverAPI.geoserverUrl +
|
||||
'/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afarmland&maxFeatures=50&outputFormat=application%2Fjson',
|
||||
method: 'get',
|
||||
})
|
||||
.then(res => {
|
||||
console.log('农田：', res);
|
||||
})
|
||||
.catch(err => {});
|
||||
}
|
||||
//接口
|
||||
const getArea = (item, index) => {
|
||||
@ -762,7 +785,7 @@ const getaArea = () => {
|
||||
let arr = [];
|
||||
let a = {};
|
||||
getareas().then(res => {
|
||||
console.log('res:', res)
|
||||
console.log('res:', res);
|
||||
Township.crr = res.features;
|
||||
data.title.forEach((item, indexs) => {
|
||||
let town = res.features.map(i => {
|
||||
@ -780,15 +803,21 @@ const getaArea = () => {
|
||||
});
|
||||
});
|
||||
ASdivision();
|
||||
selectTab();
|
||||
});
|
||||
};
|
||||
|
||||
const selectTab = () => {
|
||||
classData = [116, 75, 96, 168, 245];
|
||||
areachar();
|
||||
if (value.value == '370211') {
|
||||
getTownships();
|
||||
classData = [302034, 243990, 42344, 34234, 304235];
|
||||
} else if(value.value) {
|
||||
classData = [102034, 173990, 22344, 14234, 104235];
|
||||
}
|
||||
|
||||
console.log(classData);
|
||||
areachar();
|
||||
let arr = [...Township.arr];
|
||||
arr.forEach(item => {
|
||||
if (item.properties.XZDM == value.value) {
|
||||
@ -1002,33 +1031,63 @@ function areachar() {
|
||||
|
||||
function typesof() {
|
||||
const typesofDivIntance = echarts.init(typesofDiv.value);
|
||||
let selectedIndex = '';
|
||||
let isSelected = '';
|
||||
let isHovered = '';
|
||||
let hoveredIndex = '';
|
||||
let option = getPie3D(
|
||||
[
|
||||
{
|
||||
name: '水田',
|
||||
value: 60,
|
||||
name: '小麦',
|
||||
value: 101,
|
||||
itemStyle: {
|
||||
color: '#1890FF',
|
||||
opacity: 0.5,
|
||||
color: 'rgba(110, 209, 84, 0.9)',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '水浇地',
|
||||
value: 44,
|
||||
// 数据项名称
|
||||
name: '玉米',
|
||||
value: 56,
|
||||
itemStyle: {
|
||||
color: '#1EE7E7',
|
||||
// 透明度
|
||||
opacity: 0.5,
|
||||
// 扇形颜色
|
||||
color: 'rgba(251, 201, 3, 1)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '旱地',
|
||||
value: 32,
|
||||
// 数据项名称
|
||||
name: '大豆',
|
||||
value: 56,
|
||||
itemStyle: {
|
||||
color: '#F3F62B',
|
||||
// 透明度
|
||||
opacity: 0.5,
|
||||
// 扇形颜色
|
||||
color: 'rgba(240, 129, 31, 0.9)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '地瓜',
|
||||
value: 56,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.5,
|
||||
// 扇形颜色
|
||||
color: 'rgba(27, 85, 222, 1)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
0 // 可做为调整内环大小
|
||||
0
|
||||
);
|
||||
// 生成扇形的曲面参数方程
|
||||
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
|
||||
@ -1054,7 +1113,7 @@ function typesof() {
|
||||
const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
||||
|
||||
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
||||
const hoverRate = isHovered ? 1.05 : 1; // 可以做为调整外环大小
|
||||
const hoverRate = isHovered ? 1.05 : 1;
|
||||
|
||||
// 返回曲面参数方程
|
||||
return {
|
||||
@ -1152,6 +1211,7 @@ function typesof() {
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
console.log(series);
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
|
||||
@ -1174,29 +1234,68 @@ function typesof() {
|
||||
|
||||
// 准备待返回的配置项，把准备好的 legendData、series 传入。
|
||||
const option = {
|
||||
// animation: false,
|
||||
legend: {
|
||||
show: true,
|
||||
bottom: 0,
|
||||
textStyle: { color: 'rgba(255,255,255,.9)' },
|
||||
},
|
||||
title: {
|
||||
text: '年审核问题分布情况',
|
||||
x: 'center',
|
||||
top: 170,
|
||||
textStyle: {
|
||||
color: '#000',
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
// animation: false,
|
||||
tooltip: {
|
||||
formatter: params => {
|
||||
if (params.seriesName !== 'mouseoutSeries') {
|
||||
return `${params.seriesName
|
||||
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
|
||||
};"></span>${option.series[params.seriesIndex].pieData.value}`;
|
||||
return `${
|
||||
params.seriesName
|
||||
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
|
||||
params.color
|
||||
};"></span>`;
|
||||
}
|
||||
return '';
|
||||
},
|
||||
},
|
||||
// visualMap: [
|
||||
// {
|
||||
// show: false,
|
||||
// dimension: 2, // [x, y, z, u, v]
|
||||
// min: -1,
|
||||
// seriesIndex: 0,
|
||||
// max: 1,
|
||||
// inRange: {
|
||||
// color: ['#ff0', '#f00'],
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// show: false,
|
||||
// dimension: 4, // [x, y, z, u, v]
|
||||
// min: 0,
|
||||
// seriesIndex: 1,
|
||||
// max: Math.PI * 2,
|
||||
// inRange: {
|
||||
// color: ['#0bf', '#0f0', '#0bf'],
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// show: false,
|
||||
// dimension: 3, // [x, y, z, u, v]
|
||||
// min: 0,
|
||||
// seriesIndex: 2,
|
||||
// max: Math.PI * 2,
|
||||
// inRange: {
|
||||
// color: [
|
||||
// '#a50026',
|
||||
// '#d73027',
|
||||
// '#f46d43',
|
||||
// '#fdae61',
|
||||
// '#fee090',
|
||||
// '#ffffbf',
|
||||
// '#e0f3f8',
|
||||
// '#abd9e9',
|
||||
// '#74add1',
|
||||
// '#4575b4',
|
||||
// '#313695',
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
@ -1211,16 +1310,16 @@ function typesof() {
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 5,
|
||||
top: '-20%',
|
||||
boxHeight: 10,
|
||||
top: '-10%',
|
||||
viewControl: {
|
||||
// 3d效果可以放大、旋转等，请自己去查看官方配置
|
||||
alpha: 20,
|
||||
// beta: 30,
|
||||
alpha: 35,
|
||||
beta: 30,
|
||||
rotateSensitivity: 1,
|
||||
zoomSensitivity: 0,
|
||||
panSensitivity: 0,
|
||||
// autoRotate: true,
|
||||
autoRotate: true,
|
||||
distance: 300,
|
||||
},
|
||||
// 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
|
||||
@ -1247,8 +1346,7 @@ function typesof() {
|
||||
}
|
||||
// 修正取消高亮失败的 bug
|
||||
// 监听 mouseover，近似实现高亮（放大）效果
|
||||
option.title.text = option.series[0].name + ' ' + option.series[0].pieData.value;
|
||||
function handleOver(params) {
|
||||
typesofDivIntance.on('mouseover', function (params) {
|
||||
// 准备重新渲染扇形所需的参数
|
||||
let isSelected;
|
||||
let isHovered;
|
||||
@ -1292,11 +1390,6 @@ function typesof() {
|
||||
|
||||
// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
|
||||
if (params.seriesName !== 'mouseoutSeries') {
|
||||
option.title.text =
|
||||
' ' +
|
||||
option.series[seriesIndex].name +
|
||||
' ' +
|
||||
option.series[params.seriesIndex].pieData.value;
|
||||
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
|
||||
isSelected = option.series[params.seriesIndex].pieStatus.selected;
|
||||
isHovered = true;
|
||||
@ -1322,17 +1415,15 @@ function typesof() {
|
||||
// 使用更新后的 option，渲染图表
|
||||
typesofDivIntance.setOption(option);
|
||||
}
|
||||
}
|
||||
typesofDivIntance.on('mouseover', function (params) {
|
||||
handleOver(params);
|
||||
});
|
||||
|
||||
function handleOut() {
|
||||
// 修正取消高亮失败的 bug
|
||||
typesofDivIntance.on('globalout', function () {
|
||||
if (hoveredIndex !== '') {
|
||||
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
|
||||
isSelected = option.series[hoveredIndex].pieStatus.selected;
|
||||
isHovered = false;
|
||||
k = option.series[hoveredIndex].pieStatus.k;
|
||||
let k = option.series[hoveredIndex].pieStatus.k;
|
||||
startRatio = option.series[hoveredIndex].pieData.startRatio;
|
||||
endRatio = option.series[hoveredIndex].pieData.endRatio;
|
||||
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
|
||||
@ -1356,19 +1447,7 @@ function typesof() {
|
||||
|
||||
// 使用更新后的 option，渲染图表
|
||||
typesofDivIntance.setOption(option);
|
||||
}
|
||||
// 修正取消高亮失败的 bug
|
||||
typesofDivIntance.on('globalout', function () {
|
||||
handleOut();
|
||||
});
|
||||
let seriesIndex = 0;
|
||||
setInterval(() => {
|
||||
handleOver({ seriesIndex: seriesIndex });
|
||||
seriesIndex++;
|
||||
if (seriesIndex === option.series.length) {
|
||||
seriesIndex = 0;
|
||||
}
|
||||
}, 3000);
|
||||
|
||||
// option && typesofDivIntance.setOption(option);
|
||||
useEcharts(typesofDivIntance, option);
|
||||
@ -1376,322 +1455,146 @@ function typesof() {
|
||||
// 高标准农田echarts
|
||||
function farmland() {
|
||||
const farmlandDivIntance = echarts.init(farmlandDiv.value);
|
||||
var option = {
|
||||
// 设置图表的位置
|
||||
let option = {
|
||||
// backgroundColor: '#333333',
|
||||
// tooltip: {},
|
||||
grid: {
|
||||
bottom: '8%',
|
||||
left: '10%',
|
||||
right: '6%',
|
||||
top: '6%',
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '10%',
|
||||
containLabel: true,
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'slider',
|
||||
show: false,
|
||||
zoomLock: true, //禁止拉伸
|
||||
width: 8,
|
||||
yAxisIndex: [0],
|
||||
bottom: 30,
|
||||
top: 20,
|
||||
right: 10,
|
||||
startValue: 0,
|
||||
endValue: 4,
|
||||
handleIcon:
|
||||
'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
|
||||
handleSize: '100%',
|
||||
handleStyle: {
|
||||
color: '#DBDBDB',
|
||||
height: '100%',
|
||||
legend: {
|
||||
show: true,
|
||||
top: '10',
|
||||
left: 'center',
|
||||
textStyle: { color: 'rgba(255,255,255,.9)' },
|
||||
itemWidth: 20,
|
||||
itemHeight: 12.5,
|
||||
icon: 'stack',
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
fillerColor: '#DBDBDB',
|
||||
textStyle: {
|
||||
color: 'transparent',
|
||||
},
|
||||
dataBackground: {
|
||||
lineStyle: {
|
||||
color: 'transparent',
|
||||
},
|
||||
areaStyle: {
|
||||
color: 'transparent',
|
||||
},
|
||||
},
|
||||
borderColor: 'transparent',
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
id: 'insideY',
|
||||
yAxisIndex: 0,
|
||||
start: 0,
|
||||
end: 50,
|
||||
zoomOnMouseWheel: false,
|
||||
moveOnMouseMove: true,
|
||||
moveOnMouseWheel: true,
|
||||
},
|
||||
],
|
||||
// X轴
|
||||
|
||||
xAxis: {
|
||||
type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
|
||||
// 坐标轴刻度
|
||||
axisTick: {
|
||||
show: false, // 是否显示坐标轴刻度 默认显示
|
||||
},
|
||||
// 坐标轴轴线
|
||||
type: 'value',
|
||||
max: 500,
|
||||
show: false,
|
||||
// 不显示轴线
|
||||
axisLine: {
|
||||
// 是否显示坐标轴轴线 默认显示
|
||||
show: false, // 是否显示坐标轴轴线 默认显示
|
||||
show: false,
|
||||
},
|
||||
// 不显示刻度线
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
// 坐标轴在图表区域中的分隔线
|
||||
splitLine: {
|
||||
show: false, // 是否显示分隔线。默认数值轴显示
|
||||
// 网格线为虚线
|
||||
show: false,
|
||||
},
|
||||
// 坐标轴刻度标签
|
||||
axisLabel: {
|
||||
show: false, // 是否显示刻度标签 默认显示
|
||||
// axisLabel:{
|
||||
// formatter:'{value}%'
|
||||
// }
|
||||
},
|
||||
},
|
||||
// Y轴
|
||||
yAxis: [
|
||||
// 左侧Y轴
|
||||
{
|
||||
// 坐标轴类型, 'category' 类目轴，适用于离散的类目数据
|
||||
// 为该类型时必须通过 data 设置类目数据
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
// 坐标轴刻度
|
||||
axisTick: {
|
||||
show: false, // 是否显示坐标轴刻度 默认显示
|
||||
},
|
||||
// 坐标轴轴线
|
||||
axisLine: {
|
||||
// 是否显示坐标轴轴线 默认显示
|
||||
show: false, // 是否显示坐标轴轴线 默认显示
|
||||
lineStyle: {
|
||||
// 坐标轴线线的颜色
|
||||
color: '#cdd3ee',
|
||||
},
|
||||
},
|
||||
// 坐标轴在图表区域中的分隔线
|
||||
splitLine: {
|
||||
show: false, // 是否显示分隔线。默认数值轴显示
|
||||
},
|
||||
// 坐标轴刻度标签
|
||||
axisLabel: {
|
||||
show: true, // 是否显示刻度标签 默认显示
|
||||
fontSize: 12, // 文字的字体大小
|
||||
color: 'rgba(255, 255, 255, 1)', // 刻度标签文字的颜色
|
||||
// 使用字符串模板，模板变量为刻度默认标签 {value}
|
||||
formatter: '{value}',
|
||||
},
|
||||
// 类目数据，在类目轴（type: 'category'）中有效
|
||||
data: data.title,
|
||||
inverse: true,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: 'rgba(255, 255, 255, 1)',
|
||||
fontSize: 14,
|
||||
},
|
||||
data: ['片区一', '片区二', '片区三', '片区四', '片区五','片区六','片区七'],
|
||||
},
|
||||
],
|
||||
// 系列列表
|
||||
series: [
|
||||
{
|
||||
type: 'bar', // 系列类型
|
||||
name: '玉米', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||||
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||||
stack: '总量',
|
||||
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||||
// 图形上的文本标签
|
||||
label: {
|
||||
show: true,
|
||||
position: '玉米',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
fontWeight: 'bolder',
|
||||
color: 'rgba(255,255,255,1)',
|
||||
},
|
||||
},
|
||||
// 图形样式
|
||||
name: '小麦',
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
stack: 'stack',
|
||||
data: [160, 103, 155, 100, 50,122,98],
|
||||
itemStyle: {
|
||||
barBorderRadius: [0, 0, 0, 0],
|
||||
barBorderRadius: [0, 0, 0, 0], //
|
||||
borderWidth: 1, // 设置边框宽度
|
||||
borderColor: 'rgba(4, 247, 227, 0.8)', // 设置边框颜色
|
||||
color: {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(4, 247, 227, 0.9)', // 0% 处的颜色
|
||||
},
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(4, 247, 227, 0.25)', // 100% 处的颜色
|
||||
color: 'rgba(33, 187, 251, 0.9)',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
data: dd.玉米, // 系列中的数据内容数组
|
||||
},
|
||||
{
|
||||
type: 'bar', // 系列类型
|
||||
name: '大豆', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||||
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||||
stack: '总量',
|
||||
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||||
// 图形上的文本标签
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '大豆',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
fontWeight: 'bolder',
|
||||
color: 'rgba(255,255,255,1)',
|
||||
},
|
||||
},
|
||||
// 图形样式
|
||||
itemStyle: {
|
||||
barBorderRadius: [0, 0, 0, 0], //
|
||||
borderWidth: 1, // 设置边框宽度
|
||||
borderColor: 'rgba(143, 186, 243, 0.8)', // 设置边框颜色
|
||||
color: {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(143, 186, 243, 0.9)', // 0% 处的颜色
|
||||
color: 'rgba(33, 187, 251, 0.05)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '大豆',
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
stack: 'stack',
|
||||
data: [160, 103, 155, 100, 50,124,168],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(143, 186, 243, 0.3)', // 100% 处的颜色
|
||||
color: 'rgba(143, 186, 243, 0.9)',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
data: [1, 2, 4], // 系列中的数据内容数组
|
||||
},
|
||||
{
|
||||
type: 'bar', // 系列类型
|
||||
name: '花生', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||||
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||||
stack: '总量',
|
||||
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||||
// 图形上的文本标签
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '花生',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
fontWeight: 'bolder',
|
||||
color: 'rgba(255,255,255,1)',
|
||||
},
|
||||
},
|
||||
// 图形样式
|
||||
itemStyle: {
|
||||
barBorderRadius: [0, 0, 0, 0],
|
||||
barBorderRadius: [0, 0, 0, 0], //
|
||||
borderWidth: 1, // 设置边框宽度
|
||||
borderColor: 'rgba(255, 225, 104, 0.8)', // 设置边框颜色
|
||||
color: {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 225, 104, 0.9)', // 0% 处的颜色
|
||||
color: 'rgba(143, 186, 243, 0.05)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '地瓜',
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
stack: 'stack',
|
||||
data: [160, 103, 155, 100, 50,45,321],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 225, 104, 0.25)', // 100% 处的颜色
|
||||
color: 'rgba(255, 225, 104, 1)',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
data: dd.花生, // 系列中的数据内容数组
|
||||
},
|
||||
{
|
||||
type: 'bar', // 系列类型
|
||||
name: '小麦', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||||
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||||
stack: '总量',
|
||||
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||||
// 图形上的文本标签
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '小麦',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
fontWeight: 'bolder',
|
||||
color: 'rgba(255,255,255,1)',
|
||||
},
|
||||
},
|
||||
// 图形样式
|
||||
itemStyle: {
|
||||
barBorderRadius: [0, 0, 0, 0],
|
||||
barBorderRadius: [0, 0, 0, 0], //
|
||||
borderWidth: 1, // 设置边框宽度
|
||||
borderColor: 'rgba(33, 187, 251, 0.8)', // 设置边框颜色
|
||||
color: {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(33, 187, 251, 0.9)', // 0% 处的颜色
|
||||
color: 'rgba(255, 225, 104, 0.05)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(33, 187, 251, 0.25)', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
]),
|
||||
},
|
||||
},
|
||||
data: dd.小麦, // 系列中的数据内容数组
|
||||
},
|
||||
{
|
||||
type: 'bar', // 系列类型
|
||||
name: '蓝莓', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||||
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||||
stack: '总量',
|
||||
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||||
// 图形上的文本标签
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '蓝莓',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
fontWeight: 'bolder',
|
||||
color: 'rgba(255,255,255,1)',
|
||||
},
|
||||
},
|
||||
// 图形样式
|
||||
itemStyle: {
|
||||
barBorderRadius: [0, 0, 0, 0],
|
||||
barBorderRadius: [0, 0, 0, 0], //
|
||||
borderWidth: 1, // 设置边框宽度
|
||||
borderColor: 'rgba(14, 223, 255, 0.8)', // 设置边框颜色
|
||||
color: {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(14, 223, 255, 0.9)', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(14, 223, 255, 0.25)', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
data: dd.蓝莓, // 系列中的数据内容数组
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// areaDivIntance.off('click') //图表渲染前销毁点击事件,防止点击图标多次触发
|
||||
farmlandDivIntance.on("click", (param) => ChartClick(param));
|
||||
farmlandDivIntance.on('click', param => ChartClick(param));
|
||||
useEcharts(farmlandDivIntance, option);
|
||||
}
|
||||
// 图表点击事件
|
||||
function ChartClick() {
|
||||
// 移除作物
|
||||
removeWms(['huangdaoqu_town'], true);
|
||||
let layername = 'shuzisannong:farmland'
|
||||
let layername = 'shuzisannong:farmland';
|
||||
// 添加高标准农田服务
|
||||
addWms(layername, layername + 'gbznt');
|
||||
|
||||
}
|
||||
|
||||
function ASdivision() {
|
||||
@ -2000,14 +1903,13 @@ function ASdivision() {
|
||||
},
|
||||
],
|
||||
};
|
||||
ASdivisionDivIntance.on("click", (param) => ChartClickRB(param));
|
||||
ASdivisionDivIntance.on('click', param => ChartClickRB(param));
|
||||
// option && ASdivisionDivIntance.setOption(option, true);
|
||||
useEcharts(ASdivisionDivIntance, option);
|
||||
}
|
||||
// 右下角图表点击事件
|
||||
function ChartClickRB(param) {
|
||||
console.log('右下点击', param)
|
||||
|
||||
console.log('右下点击', param);
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -2044,9 +1946,11 @@ $height: calc(100vh - 100px);
|
||||
height: 25px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
background: linear-gradient(180deg,
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 111, 111, 1) 0%,
|
||||
rgba(47, 214, 214, 1) 100%);
|
||||
rgba(47, 214, 214, 1) 100%
|
||||
);
|
||||
border: 1.5px solid rgba(23, 194, 180, 1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -2088,7 +1992,11 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.typesofDiv {
|
||||
width: 100%;
|
||||
height: 267px;
|
||||
height: 397px;
|
||||
background: url('@/assets/images/bj1_00000_iSpt.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 85% 85%;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2344,6 +2252,5 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.el-popper__arrow::before {
|
||||
background: rgba(41, 255, 255, 0.7) !important;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user