vue2-client 1.8.48 → 1.8.49

package/src/pages/DynamicStatistics/ChartSelector.vue

@@ -1,155 +1,226 @@
-<template>
-  <div class="chart-card">
-    <a-row type="flex" align="middle" justify="center" :gutter="16">
-      <a-col>
-        分组条件：<a-select v-model="selectedGroup" style="width: 200px" @change="updateCharts">
-          <a-select-option v-for="option in groupOptions" :key="option" :value="option">{{ option }}</a-select-option>
-        </a-select>
-      </a-col>
-      <a-col>
-        数值列：<a-select v-model="selectedValues" mode="multiple" style="width: 200px" @change="updateCharts">
-          <a-select-option v-for="option in valueOptions" :key="option" :value="option">{{ option }}</a-select-option>
-        </a-select>
-      </a-col>
-    </a-row>
-    <a-divider/>
-    <a-row type="flex" align="middle" justify="space-around" :gutter="24">
-      <a-col>
-        <div ref="pieChart" class="chart-content"></div>
-      </a-col>
-      <a-col>
-        <div ref="columnChart" class="chart-content"></div>
-      </a-col>
-    </a-row>
-  </div>
-</template>
-
-<script>
-import { Pie, Column } from '@antv/g2plot'
-
-export default {
-  data () {
-    return {
-      selectedGroup: null,
-      groupOptions: [],
-      valueOptions: [],
-      selectedValues: [], // 更新为数组，支持多选
-      pieChart: null,
-      columnChart: null,
-    }
-  },
-  mounted () {
-    this.initData()
-  },
-  props: {
-    rawData: {
-      type: Array,
-      required: true
-    }
-  },
-  watch: {
-    rawData: {
-      deep: true,
-      handler (newVal) {
-        this.initData()
-      }
-    }
-  },
-  methods: {
-    initData () {
-      this.initializeOptions()
-      this.selectedGroup = this.groupOptions[0]
-      if (this.valueOptions.length > 0) {
-        this.selectedValues = [this.valueOptions[0]] // 默认选择第一个数值列
-      }
-      this.updateCharts()
-    },
-    initializeOptions () {
-      if (this.rawData.length > 0) {
-        const firstRow = this.rawData[0]
-        this.groupOptions = Object.keys(firstRow).filter(key => typeof firstRow[key] === 'string')
-        this.valueOptions = Object.keys(firstRow).filter(key => typeof firstRow[key] === 'number')
-      }
-    },
-    updateCharts () {
-      this.renderPieChart()
-      this.renderColumnChart()
-    },
-    renderPieChart () {
-      const transformedData = this.transformDataForChart(true) // 传递参数以指示是否为饼图
-      if (this.pieChart) {
-        this.pieChart.changeData(transformedData)
-      } else {
-        this.pieChart = new Pie(this.$refs.pieChart, {
-          data: transformedData,
-          angleField: 'value',
-          colorField: 'category',
-          radius: 0.8,
-          forceFit: true,
-          title: {
-            visible: true,
-            text: '多色饼图',
-          },
-          description: {
-            visible: true,
-            text:
-              '指定颜色映射字段(colorField)，饼图切片将根据该字段数据显示为不同的颜色。指定颜色需要将color配置为一个数组。\n当把饼图label的类型设置为inner时，标签会显示在切片内部。设置offset控制标签的偏移值。',
-          },
-          label: {
-            visible: true,
-            type: 'inner',
-          },
-        })
-        this.pieChart.render()
-      }
-    },
-    renderColumnChart () {
-      const transformedData = this.transformDataForChart(false) // 非饼图
-      if (this.columnChart) {
-        this.columnChart.changeData(transformedData)
-      } else {
-        this.columnChart = new Column(this.$refs.columnChart, {
-          data: transformedData,
-          xField: 'category',
-          yField: 'value',
-          seriesField: 'type', // 使用类型字段来区分不同的数值列
-          isGroup: true,
-        })
-        this.columnChart.render()
-      }
-    },
-    transformDataForChart (isPieChart) {
-      if (isPieChart) {
-        // 饼图数据转换逻辑：将选中的数值列汇总
-        const totalByValue = this.selectedValues.map(valueKey => ({
-          category: valueKey,
-          value: this.rawData.reduce((sum, item) => sum + item[valueKey], 0),
-        }))
-        return totalByValue
-      } else {
-        // 柱状图数据转换逻辑：为每个分组条件和选中的数值列创建条目
-        const transformedData = []
-        this.rawData.forEach(item => {
-          this.selectedValues.forEach(valueKey => {
-            transformedData.push({
-              category: item[this.selectedGroup],
-              value: item[valueKey],
-              type: valueKey, // 添加一个字段来区分不同的数值列
-            })
-          })
-        })
-        return transformedData
-      }
-    },
-  }
-}
-</script>
-<style lang="less" scoped>
-.chart-card {
-  height: calc(100vh - 550px);
-  .chart-content {
-    width: 500px;
-    height: 250px;
-  }
-}
-</style>
+<template>
+  <div class="chart-card">
+    <a-row type="flex" align="middle" justify="center" :gutter="16">
+      <a-col>
+        分组条件：
+        <a-select v-model="selectedGroup" style="width: 200px" @change="updateCharts">
+          <a-select-option v-for="option in groupOptions" :key="option" :value="option">{{ option }}</a-select-option>
+        </a-select>
+      </a-col>
+      <a-col>
+        数值列：
+        <a-select v-model="selectedValues" mode="multiple" style="width: 200px" @change="updateCharts">
+          <a-select-option v-for="option in valueOptions" :key="option" :value="option">{{ option }}</a-select-option>
+        </a-select>
+      </a-col>
+    </a-row>
+    <a-divider/>
+    <a-row align="middle" justify="space-around" :gutter="24">
+      <a-col :span="8">
+        <div ref="pieChart" class="chart-content"></div>
+      </a-col>
+      <a-col :span="8">
+        <div ref="columnChart" class="chart-content"></div>
+      </a-col>
+      <a-col :span="8">
+        <div id="lineChart" ref="lineChart" class="chart-content"></div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  data () {
+    return {
+      selectedGroup: null,
+      groupOptions: [],
+      valueOptions: [],
+      selectedValues: [], // 更新为数组，支持多选
+      pieChart: null,
+      columnChart: null,
+      lineChart: null,
+      intervalId: null,
+      componentKey: 0,
+      commonOptions: {
+        tooltip: {
+          trigger: 'item'
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        legend: {},
+        color: ['#5DB1FF', '#59D4D4', '#FFD700', '#FF7F50', '#87CEFA',
+          '#32CD32', '#DA70D6', '#6495ED', '#DC143C', '#00FFFF',
+          '#00008B', '#008B8B', '#B8860B', '#A9A9A9']
+      }
+    }
+  },
+  mounted () {
+    this.initData()
+    // 定时刷新图表
+    this.intervalId = setInterval(() => {
+      this.renderLineChart()
+    }, 3000)
+  },
+  beforeDestroy () {
+    // 组件销毁时清除定时器
+    clearInterval(this.intervalId)
+  },
+  props: {
+    rawData: {
+      type: Array,
+      required: true
+    }
+  },
+  watch: {
+    rawData: {
+      deep: true,
+      handler (newVal) {
+        this.initData()
+      }
+    }
+  },
+  methods: {
+    initData () {
+      this.initializeOptions()
+      this.selectedGroup = this.groupOptions[0]
+      if (this.valueOptions.length > 0) {
+        this.selectedValues = [this.valueOptions[0]] // 默认选择第一个数值列
+      }
+      this.updateCharts()
+    },
+    initializeOptions () {
+      if (this.rawData.length > 0) {
+        const firstRow = this.rawData[0]
+        this.groupOptions = Object.keys(firstRow).filter(key => typeof firstRow[key] === 'string')
+        this.valueOptions = Object.keys(firstRow).filter(key => typeof firstRow[key] === 'number')
+      }
+    },
+    updateCharts () {
+      this.renderPieChart()
+      this.renderColumnChart()
+      this.renderLineChart()
+    },
+    renderPieChart () {
+      const transformedData = this.transformDataForChart('pie')
+      const options = {
+        series: [
+          {
+            type: 'pie',
+            radius: '50%',
+            data: transformedData,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      }
+      echarts.init(this.$refs.pieChart).setOption(Object.assign(
+          this.commonOptions,
+          options
+        )
+      )
+    },
+    renderColumnChart () {
+      const transformedData = this.transformDataForChart()
+      const options = {
+        dataset: {
+          dimensions: ['category', ...this.selectedValues],
+          source: transformedData
+        },
+        xAxis: { type: 'category' },
+        yAxis: {},
+        series: this.selectedValues.map(item => {
+          return { type: 'bar' }
+        })
+      }
+      echarts.init(this.$refs.columnChart).setOption(Object.assign(
+        this.commonOptions,
+        options
+      ))
+    },
+    renderLineChart () {
+      const transformedData = this.transformDataForChart('line')
+      const options = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: this.selectedValues
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.rawData.map(item => item.name)
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: transformedData,
+        animationDuration: 2000
+      }
+      if (!this.lineChart) {
+        this.lineChart = echarts.init(this.$refs.lineChart)
+      }
+      this.lineChart.clear()
+      this.lineChart.setOption(Object.assign(
+        this.commonOptions,
+        options
+      ), true)
+    },
+    transformDataForChart (type) {
+      if (type === 'pie') {
+        // 饼图数据转换逻辑：将选中的数值列汇总
+        return this.selectedValues.map(valueKey => ({
+          name: valueKey,
+          value: this.rawData.reduce((sum, item) => sum + item[valueKey], 0),
+        }))
+      } else if (type === 'line') {
+        // 饼图数据转换逻辑：将选中的数值列汇总
+        return this.selectedValues.map(valueKey => ({
+          name: valueKey,
+          type: 'line',
+          stack: 'Total',
+          data: this.rawData.map(item => item[valueKey]),
+        }))
+      } else {
+        // 柱状图数据转换逻辑：为每个分组条件和选中的数值列创建条目
+        const transformedData = []
+        this.rawData.forEach(item => {
+          const tempData = {
+            category: item[this.selectedGroup]
+          }
+          this.selectedValues.forEach(valueKey => {
+            tempData[valueKey] = item[valueKey]
+          })
+          transformedData.push(tempData)
+        })
+        return transformedData
+      }
+    },
+  }
+}
+</script>
+<style lang="less" scoped>
+.chart-card {
+  .chart-content {
+    height: 250px;
+  }
+}
+</style>

package/src/pages/DynamicStatistics/DataTabs.vue

@@ -1,112 +1,63 @@
-<template>
-  <a-tabs
-    v-model="activeKey"
-    type="editable-card"
-    @edit="onEdit"
-    hide-add
-    @change="$emit('tab-change', activeKey)">
-    <a-tab-pane v-for="pane in panes" :key="pane.key" :closable="pane.closable">
-      <template slot="tab">
-        <ellipsis :length="20" tooltip>{{ pane.title }}</ellipsis>
-      </template>
-      <div class="data-content">
-        <!--        <a-button><a-icon type="redo"/>刷新数据</a-button>-->
-        <a-tabs v-model="dataTypeActiveKey">
-          <a-tab-pane :key="'0'" tab="表格">
-            <DynamicTable :table-data="pane.content"></DynamicTable>
-          </a-tab-pane>
-          <a-tab-pane :key="'1'" tab="图表">
-            <div class="chart-card">
-              <ChartSelector :rawData="pane.content"/>
-            </div>
-          </a-tab-pane>
-        </a-tabs>
-        <EvaluationArea :uuid="pane.key"/>
-      </div>
-    </a-tab-pane>
-  </a-tabs>
-</template>
-
-<script>
-import ChartSelector from './ChartSelector.vue'
-import EvaluationArea from './EvaluationArea.vue'
-import Ellipsis from '@vue2-client/components/Ellipsis/Ellipsis.vue'
-import DynamicTable from './DynamicTable.vue'
-
-export default {
-  components: {
-    DynamicTable,
-    Ellipsis,
-    ChartSelector,
-    EvaluationArea
-  },
-  data () {
-    return {
-      activeKey: '1',
-      dataTypeActiveKey: '0',
-      panes: [],
-      newTabIndex: 0,
-    }
-  },
-  mounted () {
-  },
-  methods: {
-    onEdit (targetKey, action) {
-      const activeKey = this[action](targetKey)
-      if (this.panes.length > 0) {
-        this.$emit('tab-change', activeKey)
-        this.$emit('remove-cache', targetKey)
-      } else {
-        this.$emit('tab-change', undefined)
-      }
-    },
-    add (obj) {
-      const { uuid, question, data } = obj
-      const activeKey = uuid
-      this.panes.push({ title: question, content: data, key: uuid })
-      this.activeKey = activeKey
-    },
-    remove (targetKey) {
-      let activeKey = this.activeKey
-      let lastIndex
-      this.panes.forEach((pane, i) => {
-        if (pane.key === targetKey) {
-          lastIndex = i - 1
-        }
-      })
-      const panes = this.panes.filter(pane => pane.key !== targetKey)
-      if (panes.length && activeKey === targetKey) {
-        if (lastIndex >= 0) {
-          activeKey = panes[lastIndex].key
-        } else {
-          activeKey = panes[0].key
-        }
-      }
-      this.panes = panes
-      this.activeKey = activeKey
-      return activeKey
-    },
-    set (targetKey) {
-      this.activeKey = targetKey
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-.tab-title {
-  font-size: 20px;
-  font-weight: bold;
-  color: #333;
-}
-.chart-card {
-  margin-top: 20px;
-}
-.data-content {
-  background-color: #fff;
-  padding: 20px;
-  border-radius: 8px;
-}
-:deep(.ant-tabs-bar) {
-  margin-bottom: 0px;
-}
-</style>
+<template>
+  <a-row class="data-content">
+    <a-tabs v-model="dataTypeActiveKey">
+      <a-tab-pane :key="'0'" tab="表格">
+        <DynamicTable :table-data="pane.content"></DynamicTable>
+      </a-tab-pane>
+      <a-tab-pane :key="'1'" tab="图表">
+        <div class="chart-card">
+          <ChartSelector :rawData="pane.content"/>
+        </div>
+      </a-tab-pane>
+    </a-tabs>
+    <EvaluationArea :uuid="pane.key" v-if="pane.key"/>
+  </a-row>
+</template>
+
+<script>
+import ChartSelector from './ChartSelector.vue'
+import EvaluationArea from './EvaluationArea.vue'
+import Ellipsis from '@vue2-client/components/Ellipsis/Ellipsis.vue'
+import DynamicTable from './DynamicTable.vue'
+
+export default {
+  components: {
+    DynamicTable,
+    Ellipsis,
+    ChartSelector,
+    EvaluationArea
+  },
+  data () {
+    return {
+      dataTypeActiveKey: '0',
+      pane: {}
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    show (obj) {
+      const { uuid, question, data } = obj
+      this.pane = { title: question, content: data, key: uuid }
+    },
+  }
+}
+</script>
+<style lang="less" scoped>
+.tab-title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #333;
+}
+.chart-card {
+  margin-top: 20px;
+}
+.data-content {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+}
+:deep(.ant-tabs-bar) {
+  margin-bottom: 0px;
+}
+</style>