gx

src/view/echarts/ylXZZC.vue

@@ -13,6 +13,8 @@ import * as echarts from "echarts";
 const chart = ref(null); // 创建DOM引用
 
 const data = ["大街乡", "社阳乡", "沐尘畲族乡", "庙下乡", "溪口镇", "罗家乡"];
+const datas = ["2", "4", "7", " 23", "25", "250"];
+
 let zoomShow = true;
 // if (data.length > 7) {
 //   zoomShow = true;
@@ -31,7 +33,7 @@ let option = {
   grid: {
     top: "-2%",
     left: "3%",
-    right: "4%",
+    right: "8%",
     bottom: "3%",
     containLabel: true,
     color: "#ffffff",
@@ -69,26 +71,24 @@ let option = {
     },
   ],
   calculable: true,
-  color: "rgba(0, 252, 255, 1)",
-  // label: {
-  //             normal: {
-  //               show: true,
-  //               lineHeight: 10,
-  //               formatter: '{c}',
-  //               position: 'right',
-  //               textStyle: {
-  //                 color: '#fff',
-  //                 fontSize: 10
-  //               }
-  //             }
-  //           },
   xAxis: {
+    // name: '/次',
     type: "value",
+    data: datas,
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
         color: "#ffffff",
       },
+      // formatter: `{value}/次` // 在每个x轴坐标都添加了单位
+      formatter: function (value, index) {
+        if (index === datas.length - 1) {
+          // 判断是否为最后一个标签
+          return value + "/次"; // 添加单位
+        } else {
+          return value; // 不是最后一个标签则不添加单位
+        }
+      },
     },
     splitLine: {
       //分割线配置
@@ -102,17 +102,17 @@ let option = {
   yAxis: {
     type: "category", //横向显示
     data: data,
+    // max:10,
+    //y轴文字的配置
     axisLabel: {
-      //y轴文字的配置
       inside: false,
-      // 设置固定的间隔
-      bargap: 0.5,
+      bargap: 0.5, // 设置固定的间隔
       textStyle: {
         color: "#ffffff",
       },
     },
+    //y轴线的颜色以及宽度
     axisLine: {
-      //y轴线的颜色以及宽度
       show: false,
       lineStyle: {
         color: "#ffffff",
@@ -126,10 +126,8 @@ let option = {
       // 设置滚动区域的高度
       height: 100,
     },
-
-    // max:10,
+    //分割线配置
     splitLine: {
-      //分割线配置
       show: false,
       lineStyle: {
         color: "#ffffff",
@@ -140,15 +138,16 @@ let option = {
   series: [
     {
       type: "bar",
-      data: [2, 4, 7, 23, 25, 250],
+      data: datas,
       barWidth: 15, //柱宽
       barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
       // barCategoryGap: "10" /*多个并排柱子设置柱子之间的间距*/,
+      barMaxWidth: 20, // 每一个都要设置
+      barMinWidth: 5, // 每一个都要设置
       itemStyle: {
-        // emphasis: {
-        //     barBorderRadius: 7
-        // },
         normal: {
+          borderWidth: 1,
+          borderColor: "rgba(0, 183, 255, 1)",
           borderRadius: [0, 0, 50, 0], //圆角边框
           color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
             { offset: 0, color: "rgba(26, 255, 217, 0)" },
@@ -160,7 +159,6 @@ let option = {
   ],
 };
 
-// 使用生命钩子
 onMounted(() => {
   // 基于准备好的dom，初始化echarts实例
   // var myChart = echarts.init(document.getElementById('main'));