lw-cdp-ui 1.3.24 → 1.3.26

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

@@ -0,0 +1,218 @@
+<template>
+  <v-chart class="chart"
+           :style="{ height }"
+           :option="option"
+           autoresize />
+</template>
+
+<script>
+import {use} from 'echarts/core'
+import {LineChart} from 'echarts/charts'
+import {CanvasRenderer} from 'echarts/renderers'
+import {TitleComponent, TooltipComponent, LegendComponent, GridComponent, ToolboxComponent} from 'echarts/components'
+import VChart from 'vue-echarts'
+
+use([CanvasRenderer, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, ToolboxComponent])
+
+export default {
+  name: 'AreaChart',
+  components: {
+    VChart
+  },
+  props: {
+    rawData: {
+      type: Object,
+      required: true,
+      validator: value => {
+        return value.dataSet && value.dataSet.tables && value.setting
+      }
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      option: {}
+    }
+  },
+  watch: {
+    rawData: {
+      handler: 'updateChart',
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    updateChart() {
+      const {setting, dataSet} = this.rawData
+      const {tables} = dataSet
+
+      if (!tables || tables.length === 0) return
+
+      this.option = {
+        title: this.getTitleOption(setting),
+        tooltip: this.getTooltipOption(setting),
+        legend: this.getLegendOption(setting, tables),
+        grid: this.getGridOption(setting),
+        toolbox: this.getToolboxOption(setting),
+        xAxis: this.getXAxisOption(tables),
+        yAxis: this.getYAxisOption(),
+        series: this.getSeriesData(setting, tables),
+        color: setting.color || this.getDefaultColors()
+      }
+    },
+
+    getTitleOption(setting) {
+      return {
+        show: setting.title?.show !== false,
+        text: setting.title?.text || '',
+        textStyle: setting.title?.textStyle || {
+          fontSize: 16,
+          fontWeight: 'bold',
+          color: '#333'
+        },
+        left: setting.title?.left || 'center',
+        top: setting.title?.top || 'top',
+        padding: setting.title?.padding || [5, 5, 5, 5]
+      }
+    },
+
+    getTooltipOption(setting) {
+      return {
+        ...(setting.tooltip || {}),
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+          label: {
+            backgroundColor: '#6a7985'
+          }
+        }
+      }
+    },
+
+    getLegendOption(setting, tables) {
+      return {
+        ...(setting.legend || {}),
+        data: tables.map(table => table.metricName),
+        type: 'scroll',
+        bottom: 0,
+        textStyle: {
+          fontSize: 12
+        }
+      }
+    },
+
+    getGridOption(setting) {
+      return {
+        ...(setting.grid || {}),
+        left: '3%',
+        right: '4%',
+        bottom: setting.legend?.show !== false ? '15%' : '3%',
+        containLabel: true
+      }
+    },
+
+    getToolboxOption(setting) {
+      if (setting.toolbox?.show === false) {
+        return {show: false}
+      }
+
+      return {
+        feature: {
+          saveAsImage: {
+            title: '保存为图片',
+            pixelRatio: 2
+          },
+          dataView: {
+            readOnly: true,
+            title: '数据视图'
+          },
+          magicType: {
+            title: {
+              line: '切换为折线图',
+              bar: '切换为柱状图'
+            },
+            type: ['line', 'bar']
+          },
+          restore: {
+            title: '还原'
+          }
+        },
+        right: 10,
+        top: 0
+      }
+    },
+
+    getXAxisOption(tables) {
+      return {
+        type: 'category',
+        boundaryGap: false,
+        data: tables[0].headers,
+        axisLabel: {
+          rotate: 30,
+          interval: 0
+        }
+      }
+    },
+
+    getYAxisOption() {
+      return {
+        type: 'value',
+        axisLabel: {
+          formatter: value => {
+            if (value >= 10000) {
+              return value / 10000 + '万'
+            }
+            return value
+          }
+        }
+      }
+    },
+
+    getSeriesData(setting, tables) {
+      return tables.map((table, index) => ({
+        name: table.metricName,
+        type: 'line',
+        stack: 'total',
+        areaStyle: {
+          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {offset: 0, color: 'rgba(58, 77, 233, 0.8)'},
+            {offset: 1, color: 'rgba(58, 77, 233, 0.1)'}
+          ])
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        smooth: setting.smooth || true,
+        symbol: 'circle',
+        symbolSize: 6,
+        lineStyle: {
+          width: 2
+        },
+        data: table.rows[0].values,
+        label: {
+          show: setting.label?.show || false,
+          position: 'top',
+          formatter: setting.label?.formatter || '{@value}',
+          fontSize: 12
+        }
+      }))
+    },
+
+    getDefaultColors() {
+      return ['#3A4DE9', '#4BC0C0', '#FF9F43', '#ED5565', '#A0A7E6', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
+}
+</style>

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

@@ -0,0 +1,126 @@
+<template>
+  <v-chart class="chart"
+           :style="{ height }"
+           :option="option"
+           autoresize />
+</template>
+
+<script>
+import {use} from 'echarts/core'
+import {BarChart} from 'echarts/charts'
+import {CanvasRenderer} from 'echarts/renderers'
+import {TitleComponent, TooltipComponent, LegendComponent, GridComponent} from 'echarts/components'
+import VChart from 'vue-echarts'
+
+use([CanvasRenderer, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])
+
+export default {
+  name: 'BarChart',
+  components: {
+    VChart
+  },
+  props: {
+    rawData: {
+      type: Object,
+      required: true
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      option: {}
+    }
+  },
+  watch: {
+    rawData: {
+      handler: 'updateOption',
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    updateOption() {
+      const {setting, dataSet} = this.rawData
+      const {tables} = dataSet
+
+      if (!tables || tables.length === 0) return
+
+      this.option = {
+        title: this.getTitleOption(setting),
+        legend: this.getLegendOption(setting, tables),
+        grid: setting.grid || {},
+        tooltip: setting.tooltip || {},
+        color: setting.color,
+        xAxis: this.getXAxisOption(setting, tables),
+        yAxis: this.getYAxisOption(setting),
+        series: this.getSeries(setting, tables)
+      }
+    },
+
+    getTitleOption(setting) {
+      return {
+        show: setting.title?.show || false,
+        text: setting.title?.text || '',
+        textStyle: setting.title?.textStyle || {},
+        left: setting.title?.left || 'center',
+        padding: setting.title?.padding || [5, 5, 5, 5]
+      }
+    },
+
+    getLegendOption(setting, tables) {
+      return {
+        ...(setting.legend || {}),
+        data: tables.map(table => table.metricName)
+      }
+    },
+
+    getXAxisOption(setting, tables) {
+      return setting.revertAxis
+        ? {type: 'value'}
+        : {
+            type: 'category',
+            data: tables[0].headers
+          }
+    },
+
+    getYAxisOption(setting) {
+      return setting.revertAxis
+        ? {
+            type: 'category',
+            data: this.rawData.dataSet.tables[0].headers
+          }
+        : {type: 'value'}
+    },
+
+    getSeries(setting, tables) {
+      return tables.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}'
+        }
+      }))
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,96 @@
+<template>
+  <div class="chart-title-container"
+       :style="titleStyle">
+    <div class="title-text"
+         :style="textStyle">
+      {{ titleText }}
+    </div>
+    <div v-if="subtitle"
+         class="subtitle-text"
+         :style="subtitleStyle">
+      {{ subtitle }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChartTitle',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    subtitle: {
+      type: String,
+      default: ''
+    },
+    align: {
+      type: String,
+      default: 'center',
+      validator: value => ['left', 'center', 'right'].includes(value)
+    },
+    titleStyle: {
+      type: Object,
+      default: () => ({
+        color: '#333',
+        fontSize: '18px',
+        fontWeight: 'bold',
+        marginBottom: '10px'
+      })
+    },
+    subtitleStyle: {
+      type: Object,
+      default: () => ({
+        color: '#666',
+        fontSize: '14px',
+        marginTop: '4px'
+      })
+    },
+    showDivider: {
+      type: Boolean,
+      default: false
+    },
+    dividerColor: {
+      type: String,
+      default: '#eee'
+    }
+  },
+  computed: {
+    titleText() {
+      return this.title || '图表标题'
+    },
+    textStyle() {
+      return {
+        textAlign: this.align,
+        ...this.titleStyle
+      }
+    },
+    containerStyle() {
+      return {
+        borderBottom: this.showDivider ? `1px solid ${this.dividerColor}` : 'none',
+        paddingBottom: this.showDivider ? '10px' : '0'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-title-container {
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.title-text {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+}
+
+.subtitle-text {
+  font-size: 14px;
+  color: #666;
+  margin-top: 4px;
+}
+</style>

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

@@ -0,0 +1,149 @@
+<template>
+  <v-chart class="chart"
+           :style="{ height }"
+           :option="option"
+           autoresize />
+</template>
+
+<script>
+import {use} from 'echarts/core'
+import {FunnelChart} from 'echarts/charts'
+import {CanvasRenderer} from 'echarts/renderers'
+import {TitleComponent, TooltipComponent, LegendComponent, GridComponent} from 'echarts/components'
+import VChart from 'vue-echarts'
+
+use([CanvasRenderer, FunnelChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])
+
+export default {
+  name: 'FunnelChart',
+  components: {
+    VChart
+  },
+  props: {
+    rawData: {
+      type: Object,
+      required: true,
+      validator: value => {
+        return value.dataSet && value.dataSet.tables && value.setting
+      }
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      option: {}
+    }
+  },
+  watch: {
+    rawData: {
+      handler: 'updateChart',
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    updateChart() {
+      const {setting, dataSet} = this.rawData
+      const {tables} = dataSet
+
+      if (!tables || tables.length === 0) return
+
+      this.option = {
+        title: this.getTitleOption(setting),
+        tooltip: this.getTooltipOption(setting),
+        legend: this.getLegendOption(setting, tables),
+        series: this.getSeriesData(setting, tables),
+        color: setting.color || this.getDefaultColors()
+      }
+    },
+
+    getTitleOption(setting) {
+      return {
+        show: setting.title?.show !== false,
+        text: setting.title?.text || '',
+        left: setting.title?.left || 'center',
+        textStyle: setting.title?.textStyle || {
+          fontSize: 16,
+          fontWeight: 'bold'
+        }
+      }
+    },
+
+    getTooltipOption(setting) {
+      return {
+        trigger: 'item',
+        formatter: setting.tooltip?.formatter || '{a} <br/>{b}: {c} ({d}%)'
+      }
+    },
+
+    getLegendOption(setting, tables) {
+      return {
+        show: setting.legend?.show !== false,
+        data: tables[0].headers,
+        textStyle: setting.legend?.textStyle || {
+          fontSize: 12
+        }
+      }
+    },
+
+    getSeriesData(setting, tables) {
+      return [
+        {
+          name: tables[0].metricName,
+          type: 'funnel',
+          left: '10%',
+          top: 60,
+          bottom: 60,
+          width: '80%',
+          min: 0,
+          max: 100,
+          minSize: '0%',
+          maxSize: '100%',
+          sort: setting.sort || 'descending',
+          gap: 2,
+          label: {
+            show: setting.label?.show !== false,
+            position: 'inside',
+            formatter: setting.label?.formatter || '{b}: {c}'
+          },
+          labelLine: {
+            length: 10,
+            lineStyle: {
+              width: 1,
+              type: 'solid'
+            }
+          },
+          itemStyle: {
+            borderColor: '#fff',
+            borderWidth: 1
+          },
+          emphasis: {
+            label: {
+              fontSize: 16
+            }
+          },
+          data: tables[0].headers.map((name, index) => ({
+            value: tables[0].rows[0].values[index],
+            name: name
+          }))
+        }
+      ]
+    },
+
+    getDefaultColors() {
+      return ['#3A4DE9', '#4BC0C0', '#FF9F43', '#ED5565', '#A0A7E6', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
+}
+</style>