自定义图表

src/views/dataChart/privateChart/privateChartEdit.vue

@@ -11,6 +11,7 @@
           </div>
           <div class="box-main border-box">
             <m-card shadow="never" class="fullHeight" :bodyStyle="{ height: '100%' }">
+              <el-empty v-if="empty"></el-empty>
               <PrivateChartEditShow
                 ref="privateChartEditShowRefs"
                 class="fullscreen"
@@ -45,6 +46,7 @@ export default {
   data () {
     return {
       loading: false,
+      empty: false,
       key: null,
       option: {
         xAxisData: []
@@ -55,21 +57,26 @@ export default {
   methods: {
     async open (item) {
       this.$refs.dialog.open()
-      this.loading = true
+      // this.loading = true
       this.$nextTick(async () => {
         // 实例化图例
         this.$refs.privateChartEditShowRefs.onInit()
         if (!item.data) {
-          // 获取初始化设置
-          const { key } = this.$refs.privateChartEditTypeRefs.getDefault()
-          this.key = key
-          this.option.xAxisData = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
-          this.setData()
-          this.loading = false
+          this.empty = true
+          return
         }
+        this.empty = false
+        //   // 获取初始化设置
+        //   const { key } = this.$refs.privateChartEditTypeRefs.getDefault()
+        //   this.key = key
+        //   this.option.xAxisData = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+        //   this.setData()
+        //   this.loading = false
+        // }
       })
     },
     setData () {
+      this.empty = false
       this.$refs.privateChartEditShowRefs.setData(this.data, this.key, this.option)
     },
     // 改变整体option

src/views/dataChart/privateChart/privateChartEditParams.vue

@@ -35,8 +35,15 @@ export default {
         configRefs: this.$refs.config
       }
     },
-    onRender (v) {
-      this.$emit('render', v)
+    onRender (items) {
+      this.$refs.config.onSetConfig(Object.keys(items[0]).map(e => {
+        return {
+          name: e,
+          value: e
+        }
+      }))
+      console.log('onRender', items)
+      // this.$emit('render', v)
     },
     onChangeConfig (v) {
       this.$emit('render:config', v)

src/views/dataChart/privateChart/privateChartEditParamsData.vue

@@ -64,25 +64,21 @@ export default {
         }
       ],
       items: [],
-      headers: [
-        {
-          label: '字段名称',
-          prop: 'fieldName'
-        },
-        {
-          label: '字段类型',
-          prop: 'fieldType'
-        },
-        {
-          label: '字段描述',
-          prop: 'fieldDesc'
-        }
-      ]
+      headers: []
     }
   },
   methods: {
     onChange () {
-      this.$emit('change', this.getValues())
+      const items = this.getValues()
+      this.headers = Object.keys(items[0]).map(e => {
+        return {
+          prop: e,
+          label: e,
+          width: '200px'
+        }
+      })
+      this.items = items
+      this.$emit('change', items)
     },
     getValues () {
       return [

src/views/dataChart/utils/options.js

@@ -1,7 +1,12 @@
+// const COLOR = ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00']
+
 export const line = {
   title: '折线图',
   icon: 'mdi-chart-line',
   option: {
+    legend: {
+      show: true
+    },
     xAxis: {
       type: 'category',
       data: []
@@ -23,6 +28,10 @@ export const bar = {
   title: '柱状图',
   icon: 'mdi-chart-bar',
   option: {
+    legend: {
+      show: true,
+      left: 'center'
+    },
     xAxis: {
       type: 'category',
       data: []
@@ -43,17 +52,16 @@ export const pie = {
   title: '饼图',
   icon: 'mdi-chart-pie',
   option: {
-    title: {
-      text: 'Referer of a Website',
-      subtext: 'Fake Data',
-      left: 'center'
-    },
+    // title: {
+    //   text: 'Referer of a Website',
+    //   subtext: 'Fake Data',
+    //   left: 'center'
+    // },
     tooltip: {
       trigger: 'item'
     },
     legend: {
-      orient: 'vertical',
-      left: 'left'
+      left: 'center'
     },
     series: [
       {