n20-common-lib 1.3.46 → 1.3.49

package/nstc-g6/components/NstcCharts/NstcCharts.vue

@@ -1,162 +1,162 @@
-<template>
-  <div class="charts-custom" />
-</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: 'NstcCharts',
-
-  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') {
-          config = {
-            itemStyle: {
-              barBorderRadius: 'stack' in sery ? 0 : [100, 100, 0, 0]
-            }
-          }
-        } else if (type === 'line') {
-          config = {
-            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 class="charts-custom" />
+</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: 'NstcCharts',
+
+  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') {
+          config = {
+            itemStyle: {
+              barBorderRadius: 'stack' in sery ? 0 : [100, 100, 0, 0]
+            }
+          }
+        } else if (type === 'line') {
+          config = {
+            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/nstc-g6/components/NstcCharts/define.js

@@ -1,74 +1,74 @@
-
-const color = ['#99C0E5', '#A6ACE3', '#EFC27A', '#99DCD2', '#C1C1C1', '#FFB59E', '#EF8787']
-
-const axisConfig = {
-  nameTextStyle: {
-    color: '#3d4a57',
-    fontSize: 12
-  },
-  axisLabel: {
-    color: '#3d4a57',
-    fontSize: 12
-  },
-  axisLine: {
-    lineStyle: {
-      color: '#AEAEAE'
-    }
-  },
-  axisTick: {
-    show: false
-  },
-  splitLine: {
-    lineStyle: {
-      color: '#D0D0D0'
-    }
-  }
-}
-
-const pieConfig = {
-  radius: ['38%', '54%'],
-  center: ['50%', '50%'],
-  label: {
-    show: false,
-    position: 'center',
-    color: '#3d4a57',
-    fontSize: 18,
-    formatter: '{b}\n\n{d}%'
-    // formatter: function({ name, percent }) {
-    //   let nameStr = name
-    //   let wrapLength =
-    //     sery.label &&
-    //     sery.label.wrap &&
-    //     sery.label.wrap.length
-    //   let result = ''
-    //
-    //   // 如果有换行配置，并且名字的长度大于换行限制的长度，对名字进行换行
-    //   if (wrapLength && name && name.length > wrapLength) {
-    //     nameStr =
-    //       name.slice(0, wrapLength) +
-    //       '\n' +
-    //       name.slice(wrapLength)
-    //   }
-    //
-    //   // 如果要隐藏名称，则只显示percent
-    //   if (sery.label && sery.label.hideName) {
-    //     result = percent
-    //   } else {
-    //     result = `${nameStr}\n(${percent}%)`
-    //   }
-    //
-    //   return result
-    // }
-  },
-  emphasis: {
-    label: {
-      show: true
-    }
-  }
-}
-
-export {
-  color,
-  axisConfig,
-  pieConfig
-}
+
+const color = ['#99C0E5', '#A6ACE3', '#EFC27A', '#99DCD2', '#C1C1C1', '#FFB59E', '#EF8787']
+
+const axisConfig = {
+  nameTextStyle: {
+    color: '#3d4a57',
+    fontSize: 12
+  },
+  axisLabel: {
+    color: '#3d4a57',
+    fontSize: 12
+  },
+  axisLine: {
+    lineStyle: {
+      color: '#AEAEAE'
+    }
+  },
+  axisTick: {
+    show: false
+  },
+  splitLine: {
+    lineStyle: {
+      color: '#D0D0D0'
+    }
+  }
+}
+
+const pieConfig = {
+  radius: ['38%', '54%'],
+  center: ['50%', '50%'],
+  label: {
+    show: false,
+    position: 'center',
+    color: '#3d4a57',
+    fontSize: 18,
+    formatter: '{b}\n\n{d}%'
+    // formatter: function({ name, percent }) {
+    //   let nameStr = name
+    //   let wrapLength =
+    //     sery.label &&
+    //     sery.label.wrap &&
+    //     sery.label.wrap.length
+    //   let result = ''
+    //
+    //   // 如果有换行配置，并且名字的长度大于换行限制的长度，对名字进行换行
+    //   if (wrapLength && name && name.length > wrapLength) {
+    //     nameStr =
+    //       name.slice(0, wrapLength) +
+    //       '\n' +
+    //       name.slice(wrapLength)
+    //   }
+    //
+    //   // 如果要隐藏名称，则只显示percent
+    //   if (sery.label && sery.label.hideName) {
+    //     result = percent
+    //   } else {
+    //     result = `${nameStr}\n(${percent}%)`
+    //   }
+    //
+    //   return result
+    // }
+  },
+  emphasis: {
+    label: {
+      show: true
+    }
+  }
+}
+
+export {
+  color,
+  axisConfig,
+  pieConfig
+}

package/nstc-g6/components/NstcCharts/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 '../../../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()
+    }
+  }
+}