up

src/views/plough/abandonedLand/index.vue

@@ -1173,8 +1173,18 @@ function farmland() {
             textStyle: { color: 'rgba(255,255,255,.9)' },
             itemWidth: 20,
             itemHeight: 12.5,
+            icon: 'rect',
+            backgroundColor: 'transparent',
+            x: 'right', // 水平居右
         },
         tooltip: {},
+        grid: {
+            left: '5%',
+            right: '5%',
+            bottom: '9%',
+            top: '15%',
+            containLabel: true,
+        },
         xAxis: {
             type: 'category',
             data: ['水田', '旱地', '水浇地', '其他', '其他'],
@@ -1317,28 +1327,24 @@ function ASdivision() {
     const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
     var data = [
         {
-            areaName: '测试1',
-            rate: '30',
+            areaName: '区域一',
+            rate: '3598',
         },
         {
-            areaName: '测试2',
-            rate: '80',
+            areaName: '区域二',
+            rate: '1235',
         },
         {
-            areaName: '测试3',
-            rate: '100',
+            areaName: '区域三',
+            rate: '2354',
         },
         {
-            areaName: '测试4',
-            rate: '90',
+            areaName: '区域四',
+            rate: '3251',
         },
         {
-            areaName: '测试5',
-            rate: '60',
-        },
-        {
-            areaName: '测试6',
-            rate: '70',
+            areaName: '区域五',
+            rate: '1652',
         },
     ];
     var nameList = [];
@@ -1354,17 +1360,27 @@ function ASdivision() {
                 // 坐标轴指示器，坐标轴触发有效
                 type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
             },
-            formatter: function (params) {
-                let dot =
-                    '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
-                return params[0].name + '<br>' + '办结率 ：' + params[0].value + '%';
-            },
+            // formatter: function (params) {
+            //     let dot =
+            //         '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
+            //     return params[0].name + '<br>' + '办结率 ：' + params[0].value + '%';
+            // },
+        },
+        legend: {
+            show: true,
+            top: '10',
+            right: '5%',
+            textStyle: { color: 'rgba(255,255,255,.9)' },
+            itemWidth: 20,
+            itemHeight: 12.5,
+            icon: 'rect',
+            backgroundColor: 'transparent',
         },
         grid: {
-            left: '0%',
-            right: '4%',
+            left: '5%',
+            right: '5%',
             bottom: '9%',
-            top: '5%',
+            top: '10%',
             containLabel: true,
         },
         xAxis: {
@@ -1421,7 +1437,7 @@ function ASdivision() {
         },
         series: [
             {
-                name: '',
+                name: '面积',
                 barMinHeight: 10,
                 type: 'pictorialBar',
                 barCategoryGap: '60%',
@@ -1443,8 +1459,10 @@ function ASdivision() {
                     },
                 },
                 label: {
-                    normal: {
-                        show: false,
+                    show: true,
+                    position: 'top',
+                    textStyle: {
+                        color: '#ffffff',
                     },
                 },
                 data: dataList,