lambo-design-bi 0.0.185 → 0.0.187

package/bi/widget/num/index.vue

@@ -1,7 +1,7 @@
 <template>
   <LamboNumberInfoBi :title="title" :sub-title="subTitle" :num="num" :sub-num1="subNum1" :trend1="trend1"
     :widget="widget" :is-drill="isDrill" @on-drill="onDrill" :sub-num2="subNum2" :trend2="trend2" :polar1="polar1"
-    :polar2="polar2" :eva-level="evaLevel" :tab-clickable="tabClickable" @on-tab-click="onTabClick">
+    :polar2="polar2" :eva-level="evaLevel" :tab-clickable="tabClickable" :default-tab-active="defaultTabActive" @on-tab-click="onTabClick">
   </LamboNumberInfoBi>
 </template>
 <script>
@@ -62,6 +62,7 @@ export default {
         this.tabClickable = true
       }
       if (this.widget.options["defaultTabActive"] === '1') {
+        console.log("num-info initConfig 卡片初始设置为激活状态触发点击，START 当前实例:", this.widget.id + "_" + this.widget.name + ",defaultTabActive:" + this.widget.options["defaultTabActive"])
         this.defaultTabActive = true
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lambo-design-bi",
-  "version": "0.0.185",
+  "version": "0.0.187",
   "description": "Vue2 BI 数据可视化组件库",
   "main": "index.js",
   "author": "finch",

package/pub/charts/factory/options.js

@@ -363,7 +363,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
         },
         color: dynamicColors,
         grid: {
-          top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
+          top: '40px', left: '0px', right: '50px', bottom: '0px', containLabel: true
         },
         calculable: true,
         xAxis: {
@@ -462,13 +462,44 @@ export function getECharts(type, dataX, dataY, dataDim) {
             },
             data: dataY[0],
             markPoint: {
+              symbol: 'pin',
+              symbolSize: 50,
+              itemStyle: {
+                color: colors[0],
+                borderWidth: 2,
+                shadowColor: 'rgba(0, 0, 0, 0.3)',
+                shadowBlur: 4
+              },
               data: [
-                { type: 'max', name: 'Max' },
-                { type: 'min', name: 'Min' }
+                {type: 'max', name: '最大值'},
+                {type: 'min', name: '最小值',}
               ]
             },
             markLine: {
-              data: [{ type: 'average', name: 'Avg' }]
+              symbol: ['circle', 'arrow'],
+              symbolSize: [8, 16],
+              lineStyle: {
+                type: 'dashed',
+                width: 3,
+                color: colors[0]
+              },
+              label: {
+                show: true,
+                position: 'end',
+                color: '#fff',
+                backgroundColor: colors[0],
+                padding: [4, 6],
+                borderRadius: 4,
+                fontSize: 12,
+                fontWeight: 'bold',
+                formatter: '{c}'
+              },
+              data: [
+                {
+                  type: 'average',
+                  name: 'Avg',
+                }
+              ]
             }
           },
         ]
