大屏

src/views/command/transverseBar.vue

@@ -71,22 +71,21 @@ export default {
         offset: this.$root.$options.filters.filterPx(0.9,this.fontSize),
         custom: true, // 使用自定义文本
         htmlTemplate(text, item, index) {
-          console.log(item);
           if (index == 5) {
             return (
-              '<div class="radio"><div class="radio-dev one">1</div><div>' +
+              '<div class="radio"><div class="radio-dev one">1</div><div title="'+text+'">' +
               text +
               "</div></div>"
             );
           } else if (index == 4) {
             return (
-              '<div class="radio"><div class="radio-dev two">2</div><div>' +
+              '<div class="radio"><div class="radio-dev two">2</div><div title="'+text+'">' +
               text +
               "</div></div>"
             );
           } else if (index == 3) {
             return (
-              '<div class="radio"><div class="radio-dev three">3</div><div>' +
+              '<div class="radio"><div class="radio-dev three">3</div><div title="'+text+'">' +
               text +
               "</div></div>"
             );
@@ -94,7 +93,7 @@ export default {
             return (
               '<div class="radio"><div class="radio-dev other">' +
               (index==2?4:(index==1?5:(index==0)?6:0))+
-              "</div><div>" +
+              "</div><div title="+text+">" +
               text +
               "</div></div>"
             );

src/views/main/transverseBar.vue

@@ -40,7 +40,7 @@ export default {
     this.data = [
       { type: "固城湖", value: 45, cat: "4", cc: "1." },
       { type: "百家湖", value: 54, cat: "4" },
-      { type: "莫愁湖莫愁湖", value: 65, cat: "4" },
+      { type: "莫愁湖莫愁湖asd", value: 65, cat: "4" },
       { type: "玄武湖", value: 80, cat: "3" },
       { type: "金川河", value: 110, cat: "2" },
       { type: "秦淮河", value: 187, cat: "1" }
@@ -54,7 +54,7 @@ export default {
         "auto",
         this.$root.$options.filters.filterPx(0.5,this.fontSize),
         "auto",
-        this.$root.$options.filters.filterPx(1,this.fontSize)
+        "auto"
       ]
     });
     chart.scale({
@@ -68,38 +68,42 @@ export default {
       tickLine: null,
       line: null,
       label: {
-        offset: this.$root.$options.filters.filterPx(1,this.fontSize),
-        custom: true, // 使用自定义文本
-        htmlTemplate(text, item, index) {
-          console.log(item);
-          if (index == 5) {
-            return (
-              '<div class="radio"><div class="radio-dev one">1</div><div>' +
-              text +
-              "</div></div>"
-            );
-          } else if (index == 4) {
-            return (
-              '<div class="radio"><div class="radio-dev two">2</div><div>' +
-              text +
-              "</div></div>"
-            );
-          } else if (index == 3) {
-            return (
-              '<div class="radio"><div class="radio-dev three">3</div><div>' +
-              text +
-              "</div></div>"
-            );
-          } else {
-            return (
-              '<div class="radio"><div class="radio-dev other">' +
-              (index==2?4:(index==1?5:(index==0)?6:0))+
-              "</div><div>" +
-              text +
-              "</div></div>"
-            );
-          }
-        }
+        offset: this.$root.$options.filters.filterPx(0.2,this.fontSize),
+        textStyle: {
+          fill: "#ffffff",
+          fontSize: this.$root.$options.filters.filterPx(0.14, this.fontSize),
+          fontWeight: 300
+        },
+        // custom: true, // 使用自定义文本
+        // htmlTemplate(text, item, index) {
+        //   if (index == 5) {
+        //     return (
+        //       '<div class="radio"><div class="radio-dev one">1</div><div>' +
+        //       text +
+        //       "</div></div>"
+        //     );
+        //   } else if (index == 4) {
+        //     return (
+        //       '<div class="radio"><div class="radio-dev two">2</div><div>' +
+        //       text +
+        //       "</div></div>"
+        //     );
+        //   } else if (index == 3) {
+        //     return (
+        //       '<div class="radio"><div class="radio-dev three">3</div><div>' +
+        //       text +
+        //       "</div></div>"
+        //     );
+        //   } else {
+        //     return (
+        //       '<div class="radio"><div class="radio-dev other">' +
+        //       (index==2?4:(index==1?5:(index==0)?6:0))+
+        //       "</div><div>" +
+        //       text +
+        //       "</div></div>"
+        //     );
+        //   }
+        // }
       }
     });
     chart.axis("value", {
@@ -123,7 +127,6 @@ export default {
         },
         offset: 10
       });
-
     chart.render();
     this.chart = chart;
     let me = this;
@@ -157,7 +160,6 @@ export default {
       font-size: 0.1rem;
     }
     > div:last-child {
-      width: 0.687rem;
       overflow: hidden;
       text-overflow: ellipsis;
       -o-text-overflow: ellipsis;