收入信息

liuqimichale
1 parent f197b24f
Showing 4 changed files with 259 additions and 5 deletions
src/components/VIncome.vue
src/components/base/BarEcharts.vue
src/components/base/barChart.vue
src/utils/debounce.js
@@ -6,7 +6,7 @@
                 <span>总计</span>
             </account-num>
             <div class="income-echart" id="income-echart">
-
+                <bar-chart :chart-data="pieChartData"></bar-chart>
             </div>
         </div>
     </div>
@@ -15,20 +15,24 @@
 <script>
 import CardTitle from './base/CardTitle'
 import AccountNum from './base/AccountNum'
-import echarts from 'echarts'
+import barChart from './base/barChart'
 export default {
   name: 'VIncome',
   components: {
     CardTitle,
-    AccountNum
+    AccountNum,
+    barChart
   },
   data() {
     return {
-
+      pieChartData: {
+        yData: [1,1],
+        legendData: ['空余','占有']
+      },
     }
   },
   mounted(){
-    this.drawBar();
+    //this.drawBar();
   },
   methods: {
     drawBar() {
@@ -65,6 +69,7 @@ export default {
         ]
       };
       myChart.setOption(option);
+
     }
   }
 }
+<template>
+    <div></div>
+</template>
+
+<script>
+export default {
+  name: 'BarEcharts'
+}
+</script>
+
+<style scoped>
+
+</style>
+<template>
+  <div :class="className" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+require('echarts/theme/macarons') // echarts theme
+import {debounce} from '../../utils/debounce'
+
+export default {
+  name: 'barChart',
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: function () {
+      this.$nextTick(()=>{
+        this.initChart()
+      })
+    }
+  },
+  mounted() {
+    this.initChart()
+    if (this.autoResize) {
+      this.__resizeHandler = debounce(() => {
+        if (this.chart) {
+          this.chart.resize()
+        }
+      }, 100)
+      window.addEventListener('resize', this.__resizeHandler)
+    }
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    if (this.autoResize) {
+      window.removeEventListener('resize', this.__resizeHandler)
+    }
+
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    setOptions({yData} = {}) {
+      this.chart.setOption(
+        {
+
+          grid: {
+            top: 0,
+            left: 0,
+            right: '20',
+            bottom: -10,
+            containLabel: true
+          },
+          title:{show:false},
+          xAxis: {
+            show: false,//尽管显示false，但仍然占用空间containLabel为true的话[echarts bug]
+            nameGap:0
+          },
+          yAxis: [{
+            show: true,
+            nameLocation:'start',
+            //data: ['支付宝', '微信', '其它'],
+            data: [
+              {
+                value:'支付宝',
+                textStyle:{
+                  color:'#01AEFE'
+                }
+              },
+              {
+                value:'微信',
+                textStyle:{
+                  color:'#06C406'
+                }
+              },
+              {
+                value:'其它',
+                textStyle:{
+                  color:'#FFAB00'
+                }
+              }
+            ],//右侧Y轴值
+            inverse: true,
+            axisLine: {show: false},
+            splitLine: {show: false},
+            axisTick: {show: false },
+            axisLabel: {
+              //margin:-20,
+              // nameTextStyle:{
+              //   align:'left'
+              // }
+            }
+          }, {
+            show: true,
+            inverse: true,
+            data: [
+                    {
+                      value:1000,
+                      textStyle:{
+                        color:'#01AEFE'
+                      }
+                    },
+                    {
+                      value:200,
+                      textStyle:{
+                        color:'#06C406'
+                      }
+                    },
+                    {
+                      value:300,
+                      textStyle:{
+                        color:'#FFAB00'
+                      }
+                    }
+                    ],//右侧Y轴值
+            axisLabel: {
+              textStyle: {fontSize: 12,},
+            },
+            axisLine: { show: false },
+            splitLine: { show: false},
+            axisTick: {show: false},
+          }],
+          series: [{
+            name: '条',
+            type: 'bar',
+            yAxisIndex: 0,
+            data: [1000,200,300],//百分比
+            barWidth: '40%',
+            itemStyle: {
+              normal: {
+                barBorderRadius: 16,
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  x1: 1,
+                  colorStops: [{
+                    offset: 0,
+                    color: '#02ddff'
+                  }, {
+                    offset: 1,
+                    color: '#00feff'
+                  }]
+                }
+              },
+            },
+            label: {
+              normal: {show: false}
+            },
+          }, {
+            name: '框',
+            type: 'bar',
+            yAxisIndex: 1,
+            barGap: '-100%',
+            data: [1500,1500,1500],//百分比
+            barWidth: '40%',
+            itemStyle: {
+              normal: {
+                color: 'none',
+                borderColor: '#157ADB',
+                borderWidth: 0.5,
+                //barBorderRadius: 15,
+              }
+            }
+          }, ]
+        }
+      )
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el)
+      this.setOptions(this.chartData)
+    },
+
+  }
+}
+</script>
+export function debounce(func, wait, immediate) {
+  let timeout, args, context, timestamp, result
+
+  const later = function() {
+    // 据上一次触发时间间隔
+    const last = +new Date() - timestamp
+
+    // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
+    if (last < wait && last > 0) {
+      timeout = setTimeout(later, wait - last)
+    } else {
+      timeout = null
+      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+      if (!immediate) {
+        result = func.apply(context, args)
+        if (!timeout) context = args = null
+      }
+    }
+  }
+
+  return function(...args) {
+    context = this
+    timestamp = +new Date()
+    const callNow = immediate && !timeout
+    // 如果延时不存在，重新设定延时
+    if (!timeout) timeout = setTimeout(later, wait)
+    if (callNow) {
+      result = func.apply(context, args)
+      context = args = null
+    }
+
+    return result
+  }
+}