n20-common-lib 1.3.5 → 1.3.8

package/src/components/ECharts/index.vue

@@ -1,163 +1,169 @@
-<template>
-  <div />
-</template>
-
-<script>
-import * as echarts from 'echarts';
-import resize from './mixins/resize'
-import merge from 'lodash/merge'
-
-import { color, axisConfig, pieConfig } from './define'
-
-export default {
-  name: 'Echarts',
-
-  mixins: [resize],
-
-  props: {
-    isPie: {
-      type: Boolean,
-      default: false
-    },
-
-    option: {
-      type: Object,
-      require: true,
-      default: () => ({})
-    },
-
-    composedChartOption: { // 是否不跟之前设置的 option 进行合并，默认为 true，即不合并。如果合并，减少数据时，视图上还是保持着最多数据的展示效果
-      type: Boolean,
-      default: true
-    }
-  },
-
-  data() {
-    return {
-      chart: null
-    }
-  },
-
-  watch: {
-    option: {
-      deep: true,
-      handler() {
-        this.setOption()
-      }
-    }
-  },
-
-  mounted() {
-    this.initChart()
-  },
-
-  beforeDestroy() {
-    this.clear()
-  },
-
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el)
-      this.setOption()
-    },
-
-    setOption() {
-      this.chart.setOption(this.calcOption(this.option), this.composedChartOption)
-    },
-
-    grid({ grid = {}}) {
-      const selfGrid = {
-        containLabel: true
-      }
-
-      grid = Array.isArray(grid)
-          ? grid.map(item => merge({}, selfGrid, item))
-          : merge({}, selfGrid, grid)
-
-      return {
-        grid
-      }
-    },
-
-    xAxis({ xAxis }) {
-      xAxis = xAxis && xAxis.length
-          ? xAxis.map(item => merge({}, axisConfig, item))
-          : [merge({}, axisConfig, xAxis)]
-
-      return { xAxis }
-    },
-
-    yAxis({ yAxis }) {
-      yAxis =
-          yAxis && yAxis.length
-              ? yAxis.map(item => merge({}, axisConfig, item))
-              : [merge({}, axisConfig, yAxis)]
-
-      return { yAxis }
-    },
-
-    series({ series = [] }) {
-      series = series.map(sery => {
-        const type = sery.type
-        let config = {}
-      if (type === 'bar') {
-
-      }else if (type === 'line') {
-          config = {
-            symbolSize: 6,
-            lineStyle: {
-              normal: {
-                width: '4'// 折线粗细
-              }
-            },
-            smooth: true
-          }
-        } else if (type === 'pie') {
-          config = pieConfig
-        }
-
-        return merge(config, sery)
-      })
-
-      return { series }
-    },
-
-    calcOption(params) {
-      const base = ['grid', 'series']
-      const keys = this.isPie
-          ? base
-          : base.concat(['xAxis', 'yAxis'])
-      const defaultConfigs = {
-        color,
-        barMaxWidth: 32,
-        barGap: 0
-      }
-
-      if (params.baseOption) {
-        const { baseOption, options, ...other } = params
-
-        const _baseOption = keys.reduce((prev, key) => {
-          return { ...prev, ...this[key](baseOption) }
-        }, defaultConfigs)
-
-        return { options, baseOption: merge({}, _baseOption, baseOption), ...other }
-      }
-
-      const option = keys.reduce((prev, key) => {
-        return { ...prev, ...this[key](params) }
-      }, defaultConfigs)
-
-      return merge({}, option, params)
-    },
-
-    clear() {
-      if (this.chart) {
-        this.chart.clear()
-        this.chart.dispose()
-        this.chart = null
-      }
-    }
-  }
-}
-</script>
-
+<template>
+  <div></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from './mixins/resize'
+import merge from 'lodash/merge'
+
+import { color, axisConfig, pieConfig } from './define'
+
+export default {
+  name: 'Echarts',
+
+  mixins: [resize],
+
+  props: {
+    isPie: {
+      type: Boolean,
+      default: false
+    },
+
+    option: {
+      type: Object,
+      require: true,
+      default: () => ({})
+    },
+
+    composedChartOption: {
+      // 是否不跟之前设置的 option 进行合并，默认为 true，即不合并。如果合并，减少数据时，视图上还是保持着最多数据的展示效果
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      chart: null
+    }
+  },
+
+  watch: {
+    option: {
+      deep: true,
+      handler() {
+        this.setOption()
+      }
+    }
+  },
+
+  mounted() {
+    this.initChart()
+  },
+
+  beforeDestroy() {
+    this.clear()
+  },
+
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el)
+      this.setOption()
+    },
+
+    setOption() {
+      this.chart.setOption(
+        this.calcOption(this.option),
+        this.composedChartOption
+      )
+    },
+
+    grid({ grid = {} }) {
+      const selfGrid = {
+        containLabel: true
+      }
+
+      grid = Array.isArray(grid)
+        ? grid.map((item) => merge({}, selfGrid, item))
+        : merge({}, selfGrid, grid)
+
+      return {
+        grid
+      }
+    },
+
+    xAxis({ xAxis }) {
+      xAxis =
+        xAxis && xAxis.length
+          ? xAxis.map((item) => merge({}, axisConfig, item))
+          : [merge({}, axisConfig, xAxis)]
+
+      return { xAxis }
+    },
+
+    yAxis({ yAxis }) {
+      yAxis =
+        yAxis && yAxis.length
+          ? yAxis.map((item) => merge({}, axisConfig, item))
+          : [merge({}, axisConfig, yAxis)]
+
+      return { yAxis }
+    },
+
+    series({ series = [] }) {
+      series = series.map((sery) => {
+        const type = sery.type
+        let config = {}
+        if (type === 'bar') {
+        } else if (type === 'line') {
+          config = {
+            symbolSize: 6,
+            lineStyle: {
+              normal: {
+                width: '4' // 折线粗细
+              }
+            },
+            smooth: true
+          }
+        } else if (type === 'pie') {
+          config = pieConfig
+        }
+
+        return merge(config, sery)
+      })
+
+      return { series }
+    },
+
+    calcOption(params) {
+      const base = ['grid', 'series']
+      const keys = this.isPie ? base : base.concat(['xAxis', 'yAxis'])
+      const defaultConfigs = {
+        color,
+        barMaxWidth: 32,
+        barGap: 0
+      }
+
+      if (params.baseOption) {
+        const { baseOption, options, ...other } = params
+
+        const _baseOption = keys.reduce((prev, key) => {
+          return { ...prev, ...this[key](baseOption) }
+        }, defaultConfigs)
+
+        return {
+          options,
+          baseOption: merge({}, _baseOption, baseOption),
+          ...other
+        }
+      }
+
+      const option = keys.reduce((prev, key) => {
+        return { ...prev, ...this[key](params) }
+      }, defaultConfigs)
+
+      return merge({}, option, params)
+    },
+
+    clear() {
+      if (this.chart) {
+        this.chart.clear()
+        this.chart.dispose()
+        this.chart = null
+      }
+    }
+  }
+}
+</script>
+

