lw-cdp-ui 1.3.31 → 1.3.33

package/dist/components/lwBiChart/charts/AreaChart.vue

@@ -246,6 +246,8 @@ export default {
 
 <style scoped>
 .chart {
+  background-color: var(--el-bg-color-overlay);
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.0509803922);
   width: 100%;
   height: 100%;
 }

package/dist/components/lwBiChart/charts/BarChart.vue

@@ -49,8 +49,7 @@ export default {
       if (this.chart) {
         this.chart.dispose()
       }
-
-      this.chart = markRaw(markRaw(this.echarts.init(this.$refs.chartRef)))
+      this.chart = markRaw(this.echarts.init(this.$refs.chartRef))
       this.updateChart()
 
       window.addEventListener('resize', () => {
@@ -62,19 +61,20 @@ export default {
     updateChart() {
       if (!this.chart || !this.rawData) return
 
-      const {setting, dataSet} = this.rawData
-      const {tables} = dataSet
-      if (!tables || tables.length === 0) return
+      const {setting = {}, dataSet} = this.rawData
+      const {tables = []} = dataSet || {}
 
       this.option = {
         title: this.getTitleOption(setting),
         legend: this.getLegendOption(setting, tables),
-        grid: setting.grid || {containLabel: true},
-        tooltip: setting.tooltip || {},
-        color: setting.color,
+        grid: this.getGridOption(setting),
+        tooltip: this.getTooltipOption(setting),
+        toolbox: this.getToolboxOption(setting),
+        color: setting.useThemeColor ? undefined : setting.color || this.getDefaultColors(),
         xAxis: this.getXAxisOption(setting, tables),
-        yAxis: this.getYAxisOption(setting),
-        series: this.getSeries(setting, tables)
+        yAxis: this.getYAxisOption(setting, tables),
+        series: this.getSeries(setting, tables),
+        dataZoom: this.getDataZoomOption(setting)
       }
       this.chart.setOption(this.option)
       setTimeout(() => {
@@ -82,65 +82,195 @@ export default {
       }, 10)
     },
 
+    // 配置项方法（保持与AreaChart一致的逻辑结构）
     getTitleOption(setting) {
       return {
-        show: setting.title?.show || false,
+        show: setting.title?.show !== false,
         text: setting.title?.text || '',
-        textStyle: setting.title?.textStyle || {},
+        textStyle: {
+          fontSize: 16,
+          fontWeight: 'bold',
+          color: '#333',
+          ...setting.title?.textStyle
+        },
         left: setting.title?.left || 'center',
+        top: setting.title?.top || 'top',
         padding: setting.title?.padding || [5, 5, 5, 5]
       }
     },
 
     getLegendOption(setting, tables) {
       return {
-        ...(setting.legend || {}),
-        data: tables.map(table => table.metricName)
+        show: setting.legend?.show !== false,
+        data: tables.map(table => table.metricName),
+        type: setting.legend?.type || 'scroll',
+        orient: setting.legend?.orient || 'horizontal',
+        left: setting.legend?.left || 'center',
+        top: setting.legend?.top || 'bottom',
+        itemGap: setting.legend?.itemGap || 10,
+        itemWidth: setting.legend?.itemWidth || 25,
+        itemHeight: setting.legend?.itemHeight || 14,
+        textStyle: {
+          fontSize: 12,
+          ...setting.legend?.textStyle
+        }
       }
     },
 
-    getXAxisOption(setting, tables) {
-      return setting.revertAxis
-        ? {type: 'value'}
-        : {
-            type: 'category',
-            data: tables[0].headers
+    getGridOption(setting) {
+      return {
+        left: setting.grid?.left || '3%',
+        right: setting.grid?.right || '4%',
+        top: setting.grid?.top || '15%',
+        bottom: setting.grid?.bottom || (setting.legend?.show !== false ? '15%' : '3%'),
+        containLabel: setting.grid?.containLabel !== false
+      }
+    },
+
+    getTooltipOption(setting) {
+      return {
+        trigger: 'axis',
+        axisPointer: {
+          type: setting.tooltip?.axisPointer?.type || 'shadow',
+          label: {
+            backgroundColor: setting.tooltip?.axisPointer?.label?.backgroundColor || '#6a7985'
           }
+        },
+        formatter: params => {
+          if (setting.tooltip?.formatter) return setting.tooltip.formatter(params)
+          return params.map(item => `${item.marker} ${item.seriesName}: ${item.value}`).join('<br/>')
+        }
+      }
     },
 
-    getYAxisOption(setting) {
-      return setting.revertAxis
-        ? {
-            type: 'category',
-            data: this.rawData.dataSet.tables[0].headers
+    getToolboxOption(setting) {
+      if (setting.toolbox?.show === false) return {show: false}
+
+      return {
+        right: 10,
+        top: 0,
+        feature: {
+          saveAsImage: {
+            show: setting.toolbox?.features?.saveAsImage?.show !== false,
+            title: '保存为图片',
+            pixelRatio: 2
+          },
+          dataView: {
+            show: setting.toolbox?.features?.dataView?.show !== false,
+            readOnly: true,
+            title: '数据视图'
+          },
+          magicType: {
+            show: setting.toolbox?.features?.magicType?.show !== false,
+            title: {line: '折线图', bar: '柱状图'},
+            type: ['line', 'bar']
+          },
+          restore: {
+            show: setting.toolbox?.features?.restore?.show !== false,
+            title: '还原'
           }
-        : {type: 'value'}
+        }
+      }
     },
 
-    getSeries(setting, tables) {
-      return tables
-        .filter(item => {
-          const key = `${item.name}.${item.metricId}`
-          console.log(key, setting.displayMetrics)
-          return setting.displayMetrics.includes(key)
-        })
-        .map(table => ({
-          name: table.metricName,
-          type: 'bar',
-          data: setting.revertAxis
-            ? table.rows[0].values.map((value, index) => ({
-                value,
-                name: table.headers[index]
-              }))
-            : table.rows[0].values,
-          barMaxWidth: setting.barMaxWidth,
-          barMinWidth: setting.barMinWidth,
-          label: {
-            show: setting.label?.show || false,
-            position: setting.label?.position || 'outside',
-            formatter: setting.label?.formatter || '{@value}'
+    getXAxisOption(setting, tables) {
+      const isCategory = !setting.revertAxis
+      return {
+        type: isCategory ? 'category' : 'value',
+        data: isCategory ? tables[0]?.headers : undefined,
+        axisLabel: {
+          show: setting.xAxis?.axisLabel?.show !== false,
+          rotate: setting.xAxis?.axisLabel?.rotate || 0,
+          interval: setting.xAxis?.axisLabel?.interval || 0,
+          formatter: setting.xAxis?.axisLabel?.formatter
+        },
+        axisTick: {
+          show: setting.xAxis?.axisTick?.show !== false,
+          alignWithLabel: true
+        },
+        axisLine: {
+          show: setting.xAxis?.axisLine?.show !== false
+        },
+        splitLine: {
+          show: setting.xAxis?.splitLine?.show || false
+        }
+      }
+    },
+
+    getYAxisOption(setting, tables) {
+      const isValue = !setting.revertAxis
+      return {
+        type: isValue ? 'value' : 'category',
+        data: isValue ? undefined : tables[0]?.headers,
+        axisLabel: {
+          show: setting.yAxis?.axisLabel?.show !== false,
+          formatter: isValue
+            ? setting.yAxis?.axisLabel?.formatter || (val => (val >= 10000 ? `${(val / 10000).toFixed(1)}万` : val))
+            : undefined
+        },
+        axisTick: {
+          show: setting.yAxis?.axisTick?.show !== false
+        },
+        axisLine: {
+          show: setting.yAxis?.axisLine?.show !== false
+        },
+        splitLine: {
+          show: setting.yAxis?.splitLine?.show !== false,
+          lineStyle: {
+            type: 'dashed'
           }
-        }))
+        }
+      }
+    },
+
+    getSeries(setting, tables) {
+      const visibleTables = setting.displayMetrics
+        ? tables.filter(table => setting.displayMetrics.includes(`${table.name}.${table.metricId}`))
+        : tables
+
+      return visibleTables.map(table => ({
+        name: table.metricName,
+        type: 'bar',
+        // barWidth: setting.barWidth || '60%',
+        barGap: setting.barGap || '30%',
+        barCategoryGap: setting.barCategoryGap || '30%',
+        data: table.rows[0].values.map((value, idx) => ({
+          value,
+          name: table.headers[idx]
+        })),
+        label: {
+          show: setting.label?.show || false,
+          position: setting.label?.position || 'top',
+          formatter: setting.label?.formatter || '{@value}',
+          fontSize: setting.label?.fontSize || 12
+        },
+        itemStyle: {
+          borderRadius: setting.itemStyle?.borderRadius || 0,
+          opacity: setting.itemStyle?.opacity || 1
+        },
+        showBackground: setting.showBackground || false,
+        backgroundStyle: {
+          color: 'rgba(180, 180, 180, 0.2)'
+        }
+      }))
+    },
+
+    getDataZoomOption(setting) {
+      if (!setting.dataZoom?.show) return undefined
+
+      return [
+        {
+          type: 'slider',
+          show: true,
+          start: setting.dataZoom?.start || 0,
+          end: setting.dataZoom?.end || 100,
+          ...setting.dataZoom
+        }
+      ]
+    },
+
+    getDefaultColors() {
+      return ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
     }
   }
 }
@@ -148,6 +278,8 @@ export default {
 
 <style scoped>
 .chart {
+background-color: var(--el-bg-color-overlay);
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.0509803922);
   width: 100%;
   height: 100%;
 }

package/dist/components/lwBiChart/charts/FunnelChart.vue

@@ -165,6 +165,8 @@ export default {
 
 <style scoped>
 .chart {
+background-color: var(--el-bg-color-overlay);
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.0509803922);
   width: 100%;
   height: 100%;
   

package/dist/components/lwBiChart/charts/GaugeChart.vue

@@ -163,6 +163,8 @@ export default {
 
 <style scoped>
 .chart {
+background-color: var(--el-bg-color-overlay);
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.0509803922);
   width: 100%;
   height: 100%;
   

package/dist/components/lwBiChart/charts/LineChart.vue

@@ -250,6 +250,8 @@ export default {
 
 <style scoped>
 .chart {
+background-color: var(--el-bg-color-overlay);
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.0509803922);
   width: 100%;
   height: 100%;
 }

package/dist/components/lwBiChart/charts/MapChart.vue

@@ -171,6 +171,8 @@ export default {
 
 <style scoped>
 .chart {
+background-color: var(--el-bg-color-overlay);
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.0509803922);
   width: 100%;
   height: 100%;
   

package/dist/components/lwBiChart/charts/MetricCard.vue

@@ -14,12 +14,12 @@
           </el-tooltip>
 
           <strong class="title"
-                  style="{ color: item.color }">{{ item.index }}</strong>
+                  :style="{ color: item.color }">{{ item.index }}</strong>
         </div>
       </template>
     </el-statistic>
 
-    <div class="statistic-footer">
+    <!-- <div class="statistic-footer">
       <span>{{ item.subtitle }}</span>
       <div :style="{ color: item.percentage >= 0 ? '#BF1220' : '#00B78B' }">
         <el-icon v-if="item.percentage >= 0"
@@ -28,7 +28,7 @@
                  class="icon-down"><el-icon-bottom /></el-icon>
         {{ Math.abs(item.percentage) }}%
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -57,7 +57,7 @@ export default {
       tables.forEach((table, index) => {
         table.headers.forEach((x, xIndex) => {
           result.push({
-            title: setting?.title?.text || table.metricName,
+            title: `${setting?.title?.text || table.metricName} ${table?.unitName ? `(${table.unitName})` : ''}`,
             index: x,
             color: setting.color[xIndex],
             subtitle: '环比上期',
@@ -83,33 +83,31 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
-
 .chart-title-card {
-  padding: 20px;
-
+  padding: 15px;
+  flex: 1;
   border-radius: 5px;
-  min-height: 135px;
+  min-height: 110px;
   height: 100%;
-  max-height: 200px;
-  max-width: 300px;
+  max-height: 110px;
+  // max-width: 300px;
   width: 100%;
-  min-width: 240px;
+  min-width: 30%;
   display: flex;
   flex-direction: column;
-  justify-content: space-between
-}
-:global(h2#card-usage ~ .example .example-showcase) {
-  background-color: var(--el-fill-color) !important;
+  justify-content: space-between;
+  background-color: var(--el-bg-color-overlay);
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.0509803922);
 }
-
-.el-statistic {
-  --el-statistic-content-font-size: 28px;
+:deep(.el-statistic__number) {
+  line-height: 50px;
+  font-size: 40px;
 }
 .title-container {
   position: relative;
+  font-size: 14px;
   .title {
-    font-size: 16px;
+    font-size: 17px;
     position: absolute;
     right: 0;
   }

package/dist/components/lwBiChart/charts/PieChart.vue

@@ -154,6 +154,8 @@ export default {
 
 <style scoped>
 .chart {
+background-color: var(--el-bg-color-overlay);
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.0509803922);
   width: 100%;
   height: 100%;
   

package/dist/components/lwBiChart/charts/RadarChart.vue

@@ -173,6 +173,8 @@ export default {
 
 <style scoped>
 .chart {
+background-color: var(--el-bg-color-overlay);
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.0509803922);
   width: 100%;
   height: 100%;
   

package/dist/components/lwBiChart/charts/ReportTable.vue

@@ -29,6 +29,7 @@
       <el-pagination :current-page="currentPage"
                      :page-sizes="pageSizes"
                      :page-size="pageSize"
+                     size="small"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total"
                      @size-change="handleSizeChange"
@@ -128,8 +129,9 @@ export default {
   width: 100%;
 }
 .pagination-container {
-  margin-top: 16px;
+  margin-top: 10px;
   display: flex;
   justify-content: flex-end;
+  padding-right: 10px;
 }
 </style>

package/dist/components/lwBiChart/charts/ScatterChart.vue

@@ -247,6 +247,8 @@ export default {
 
 <style scoped>
 .chart {
+background-color: var(--el-bg-color-overlay);
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.0509803922);
   width: 100%;
   height: 100%;
 }