图表编辑

src/views/dataChart/privateChart/privateChartEdit.vue

@@ -4,15 +4,26 @@
       <m-card shadow="never" class="fullscreen border-box" :body-style="{ height: '100%', padding: 0 }">
         <div class="d-flex box fullscreen">
           <div class="box-left">
-            <PrivateChartEditType ref="privateChartEditTypeRefs" @change="onChangeOption"></PrivateChartEditType>
+            <PrivateChartEditType
+              ref="privateChartEditTypeRefs"
+              @change="onChangeOption"
+            ></PrivateChartEditType>
           </div>
           <div class="box-main border-box">
             <m-card shadow="never" class="fullHeight" :bodyStyle="{ height: '100%' }">
-              <PrivateChartEditShow ref="privateChartEditShowRefs" class="fullscreen"></PrivateChartEditShow>
+              <PrivateChartEditShow
+                ref="privateChartEditShowRefs"
+                class="fullscreen"
+              ></PrivateChartEditShow>
             </m-card>
           </div>
           <div class="box-right">
-            <PrivateChartEditParams ref="privateChartEditParamsRefs" class="fullscreen" @render="onChangParams" @render:config="onChangeConfig"></PrivateChartEditParams>
+            <PrivateChartEditParams
+              ref="privateChartEditParamsRefs"
+              class="fullscreen"
+              @render="onChangParams"
+              @render:config="onChangeConfig"
+            ></PrivateChartEditParams>
           </div>
         </div>
       </m-card>