package/src/components/ECharts/mixins/resize.js

@@ -1,56 +1,56 @@
-import { debounce } from '../../../utils/debounce'
-
-export default {
-  data() {
-    return {
-      $_sidebarElm: null,
-      $_resizeHandler: null
-    }
-  },
-  mounted() {
-    this.initListener()
-  },
-  activated() {
-    if (!this.$_resizeHandler) {
-      // avoid duplication init
-      this.initListener()
-    }
-
-    // when keep-alive chart activated, auto resize
-    this.resize()
-  },
-  beforeDestroy() {
-    this.destroyListener()
-  },
-  deactivated() {
-    this.destroyListener()
-  },
-  methods: {
-    // use $_ for mixins properties
-    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
-    $_sidebarResizeHandler(e) {
-      if (e.propertyName === 'width') {
-        this.$_resizeHandler()
-      }
-    },
-    initListener() {
-      this.$_resizeHandler = debounce(() => {
-        this.resize()
-      }, 100)
-      window.addEventListener('resize', this.$_resizeHandler)
-
-      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
-    },
-    destroyListener() {
-      window.removeEventListener('resize', this.$_resizeHandler)
-      this.$_resizeHandler = null
-
-      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
-    },
-    resize() {
-      const { chart } = this
-      chart && chart.resize()
-    }
-  }
-}
+import { debounce } from '../../../../nstc-g6/utils/debounce'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.initListener()
+  },
+  activated() {
+    if (!this.$_resizeHandler) {
+      // avoid duplication init
+      this.initListener()
+    }
+
+    // when keep-alive chart activated, auto resize
+    this.resize()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  },
+  deactivated() {
+    this.destroyListener()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    initListener() {
+      this.$_resizeHandler = debounce(() => {
+        this.resize()
+      }, 100)
+      window.addEventListener('resize', this.$_resizeHandler)
+
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    destroyListener() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+      this.$_resizeHandler = null
+
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    resize() {
+      const { chart } = this
+      chart && chart.resize()
+    }
+  }
+}