manage-client 3.3.105 → 3.3.107

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "manage-client",
-  "version": "3.3.105",
+  "version": "3.3.107",
   "description": "经营管控模块前台组件",
   "main": "src/index.js",
   "directories": {

package/src/components/BasisEcharts/ChartTypeBase.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="EchartsWarp">
+    <div v-if="data" :id="`canvas`+key"></div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ChartTypeBase',
+  props: {
+    // key 默认随机数s
+    key: {
+      type: String,
+      default: ()=>{
+        return  Math.random().toString(36).substr(2)
+      }
+    },
+    type: {
+      type: String,
+      default: 'bar'
+    },
+    /**
+     // 示例数据 普通柱状图/普通折线图 {key,value} or {key,{value:value,其他数据}
+     // {
+     //   Mon: 100,
+     //   Tue: {
+     //   itemStyle: {
+     //     color: '#5470c6'
+     //   },
+     //   value :200
+     // }
+     // }
+     // 柱状堆叠 / 折线堆叠
+     // product 代表每组的名称 / product 代表每条线的名称
+     // [{ product: 'Matcha Latte', key1: 43.3, key2: 85.8, key3: 93.7 }]
+     **/
+    data: {
+      type: [Object, Array],
+      default: () => {
+        return undefined
+      }
+    },
+    color: {
+      type: Array,
+      default: () => {
+        return undefined
+      }
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    subtext: {
+      type: String,
+      default: ''
+    },
+    left: {
+      type: String,
+      default: 'left'
+    },
+    // 折线图是否平滑
+    smooth: {
+      type: Boolean,
+      default: true
+    },
+    // 圆饼图尺寸
+    radius: {
+      type: [String, Array],
+      default: () => {
+        return ['50%', '0%']
+      }
+    },
+    // 圆饼图是否改为玫瑰图
+    rosetype: {
+      type: String,
+      default: ''
+    },
+    // 自定义传参
+    mixinsdata: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 自定义传参
+    mixinslegend: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 自定义传参
+    mixinsitemstyle: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+  },
+  data() {
+    return {
+      myChart: undefined
+    }
+  },
+  watch: {
+    data: {
+      handler: function (val, oldVal) {
+        this.myEcharts();
+      },
+      deep: true
+    }
+  },
+  methods: {
+    myEcharts() {
+      if (this.data) {
+        if (!this.myChart) {
+          this.myChart = this.$echarts.init(document.getElementById('canvas'+ this.key));
+        }
+        this.myChart.setOption(this.getOption());
+      }
+    },
+    getOption() {
+      let _option = {
+        title: {
+          text: this.title,
+          subtext: this.subtext,
+          left: this.left
+        },
+        xAxis: {type: 'category'},
+        yAxis: {
+          type: 'value'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+      }
+      if (this.color) {
+        Object.assign(_option, {
+          color: this.color
+        })
+      }
+      // 如果data是数组类型
+      if (this.type === 'bar' && Array.isArray(this.data)) {
+        Object.assign(_option, this.getOptionBarStack())
+      } else if (this.type === 'line' && Array.isArray(this.data)) {
+        Object.assign(_option, this.getOptionLineStack())
+      } else if (this.type === 'pie') {
+        Object.assign(_option, this.getOptionPie())
+      } else {
+        Object.assign(_option, this.getOptionBase())
+      }
+      console.log(_option)
+      return Object.assign(_option, this.mixinsdata)
+    },
+    // 圆饼图
+    getOptionPie() {
+      return {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: Object.assign({
+          bottom: '10%',
+          left: 'center'
+        }, this.mixinslegend),
+        series: {
+          type: 'pie',
+          radius: this.radius[1] === '0%' ? this.radius[0] : this.radius,
+          roseType: this.rosetype,
+          emphasis: {
+            itemStyle: Object.assign({
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)',
+              borderRadius: 10,
+              // borderColor: '#fff',
+              // borderWidth: 2
+            }, this.mixinsitemstyle)
+          },
+          data: Object.keys(this.data).map(h => {
+            return {
+              name: h,
+              value: this.data[h]
+            }
+          })
+        }
+      }
+    },
+    // 柱状图
+    getOptionBase() {
+      return {
+        xAxis: {
+          type: 'category',
+          data: Object.keys(this.data),
+          axisTick: {
+            alignWithLabel: true
+          }
+        },
+        series: [
+          {
+            data: Object.values(this.data),
+            type: this.type,
+            smooth: this.smooth
+          }
+        ]
+      }
+    },
+    // 堆叠柱状图
+    getOptionBarStack() {
+      return {
+        dataset: {
+          source: [
+            Object.keys(this.data[0]),
+            ...this.data.map(
+              h => {
+                return Object.values(h)
+              }
+            )
+          ]
+        },
+        yAxis: {},
+        series: [...Object.keys(this.data[0]).map(
+          h => {
+            return {type: this.type}
+          }
+        )].splice(1)
+      }
+    },
+    // 折线图
+    getOptionLine() {
+      return {}
+    },
+    // 堆叠折线图 [{ product: 'Matcha Latte', key1: 43.3, key2: 85.8, key3: 93.7 }]
+    getOptionLineStack() {
+      return {
+        legend: {
+          data: this.data.map(h => h.product)
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: Object.keys(this.data[0]).splice(1)
+        },
+        series: [...this.data.map(
+          h => {
+            return {
+              name: h.product,
+              type: 'line',
+              stack: 'Total',
+              data: Object.values(h).splice(1)
+            }
+          }
+        )]
+      }
+    }
+  },
+  ready() {
+    this.myEcharts();
+  }
+}
+</script>
+
+<style>
+.EchartsWarp div:first-child div:last-child {
+  height: auto;
+}
+</style>

package/src/components/BasisEcharts/businessQuery/chargeQueryEcharts.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import ChartTypeBase from 'vue-client/src/components/echarts/ChartTypeBase.vue'
+import ChartTypeBase from '../ChartTypeBase.vue'
 import {HttpResetClass} from "vue-client";
 
 export default {

package/src/components/BasisEcharts/businessQuery/userOpenEcharts.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import ChartTypeBase from 'vue-client/src/components/echarts/ChartTypeBase.vue'
+import ChartTypeBase from '../ChartTypeBase.vue'
 import {HttpResetClass} from "vue-client";
 
 export default {