src/views/crops/classify/index.vue

@@ -17,10 +17,7 @@
                     <span>作物类型统计-高标准农田</span>
                     <p>
                         下载 &nbsp;
-                        <img
+                        <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
-                            src="@/assets/icons/svg/downloads.svg"
-                            style="width: 14px; height: 14px; cursor: pointer"
-                        />
                     </p>
                 </div>
                 <div ref="farmlandDiv" class="farmlandDiv"></div>
@@ -31,25 +28,12 @@
                     <span>作物类型统计-行政区划</span>
                     <p>
                         下载 &nbsp;
-                        <img
+                        <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
-                            src="@/assets/icons/svg/downloads.svg"
-                            style="width: 14px; height: 14px; cursor: pointer"
-                        />
                     </p>
                 </div>
-                <el-select
+                <el-select popper-class="select_city" @change="selectTab(item)" v-model="value" clearable placeholder="全部">
-                    popper-class="select_city"
+                    <el-option v-for="item in Township.arr" :key="item.properties.XZDM" :label="item.properties.XZMC"
-                    @change="selectTab(item)"
+                        :value="item.properties.XZDM" />
-                    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>
@@ -59,18 +43,11 @@
                 <template #title>图例</template>
                 <div class="mt-4">
                     <el-checkbox-group v-model="checkList" @change="change">
-                        <el-checkbox
+                        <el-checkbox v-for="(value, item, key) in dic" :key="key" :style="{
-                            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);
@@ -179,7 +156,7 @@ const farmlandDiv = ref(null);
 const ProgressBarDiv = ref(null);
 const ASdivisionDiv = ref(null);
 let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
