bar echarts

liuqimichale
1 parent e7c25d67
Showing 5 changed files with 173 additions and 2 deletions
package-lock.json
package.json
src/components/barChart.vue
src/utils/debounce.js
src/views/pdasection.vue
@@ -2675,6 +2675,14 @@
         "stream-shift": "^1.0.0"
       }
     },
+    "echarts": {
+      "version": "4.2.0-rc.2",
+      "resolved": "http://registry.npm.taobao.org/echarts/download/echarts-4.2.0-rc.2.tgz",
+      "integrity": "sha1-apg5eq+oG2XL8LwV2a/b+yRN+R4=",
+      "requires": {
+        "zrender": "4.0.5"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "http://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -10760,6 +10768,11 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "4.0.5",
+      "resolved": "http://registry.npm.taobao.org/zrender/download/zrender-4.0.5.tgz",
+      "integrity": "sha1-bo9ziXHOLNYkqsgrIVZymxwOWoI="
     }
   }
 }
@@ -12,6 +12,7 @@
   "dependencies": {
     "ajv": "^6.5.5",
     "axios": "^0.18.0",
+    "echarts": "^4.2.0-rc.2",
     "vue": "^2.5.2"
   },
   "devDependencies": {
+<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: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      sidebarElm: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+    }
+  },
+  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({xData, yData} = {}) {
+      this.chart.setOption({
+        xAxis: {
+          data: xData,
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          data: ['expected', 'actual']
+        },
+        series: [{
+          data: yData,
+          type: 'bar'
+        }]
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      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
+  }
+}
@@ -3,23 +3,34 @@
     <titlesection></titlesection>
     <totalsection :totalNum="totalVal"></totalsection>
     <div class="flexfm"></div>
+    <bar-chart :chart-data="lineChartData"/>
   </div>
 </template>
 <script>
 import titlesection from '../components/titlesection'
 import totalsection from '../components/total'
+import barChart from '../components/barChart'
 import {fetchList} from '../api/api'
+const lineChartData = {
+  newVisitis: {
+    yData: [100, 120, 161],
+    xData: ['正常', '异常', '故障']
+  }
+}
+
 export default {
   name: 'pdasection',
   components: {
     titlesection,
-    totalsection
+    totalsection,
+    barChart
   },
   data() {
     return {
-      totalVal: '1000',
+      totalVal: '213734',
+      lineChartData: lineChartData.newVisitis
     }
   },
   created() {