更新

src/components/MonitorComponents/MonitorCard/monitor-card.vue

 <template>
 <m-animate :enter="enter" :leave="leave">
   <div class="monitor-card">
-    <component :is="card" v-bind="$attrs" :title="title">
+    <component :is="card" v-bind="$attrs">
       <slot/>
     </component>
   </div>
@@ -12,9 +12,6 @@
 export default {
   name: 'MonitorCard',
   props: {
-    title: {
-      type: String,
-    },
     mode: {
       type: [String, Number],
       default: '1',

src/components/MonitorComponents/MonitorChart/monitor-chart.vue

@@ -88,7 +88,6 @@ export default {
     /** 设置坐标轴 */
     setAxis(options) {
       const {xAxis, yAxis, shape} = this.config
-      if (shape[0].type === 'pie' || shape[0].type === 'donut') return
       const config = {
         data: this.data.map(item => item[(yAxis && yAxis.key) || xAxis.key]),
         boundaryGap: !shape.every(item => item.type === 'line')
@@ -131,16 +130,16 @@ export default {
     /** 设置图例说明 */
     setLegend(options) {
       const {legend} = this.config
-      if (legend && legend.hide) {
+      if (legend.hide) {
         options.grid.top = '5%'
         return
       }
       options.legend = Object.assign({}, this.defaultOptions.legend, this.options.legend)
-      if (legend && legend.orient) {
+      if (legend.orient) {
         options.legend.orient = legend.orient
       }
       options.legend.data = this.dataSource.map(item => item.name)
-      switch (legend && legend.align) {
+      switch (legend.align) {
       case 'left':
         options.legend.left = '5%'
         break
@@ -157,11 +156,19 @@ export default {
       const {shape} = this.config
       // 如果为饼图则数据需是[{name: 'name', value: 1}]格式，且不需要坐标轴
       if (shape[0].type === 'pie') {
-        this.setPie(options)
-        return
-      }
-      if (shape[0].type === 'donut') {
-        this.setDonut(options)
+        options.color = this.colors
+        options.series = [{
+          label: {
+            normal: {
+              show: false,
+            },
+          },
+          ...shape[0],
+        }]
+        options.series[0].data = options.legend.data = this.data
+        options.tooltip.trigger = 'item'
+        this.$delete(options, 'xAxis')
+        this.$delete(options, 'yAxis')
         return
       }
 
@@ -191,90 +198,6 @@ export default {
         return result
       })
     },
-
-    // 绘制饼图
-    setPie(options) {
-      const {shape} = this.config
-      options.color = this.colors
-      options.series = [{
-        label: {
-          normal: {
-            show: false,
-          },
-        },
-        ...shape[0],
-      }]
-      if (options.legend && options.legend.data) {
-        options.series[0].data = options.legend.data = this.data
-      } else {
-        options.series[0].data = this.data
-      }
-      options.tooltip.trigger = 'item'
-      this.$delete(options, 'xAxis')
-      this.$delete(options, 'yAxis')
-    },
-
-    // 绘制同心圆图
-    setDonut(options) {
-      const {shape} = this.config
-      options.color = this.colors
-      options.series = this.getDonutConfig(shape)
-    },
-
-    getDonutConfig(args) {
-      const len = args.length
-      if (len <= 0 ) return
-      const total = this.data.reduce((acc, cur) => { // 计算数据的value总和
-        return acc + cur.value
-      }, 0)
-
-      return args.map((e, i) => {
-        const rate = Math.round((len - i) * this.fontSize)
-        let borderColor = this.colors[i]
-        if(Array.isArray(borderColor)) {
-          borderColor = {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [{
-              offset: 0, color: borderColor[0] // 0% 处的颜色
-            }, {
-              offset: 1, color: borderColor[1] // 100% 处的颜色
-            }],
-            global: false, // 缺省为 false
-          }
-        }
-        return {
-          type: 'pie',
-          name: e.name,
-          clockWise: false, //顺时加载
-          hoverAnimation: false, //鼠标移入变大
-          radius: [rate, rate + 1],
-          itemStyle: {
-            normal: {
-              label: {
-                show: false,
-              },
-              labelLine: {
-                show: false,
-              },
-              borderWidth: this.borderWidth,
-              borderColor: borderColor,
-            }
-          },
-          data: [
-            this.data[i],
-            {
-              value: Math.round(total - this.data[i].value),
-              name: '',
-              itemStyle: this.blackStyle,
-            }
-          ]
-        }
-      })
-    },
   },
   computed: {
     colors() {
@@ -367,24 +290,6 @@ export default {
     fontSize() {
       return Math.floor(screen.height * 1.48 / 100)
     },
-    borderWidth() {
-      return this.fontSize * 0.6
-    },
-    blackStyle() {
-      return {
-        normal: {
-          label: {
-            show: false,
-          },
-          labelLine: {
-            show: false
-          },
-          color: 'transparent',
-          borderColor: 'rgba(0,0,0,0.1)',
-          borderWidth: this.borderWidth,
-        },
-      }
-    },
   },
   watch: {
     data(cur, past) {

src/store/state.js

@@ -41,7 +41,7 @@ export default {
       title:'管理面积',
       img:'map.png',
       unit: 'k㎡',
-      num:'173377718',
+      num:'17337718',
     },
   ]
 }

src/util/common.js

@@ -33,4 +33,34 @@ export default {
       return path.reduce(reducer, obj)
     }
   },
+  /**
+     * 转换为金钱格式(千分位且保留两位小数)
+     * @param {Number | String} num [需转换的数字或字符串]
+     */
+  toMoney(num) {
+    if (!num) {
+      return 0.00
+    }
+    num = this.toFloat(num).toFixed(2)
+    const arr = num.toString().split('.')
+    let int = (arr[0] || 0).toString(),
+      result = ''
+    while (int.length > 3) {
+      result = ',' + int.slice(-3) + result
+      int = int.slice(0, int.length - 3)
+    }
+    if (int) {
+      result = int + result
+    }
+    return `${result}.${arr[1]}`
+  },
+  //
+  //
+  //   转换为千位分隔符
+  //
+  format (num) {
+    var reg=/\d{1,3}(?=(\d{3})+$)/g
+    return (num + '').replace(reg, '$&,')
+  }
+
 }