保留两位小数并靠右显示

src/containers/Dashboard/CampusRank/CampusRankChart.vue

@@ -60,6 +60,7 @@ export default {
         itemTpl: (value, color, checked, index) => {
           const obj = this.data[index];
           checked = checked ? 'checked' : 'unChecked';
+          let price = this.$formatPrice(obj.count);
           return `
             <li
               class="g2-legend-list-item item-${index} ${checked}"
@@ -72,7 +73,7 @@ export default {
                 style="display:inline-block;margin-right:10px;background-color:${color};"
               ></i>
               <span class="g2-legend-text" title="${value}">${value}： </span>
-              <span>${obj.count.toFixed(2)}</span>
+              <span class="g2-legend-price">${obj.count.toFixed(2)}</span>
             </li>
             `;
         },
@@ -209,5 +210,10 @@ export default {
     white-space: nowrap;
     vertical-align: middle;
   }
+  .g2-legend-price {
+    display: inline-block;
+    width: 90px;
+    text-align: right;
+  }
 }
 </style>

src/containers/Dashboard/SeviceRatio/SeviceRatioChart.vue

@@ -67,7 +67,7 @@ export default {
                 style="display:inline-block;margin-right:10px;background-color:${color};"
               ></i>
               <span class="g2-legend-text">${value}： </span>
-              <span>${obj.count}</span>
+              <span class="g2-legend-price">${obj.count.toFixed(2)}</span>
             </li>
             `;
         },
@@ -151,6 +151,11 @@ export default {
   .SeviceRatio-serviceName {
     font-size: 16px;
   }
+  .g2-legend-price {
+    display: inline-block;
+    width: 72px;
+    text-align: right;
+  }
 }
 @media screen and (max-width: $bigScreenWidth) {
   #SeviceRatio {

src/utils/extends.js

@@ -5,6 +5,7 @@ import {
   formatePhone,
   allowLetterNumber,
   formatterMoneyToDouble,
+  formatPrice,
 } from '@/utils/index';
 import rymUi from 'rym-element-ui';
 import 'rym-element-ui/lib/rymUi.css';
@@ -31,6 +32,7 @@ const extendVue = Vue => {
   Vue.prototype.$getFilters = getFilters;
   Vue.prototype.$allowLetterNumber = allowLetterNumber;
   Vue.prototype.$formatterMoneyToDouble = formatterMoneyToDouble;
+  Vue.prototype.$formatPrice = formatPrice;
 
   Vue.component('UserCard', UserCard);
   Vue.component('UserInfo', UserInfo);

src/utils/index.js

@@ -355,3 +355,16 @@ export const allowLetterNumber = value => {
 export const formatterMoneyToDouble = val => {
   return val ? Number(val).toFixed(2) : Number(0).toFixed(2);
 };
+export const formatPrice = price => {
+  var result = [],
+    counter = 0;
+  price = (price || 0).toString().split('');
+  for (var i = price.length - 1; i >= 0; i--) {
+    counter++;
+    result.unshift(price[i]);
+    if (!(counter % 3) && i != 0) {
+      result.unshift(',');
+    }
+  }
+  return result.join('');
+};