-const value = ref('370211');
+const value = ref('');
 const clickInfoMap = ref({ info: [] });
 let dd = {
     小麦: [],
@@ -226,7 +203,7 @@ var data = {
     wheat: [null, 500, null, 500, null, 500, null, null],
     Blueberries: [null, null, null, null, null, null, null, 500],
 };
-let classData = [302034, 243990, 42344, 34234, 304235];
+let classData = [200, 85, 112, 275, 305];
 const options = [
     {
         value: 'Option1',
@@ -239,7 +216,7 @@ const options = [
 ];
 // 组件挂载完成后执行
 onMounted(() => {
-    initonMounted();
+    initonMounted()
     // checkList.value = Object.keys(dic.filter(item => !item.disabled))
 });
 // 初始化
@@ -253,7 +230,7 @@ function initonMounted() {
     farmland(); //图表
     ASdivision(); //图表
     getArea(); //请求
-    getFarmland();
+    getFarmland()
     checkList.value = Object.keys(dic);
 }
 const mapOption = {
@@ -330,15 +307,19 @@ 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([]);
@@ -425,6 +406,7 @@ watch(
     }
 );
 
+
 // 添加wms
 function addWms(layers, customName) {
     let map = new Cesium.WebMapServiceImageryProvider({
@@ -440,14 +422,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) {
@@ -470,12 +452,7 @@ function layerClick() {
                     const providerPoint = layers[index];
                     // 拿取最后一个图层
                     let provider = providerPoint._imageryProvider;
-                    if (
+                    if (provider && provider.ready && provider._layers && providerPoint.show === true) {
-                        provider &&
-                        provider.ready &&
-                        provider._layers &&
-                        providerPoint.show === true
-                    ) {
                         xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
                         let promise = provider.pickFeatures(
                             xy.x,
@@ -493,7 +470,7 @@ function layerClick() {
                                             //防止
                                             XZDM = newData.properties.XZDM;
                                             value.value = XZDM; //
-                                            selectTab(); //
+                                            // selectTab(); //
                                             let item = newData.data;
                                             // 定位
                                             viewer.camera.flyTo({
@@ -522,9 +499,8 @@ function layerClick() {
                                             );
                                             // 隐藏pop
                                             hiddenOverlayChart();
-                                        } else {
+                                        } else {//已经点击了镇了，开始监测是否点击作物了
-                                            //已经点击了镇了，开始监测是否点击作物了
+                                            zuowuClick(layers, cartographic, level, xy, movement)
-                                            zuowuClick(layers, cartographic, level, xy, movement);
                                         }
                                     } else {
                                         removeWms(['village_CQL']);
@@ -535,7 +511,7 @@ function layerClick() {
                     }
                 } else {
                     // 直接种植结构
-                    zuowuClick(layers, cartographic, level, xy, movement);
+                    zuowuClick(layers, cartographic, level, xy, movement)
                 }
             }
         }
@@ -547,14 +523,17 @@ async function zuowuClick(layers, cartographic, level, xy, movement) {
     let promise = layers.map(async item => {
         if (item._imageryProvider._layers) {
             // 是种植结构图层
-            if (
+            if (Object.values(layersDic).findIndex(it => it === item._imageryProvider._layers) > -1) {
-                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,
@@ -574,7 +553,9 @@ 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);
                                 }
@@ -592,8 +573,12 @@ 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 longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(
-            let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
+                6
+            );
+            let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(
+                6
+            );
             clickInfoMap.value = {
                 info: newData,
                 // ...newData['0'],
@@ -664,11 +649,7 @@ function removeWms(nameArry, isMohu) {
         const layers = viewer.imageryLayers._layers;
         for (let f = layers.length - 1; f >= 0; f--) {
             nameArry.forEach(item => {
-                if (
+                if (layers[f] && layers[f]._imageryProvider && layers[f]._imageryProvider.customName) {
-                    layers[f] &&
-                    layers[f]._imageryProvider &&
-                    layers[f]._imageryProvider.customName
-                ) {
                     if (isMohu) {
                         if (layers[f]._imageryProvider.customName.indexOf(item) > -1) {
                             viewer.imageryLayers.remove(layers[f]);
@@ -737,15 +718,11 @@ function showOverlayChart(position) {
 // 获取高标准农田
 function getFarmland() {
     axios({
-        url:
+        url: serverAPI.geoserverUrl + '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afarmland&maxFeatures=50&outputFormat=application%2Fjson',
-            serverAPI.geoserverUrl +
+        method: 'get'
-            '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afarmland&maxFeatures=50&outputFormat=application%2Fjson',
+    }).then(res => {
-        method: 'get',
+        console.log('农田：', res)
-    })
+    }).catch(err => { })
-        .then(res => {
-            console.log('农田：', res);
-        })
-        .catch(err => {});
 }
 //接口
 const getArea = (item, index) => {
@@ -785,7 +762,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 => {
@@ -803,21 +780,15 @@ 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) {
@@ -1031,63 +1002,33 @@ function areachar() {
 
 function typesof() {
     const typesofDivIntance = echarts.init(typesofDiv.value);
-    let isSelected = '';
+    let selectedIndex = '';
-    let isHovered = '';
     let hoveredIndex = '';
     let option = getPie3D(
         [
             {
-                name: '小麦',
+                name: '水田',
-                value: 101,
+                value: 60,
                 itemStyle: {
-                    opacity: 0.5,
+                    color: '#1890FF',
-                    color: 'rgba(110, 209, 84, 0.9)',
                 },
             },
             {
-                // 数据项名称
+                name: '水浇地',
-                name: '玉米',
+                value: 44,
-                value: 56,
                 itemStyle: {
-                    // 透明度
+                    color: '#1EE7E7',
-                    opacity: 0.5,
-                    // 扇形颜色
-                    color: 'rgba(251, 201, 3, 1)',
-                },
-                label: {
-                    show: true,
                 },
             },
             {
-                // 数据项名称
+                name: '旱地',
-                name: '大豆',
+                value: 32,
-                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) {
@@ -1113,7 +1054,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 {
@@ -1211,7 +1152,6 @@ 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;
 
@@ -1234,68 +1174,29 @@ 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 `${
+                        return `${params.seriesName
-                            params.seriesName
+                            }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
-                        }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                            };"></span>${option.series[params.seriesIndex].pieData.value}`;
-                            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,
@@ -1310,16 +1211,16 @@ function typesof() {
             },
             grid3D: {
                 show: false,
-                boxHeight: 10,
+                boxHeight: 5,
-                top: '-10%',
+                top: '-20%',
                 viewControl: {
                     // 3d效果可以放大、旋转等，请自己去查看官方配置
-                    alpha: 35,
+                    alpha: 20,
-                    beta: 30,
+                    // beta: 30,
                     rotateSensitivity: 1,
                     zoomSensitivity: 0,
                     panSensitivity: 0,
-                    autoRotate: true,
+                    // autoRotate: true,
                     distance: 300,
                 },
                 // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
@@ -1346,7 +1247,8 @@ function typesof() {
     }
     //  修正取消高亮失败的 bug
     // 监听 mouseover，近似实现高亮（放大）效果
-    typesofDivIntance.on('mouseover', function (params) {
+    option.title.text = option.series[0].name + ' ' + option.series[0].pieData.value;
+    function handleOver(params) {
         // 准备重新渲染扇形所需的参数
         let isSelected;
         let isHovered;
@@ -1390,6 +1292,11 @@ 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;
@@ -1415,15 +1322,17 @@ function typesof() {
             // 使用更新后的 option，渲染图表
             typesofDivIntance.setOption(option);
         }
+    }
+    typesofDivIntance.on('mouseover', function (params) {
+        handleOver(params);
     });
 
-    // 修正取消高亮失败的 bug
+    function handleOut() {
-    typesofDivIntance.on('globalout', function () {
         if (hoveredIndex !== '') {
             // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
             isSelected = option.series[hoveredIndex].pieStatus.selected;
             isHovered = false;
-            let k = option.series[hoveredIndex].pieStatus.k;
+            k = option.series[hoveredIndex].pieStatus.k;
             startRatio = option.series[hoveredIndex].pieData.startRatio;
             endRatio = option.series[hoveredIndex].pieData.endRatio;
             // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
@@ -1447,7 +1356,19 @@ 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);
@@ -1455,146 +1376,322 @@ function typesof() {
 // 高标准农田echarts
 function farmland() {
     const farmlandDivIntance = echarts.init(farmlandDiv.value);
-    let option = {
+    var option = {
-        // backgroundColor: '#333333',
+        // 设置图表的位置
-        // tooltip: {},
         grid: {
-            left: '3%',
+            bottom: '8%',
-            right: '4%',
+            left: '10%',
-            bottom: '3%',
+            right: '6%',
-            top: '10%',
+            top: '6%',
             containLabel: true,
         },
-        legend: {
+        dataZoom: [
-            show: true,
+            {
-            top: '10',
+                type: 'slider',
-            left: 'center',
+                show: false,
-            textStyle: { color: 'rgba(255,255,255,.9)' },
+                zoomLock: true, //禁止拉伸
-            itemWidth: 20,
+                width: 8,
-            itemHeight: 12.5,
+                yAxisIndex: [0],
-            icon: 'stack',
+                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%',
                 },
-
+                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',
+            type: 'value', // 坐标轴类型,   'value' 数值轴，适用于连续数据
-            max: 500,
+            // 坐标轴刻度
-            show: false,
-            // 不显示轴线
-            axisLine: {
-                show: false,
-            },
-            // 不显示刻度线
             axisTick: {
-                show: false,
+                show: false, // 是否显示坐标轴刻度 默认显示
-            },
-            splitLine: {
-                // 网格线为虚线
-                show: false,
-            },
-            // axisLabel:{
-            //     formatter:'{value}%'
-            // }
-        },
-        yAxis: {
-            type: 'category',
-            inverse: true,
-            splitLine: {
-                show: false,
-            },
-            axisTick: {
-                show: false,
             },
+            // 坐标轴轴线
             axisLine: {
-                show: false,
+                // 是否显示坐标轴轴线 默认显示
+                show: false, // 是否显示坐标轴轴线 默认显示
             },
+            // 坐标轴在图表区域中的分隔线
+            splitLine: {
+                show: false, // 是否显示分隔线。默认数值轴显示
+            },
+            // 坐标轴刻度标签
             axisLabel: {
-                interval: 0,
+                show: false, // 是否显示刻度标签 默认显示
-                color: 'rgba(255, 255, 255, 1)',
-                fontSize: 14,
             },
-            data: ['片区一', '片区二', '片区三', '片区四', '片区五','片区六','片区七'],
         },
+        // 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,
+            },
+        ],
+        // 系列列表
         series: [
             {
-                name: '小麦',
+                type: 'bar', // 系列类型
-                type: 'bar',
+                name: '玉米', // 系列名称, 用于tooltip的显示, legend 的图例筛选
-                barWidth: 12,
+                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
-                stack: 'stack',
+                stack: '总量',
-                data: [160, 103, 155, 100, 50,122,98],
+                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
-                itemStyle: {
+                // 图形上的文本标签
-                    normal: {
+                label: {
-                        barBorderRadius: 0,
+                    show: true,
-                        color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
+                    position: '玉米',
-                            {
+                    textStyle: {
-                                offset: 1,
+                        fontSize: 12,
-                                color: 'rgba(33, 187, 251, 0.9)',
+                        fontWeight: 'bolder',
+                        color: 'rgba(255,255,255,1)',
                     },
+                },
+                // 图形样式
+                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(33, 187, 251, 0.05)',
+                                color: 'rgba(4, 247, 227, 0.9)', // 0% 处的颜色
                             },
-                        ]),
-                    },
-                },
-            },
-            {
-                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.9)',
+                                color: 'rgba(4, 247, 227, 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], //
+                    borderWidth: 1, // 设置边框宽度
+                    borderColor: 'rgba(143, 186, 243, 0.8)', // 设置边框颜色
+                    color: {
+                        colorStops: [
                             {
                                 offset: 0,
-                                color: 'rgba(143, 186, 243, 0.05)',
+                                color: 'rgba(143, 186, 243, 0.9)', // 0% 处的颜色
                             },
-                        ]),
-                    },
-                },
-            },
-            {
-                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, 1)',
+                                color: 'rgba(143, 186, 243, 0.3)', // 100% 处的颜色
+                            },
+                        ],
+                    },
+                },
+                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.05)',
+                                color: 'rgba(255, 225, 104, 0.9)', // 0% 处的颜色
                             },
-                        ]),
+                            {
+                                offset: 1,
+                                color: 'rgba(255, 225, 104, 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(33, 187, 251, 0.8)', // 设置边框颜色
+                    color: {
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(33, 187, 251, 0.9)', // 0% 处的颜色
+                            },
+                            {
+                                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() {
@@ -1903,13 +2000,14 @@ 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>
 
@@ -1946,11 +2044,9 @@ $height: calc(100vh - 100px);
             height: 25px;
             border-radius: 20px;
             font-size: 14px;
-            background: linear-gradient(
+            background: linear-gradient(180deg,
-                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;
@@ -1992,11 +2088,7 @@ $height: calc(100vh - 100px);
 
         .typesofDiv {
             width: 100%;
-            height: 397px;
+            height: 267px;
-            background: url('@/assets/images/bj1_00000_iSpt.png');
-            background-repeat: no-repeat;
-            background-size: 85% 85%;
-            background-position: center;
         }
     }
 }
@@ -2252,5 +2344,6 @@ $height: calc(100vh - 100px);
 
 .el-popper__arrow::before {
     background: rgba(41, 255, 255, 0.7) !important;
+
 }
 </style>