up

src/views/crops/classify/index.vue

@@ -17,7 +17,10 @@
                     <span>作物类型统计-高标准农田</span>
                     <p>
                         下载 &nbsp;
-                        <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>
                         下载 &nbsp;
-                        <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-select
-                    <el-option v-for="item in Township.arr" :key="item.properties.XZDM" :label="item.properties.XZMC"
+                    popper-class="select_city"
-                        :value="item.properties.XZDM" />
+                    @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 {//已经点击了镇了，开始监测是否点击作物了
+                                        } else {
-                                            zuowuClick(layers, cartographic, level, xy, movement)
+                                            //已经点击了镇了，开始监测是否点击作物了
+                                            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
+                if (provider && provider.ready && provider._layers && providerPoint.show === true) {
-                ) {
+                    xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
-                    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(
+                                const ind = newData.findIndex(ii => ii && ii.crop === info.crop);
-                                    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(
+            let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
-                6
+            let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).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',
+        url:
-        method: 'get'
+            serverAPI.geoserverUrl +
-    }).then(res => {
+            '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afarmland&maxFeatures=50&outputFormat=application%2Fjson',
-        console.log('农田：', res)
+        method: 'get',
-    }).catch(err => { })
+    })
+        .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: '水田',
+                name: '小麦',
-                value: 60,
+                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
+                        return `${
-                            }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                            params.seriesName
-                            };"></span>${option.series[params.seriesIndex].pieData.value}`;
+                        }<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,
+                boxHeight: 10,
-                top: '-20%',
+                top: '-10%',
                 viewControl: {
                     // 3d效果可以放大、旋转等，请自己去查看官方配置
-                    alpha: 20,
+                    alpha: 35,
-                    // beta: 30,
+                    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;
+    typesofDivIntance.on('mouseover', function (params) {
-    function handleOver(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: '3%',
-            left: '10%',
+            right: '4%',
-            right: '6%',
+            bottom: '3%',
-            top: '6%',
+            top: '10%',
             containLabel: true,
         },
-        dataZoom: [
+        legend: {
-            {
+            show: true,
-                type: 'slider',
+            top: '10',
-                show: false,
+            left: 'center',
-                zoomLock: true, //禁止拉伸
+            textStyle: { color: 'rgba(255,255,255,.9)' },
-                width: 8,
+            itemWidth: 20,
-                yAxisIndex: [0],
+            itemHeight: 12.5,
-                bottom: 30,
+            icon: 'stack',
-                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%',
         },
-                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' 数值轴，适用于连续数据
+            type: 'value',
-            // 坐标轴刻度
+            max: 500,
-            axisTick: {
+            show: false,
-                show: false, // 是否显示坐标轴刻度 默认显示
+            // 不显示轴线
-            },
-            // 坐标轴轴线
             axisLine: {
-                // 是否显示坐标轴轴线 默认显示
+                show: false,
-                show: false, // 是否显示坐标轴轴线 默认显示
+            },
+            // 不显示刻度线
+            axisTick: {
+                show: false,
             },
-            // 坐标轴在图表区域中的分隔线
             splitLine: {
-                show: false, // 是否显示分隔线。默认数值轴显示
+                // 网格线为虚线
+                show: false,
             },
-            // 坐标轴刻度标签
+            // axisLabel:{
-            axisLabel: {
+            //     formatter:'{value}%'
-                show: false, // 是否显示刻度标签 默认显示
+            // }
         },
-        },
+        yAxis: {
-        // Y轴
-        yAxis: [
-            // 左侧Y轴
-            {
-                // 坐标轴类型,  'category' 类目轴，适用于离散的类目数据
-                // 为该类型时必须通过 data 设置类目数据
             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: '小麦',
-                name: '玉米', // 系列名称, 用于tooltip的显示, legend 的图例筛选
+                type: 'bar',
-                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
+                barWidth: 12,
-                stack: '总量',
+                stack: 'stack',
-                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
+                data: [160, 103, 155, 100, 50,122,98],
-                // 图形上的文本标签
-                label: {
-                    show: true,
-                    position: '玉米',
-                    textStyle: {
-                        fontSize: 12,
-                        fontWeight: 'bolder',
-                        color: 'rgba(255,255,255,1)',
-                    },
-                },
-                // 图形样式
                 itemStyle: {
-                    barBorderRadius: [0, 0, 0, 0],
+                    normal: {
-                    barBorderRadius: [0, 0, 0, 0], //
+                        barBorderRadius: 0,
-                    borderWidth: 1, // 设置边框宽度
+                        color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
-                    borderColor: 'rgba(4, 247, 227, 0.8)', // 设置边框颜色
-                    color: {
-                        colorStops: [
-                            {
-                                offset: 0,
-                                color: 'rgba(4, 247, 227, 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>