@@ -34,30 +45,53 @@ export default {
   data () {
     return {
       key: null,
-      option: {},
+      option: {
+        xAxisData: []
+      },
       data: [[1, 2, 3, 4, 5, 6]]
     }
   },
   methods: {
-    open () {
+    open (item) {
       this.$refs.dialog.open()
+      this.$nextTick(() => {
+        // 实例化图例
+        this.$refs.privateChartEditShowRefs.onInit()
+        // const { configRefs } = this.$refs.privateChartEditParamsRefs.onGetRefs()
+        if (!item) {
+          // 获取初始化设置
+          const { key } = this.$refs.privateChartEditTypeRefs.getDefault()
+          this.key = key
+          // 设置默认参数
+          // const defaultParams = [
+          //   { name: '机构名称', value: 'organizationName' },
+          //   { name: '积分', value: 'integral' },
+          //   { name: '职务', value: 'postName' },
+          //   { name: '绩效', value: 'performance' },
+          //   { name: '姓名', value: 'employeeName' }]
+          // configRefs.onSetConfig(defaultParams)
+          this.option.xAxisData = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+          this.setData()
+        }
+      })
     },
-    setData (data) {
-      this.$refs.privateChartEditShowRefs && this.$refs.privateChartEditShowRefs.setData([data], this.key, this.option)
+    setData () {
+      console.log('data', this.option, this.data)
+      this.$refs.privateChartEditShowRefs.setData(this.data, this.key, this.option)
     },
     // 改变整体option
-    onChangeOption (key, data) {
+    onChangeOption (key) {
       this.key = key
-      this.option = data.option
-      this.setData(this.data)
+      this.setData()
     },
     // 改变数据参数
     onChangParams (data) {
-      console.log(data)
       this.data = data
-      this.setData(data)
+      this.setData()
     },
+    // x、y轴数据
     onChangeConfig (obj) {
+      // const { x, y } = obj
       console.log(obj)
     }
   }

src/views/dataChart/privateChart/privateChartEditParams.vue

@@ -2,10 +2,10 @@
   <div class="content">
     <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick" class="fullHeigh">
       <el-tab-pane label="数据读取" name="first">
-        <PrivateChartEditParamsData @change="onRender"></PrivateChartEditParamsData>
+        <PrivateChartEditParamsData ref="data" @change="onRender"></PrivateChartEditParamsData>
       </el-tab-pane>
       <el-tab-pane label="参数配置" name="second">
-        <PrivateChartEditParamsConfig @change="onChangeConfig"></PrivateChartEditParamsConfig>
+        <PrivateChartEditParamsConfig ref="config" @change="onChangeConfig"></PrivateChartEditParamsConfig>
       </el-tab-pane>
       <el-tab-pane label="AI查询" name="third">AI查询</el-tab-pane>
     </el-tabs>
@@ -28,6 +28,13 @@ export default {
     }
   },
   methods: {
+    // 数据读取
+    onGetRefs () {
+      return {
+        dataRefs: this.$refs.data,
+        configRefs: this.$refs.config
+      }
+    },
     onRender (v) {
       this.$emit('render', v)
     },

src/views/dataChart/privateChart/privateChartEditParamsConfig.vue

@@ -10,6 +10,9 @@
           <el-checkbox :label="item.value">{{ item.name }}</el-checkbox>
         </div>
       </el-checkbox-group>
+      <template v-if="checkItems.length === 0">
+        <div class="text-center pa-3">请先读取数据</div>
+      </template>
     </el-tab-pane>
     <el-tab-pane label="纵轴配置" name="y">
       <el-checkbox-group v-model="checkboxGroupY" @change="onRender">
@@ -21,6 +24,9 @@
           <el-checkbox :label="item.value">{{ item.name }}</el-checkbox>
         </div>
       </el-checkbox-group>
+      <template v-if="checkItems.length === 0">
+        <div class="text-center pa-3">请先读取数据</div>
+      </template>
     </el-tab-pane>
     <el-tab-pane label="其他配置"></el-tab-pane>
   </el-tabs>
@@ -37,9 +43,6 @@ export default {
       checkItems: []
     }
   },
-  created () {
-    this.onGetConfig()
-  },
   methods: {
     onRender (v) {
       this.$emit('change', {
@@ -47,24 +50,8 @@ export default {
         y: this.checkboxGroupY
       })
     },
-    onGetConfig () {
-      const arr = [{
-        name: '机构名称',
-        value: 'organizationName'
-      }, {
-        name: '积分',
-        value: 'integral'
-      }, {
-        name: '职务',
-        value: 'postName'
-      }, {
-        name: '绩效',
-        value: 'performance'
-      }, {
-        name: '姓名',
-        value: 'employeeName'
-      }]
-      this.checkItems = arr
+    onSetConfig (items) {
+      this.checkItems = items
     }
   }
 }

src/views/dataChart/privateChart/privateChartEditShow.vue

@@ -16,6 +16,9 @@ export default {
     }
   },
   methods: {
+    onInit () {
+      this.chart = this.$refs.chart.onInit()
+    },
     /**
      * 接收一组二维数组，用于设置图表数据
      * @param data: Array 图表数据 [ [], [] ]
@@ -28,23 +31,30 @@ export default {
       this.data = data || [[]]
       const _option = cloneDeep(Charts[key].option)
       const series = _option.series
+      const _data = []
+      if (key === 'pie') {
+        this.data.forEach(e => {
+          _data.push(e.map((_e, i) => {
+            return {
+              value: _e,
+              name: config.xAxisData[i] ?? _e
+            }
+          }))
+        })
+      } else {
+        _data.push(...this.data)
+      }
       series.forEach((item, index) => {
-        item.data = this.data[index]
+        item.data = _data[index]
       })
       if (_option.xAxis?.data) {
-        _option.xAxis.data = config?.xAxisData?.length ?? this.data[0].map((e, i) => i)
+        _option.xAxis.data = config?.xAxisData ?? this.data[0].map((e, i) => i)
       }
-      console.log(_option)
+      console.log('_option', this.data, _option)
       this.chart.setOption(_option, this.key !== key)
       this.key = key
       this.chart.hideLoading()
     }
-  },
-  mounted () {
-    // 组件挂载完成后的钩子函数
-    this.$nextTick(() => {
-      this.chart = this.$refs.chart.onInit()
-    })
   }
 }
 </script>

src/views/dataChart/privateChart/privateChartEditType.vue

@@ -22,12 +22,15 @@ export default {
       Charts
     }
   },
-  created () {
-    this.onChange(this.Charts.bar, 'bar')
-  },
   methods: {
-    onChange (data, key) {
-      this.$emit('change', key, data)
+    getDefault () {
+      return {
+        key: 'bar',
+        option: this.Charts.bar
+      }
+    },
+    onChange (option, key) {
+      this.$emit('change', key, option)
     }
   }
 }