@@ -2325,51 +2356,53 @@ export function getECharts(type, dataX, dataY, dataDim) {
   }
   else if (type ==='2A'){
     let series = [];
-    if (dataY.length > 0) {
-      series.push({
-        name: dataDim[0],
-        type: 'bar',
-        barWidth: '30px',
-        itemStyle: {
-          normal: {
-            color: function (params) {
-              const baseColor = colors[0];
-              const lightColor = hexToRgba(baseColor, 0.6);
-              const colorArr = params.value > 0 ? [baseColor, lightColor] : [lightColor, baseColor];
-              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: colorArr[0] },
-                { offset: 1, color: colorArr[1] }
-              ]);
-            },
-            barBorderRadius: [1]
-          }
-        },
-        tooltip: { valueFormatter: value => value },
-        data: dataY.map(item => item[0])
-      });
-    }
-    for (let i = 1; i < 2; i++) {
-      series.push({
-        name: dataDim[i],
-        type: 'line',
-        smooth: true,
-        showAllSymbol: true,
-        symbol: 'circle',
-        showSymbol: true,
-        symbolSize: 5,
-        lineStyle: {
-          color: colors[i % colors.length],
-          width: 3
-        },
-        label: { show: false },
-        itemStyle: {
-          color: colors[i % colors.length],
-          borderColor: hexToRgba(colors[i % colors.length], 0.6),
-          borderWidth: 3
-        },
-        tooltip: { valueFormatter: value => value },
-        data: dataY.map(item => item[1])
-      });
+    const transData = transpose(dataY)
+    for (let i = 0; i < transData.length; i++) {
+      if (i===0){
+        series.push({
+          name: dataDim[i],
+          type: 'bar',
+          barWidth: '30px',
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                const baseColor = colors[0];
+                const lightColor = hexToRgba(baseColor, 0.6);
+                const colorArr = params.value > 0 ? [baseColor, lightColor] : [lightColor, baseColor];
+                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: colorArr[0] },
+                  { offset: 1, color: colorArr[1] }
+                ]);
+              },
+              barBorderRadius: [i]
+            }
+          },
+          tooltip: { valueFormatter: value => value },
+          data: transData[i]
+        });
+      }else {
+        series.push({
+          name: dataDim[i],
+          type: 'line',
+          smooth: true,
+          showAllSymbol: true,
+          symbol: 'circle',
+          showSymbol: true,
+          symbolSize: 5,
+          lineStyle: {
+            color: colors[i % colors.length],
+            width: 3
+          },
+          label: { show: false },
+          itemStyle: {
+            color: colors[i % colors.length],
+            borderColor: hexToRgba(colors[i % colors.length], 0.6),
+            borderWidth: 3
+          },
+          tooltip: { valueFormatter: value => value },
+          data: transData[i]
+        });
+      }
     }
     const dynamicColors = dataDim.map((_, index) => colors[index % colors.length]);
     opt = {
@@ -2395,7 +2428,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
       },
       color: dynamicColors,
       grid: {
-        top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
+        top: '35px', left: '0px', right: '10px', bottom: '0px', containLabel: true
       },
       xAxis: [
         {
@@ -2435,71 +2468,49 @@ export function getECharts(type, dataX, dataY, dataDim) {
   }
   else if (type ==='2B'){
     let series = [];
-    if (dataY.length > 0) {
-      series.push({
-        name: dataDim[0],
-        type: 'pictorialBar',
-        barWidth: '30px',
-        symbol: 'rect',
-        symbolSize: ['100%', 4],
-        symbolRepeat: true,
-        symbolMargin: 0.3,
-        symbolBoundingData: Math.max(...dataY.map(item => item[0])),
-        itemStyle: {
-          color: colors[0]
-        },
-        tooltip: { valueFormatter: value => value },
-        data: dataY.map(item => item[0])
-      });
-    }
-    if (dataY.length > 1) {
-      series.push({
-        name: dataDim[1],
-        type: 'line',
-        yAxisIndex: 1,
-        smooth: true,
-        showAllSymbol: true,
-        symbol: 'circle',
-        showSymbol: true,
-        symbolSize: 5,
-        lineStyle: {
-          color: colors[1],
-          width: 3
-        },
-        label: { show: false },
-        itemStyle: {
-          color: colors[1],
-          borderColor: hexToRgba(colors[1], 0.6),
-          borderWidth: 3
-        },
-        tooltip: { valueFormatter: value => value },
-        data: dataY.map(item => item[1])
-      });
-    }
+    const transData = transpose(dataY);
+    for (let i = 0; i < transData.length; i++) {
+      if (i === 0) {
+        series.push({
+          name: dataDim[i],
+          type: 'pictorialBar',
+          barWidth: '30px',
+          symbol: 'rect',
+          symbolSize: ['100%', 4],
+          symbolRepeat: true,
+          symbolMargin: 2,
+          symbolBoundingData: Math.max(...transData[i]),
+          itemStyle: {
+            color: colors[i]
+          },
+          tooltip: {valueFormatter: value => value},
+          data: transData[i]
+        });
+      } else {
+        series.push({
+          name: dataDim[i],
+          type: 'line',
+          yAxisIndex: 1,
+          smooth: true,
+          showAllSymbol: true,
+          symbol: 'circle',
+          showSymbol: true,
+          symbolSize: 5,
+          lineStyle: {
+            color: colors[i % colors.length],
+            width: 3
+          },
+          label: {show: false},
+          itemStyle: {
+            color: colors[i % colors.length],
+            borderColor: hexToRgba(colors[i % colors.length], 0.6),
+            borderWidth: 3
+          },
+          tooltip: {valueFormatter: value => value},
+          data: transData[i]
+        });
 
-    for (let i = 2; i < 3; i++) {
-      series.push({
-        name: dataDim[i],
-        type: 'line',
-        yAxisIndex: 0,
-        smooth: true,
-        showAllSymbol: true,
-        symbol: 'circle',
-        showSymbol: true,
-        symbolSize: 5,
-        lineStyle: {
-          color: colors[i % colors.length],
-          width: 3
-        },
-        label: { show: false },
-        itemStyle: {
-          color: colors[i % colors.length],
-          borderColor: hexToRgba(colors[i % colors.length], 0.6),
-          borderWidth: 3
-        },
-        tooltip: { valueFormatter: value => value },
-        data: dataY.map(item => item[2])
-      });
+      }
     }
     const dynamicColors = dataDim.map((_, index) => colors[index % colors.length]);
 
@@ -2526,7 +2537,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
       },
       color: dynamicColors,
       grid: {
-        top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
+        top: '35px', left: '0px', right: '10px', bottom: '0px', containLabel: true
       },
       xAxis: [
         {

package/pub/number-info/number-info.vue

@@ -181,17 +181,20 @@ export default {
       }
     },
     initDefTabClickActiveStatus() {
-      if(this.tabClickable === true && this.defaultTabActive === true ){
+      console.log("num-info handleCardClick 卡片初始设置为激活状态触发点击，START 当前实例:", this.widget.id + "_" + this.widget.name + ",this.defaultTabActive:" + this.defaultTabActive)
+      if (this.tabClickable === true && this.defaultTabActive === true) {
         if (!this.isActive) {
           this.isActive = true
           this.$emit('on-tab-click', {})
         }
-        console.log("num-info handleCardClick 卡片初始设置为激活状态触发点击，当前实例:", this.widget.id + "_" + this.widget.name)
+        console.log("num-info handleCardClick 卡片初始设置为激活状态触发点击，END 当前实例:", this.widget.id + "_" + this.widget.name)
       }
     }
   },
   created() {
     this.eventBusOn()
+  },
+  mounted() {
     this.initDefTabClickActiveStatus()
   },
   beforeDestroy() {