修改看板配置

src/views/boardGenerate/index.vue

@@ -266,6 +266,24 @@
           <el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('defaultInput')">
             <el-input v-model="nodeAttrForm.defaultInput" style="width: 100%" />
           </el-form-item>
+          <el-form-item label="x轴名称" v-if="Object.keys(nodeAttrForm).includes('xName')">
+            <el-input v-model="nodeAttrForm.xName" style="width: 100%" />
+          </el-form-item>
+          <el-form-item label="y轴名称" v-if="Object.keys(nodeAttrForm).includes('yName')">
+            <el-input v-model="nodeAttrForm.yName" style="width: 100%" />
+          </el-form-item>
+          <el-form-item label="顶部距离" v-if="Object.keys(nodeAttrForm).includes('gridTop')">
+            <el-input-number v-model="nodeAttrForm.gridTop" style="width: 100%" />
+          </el-form-item>
+          <el-form-item label="左侧距离" v-if="Object.keys(nodeAttrForm).includes('gridLeft')">
+            <el-input-number v-model="nodeAttrForm.gridLeft" style="width: 100%" />
+          </el-form-item>
+          <el-form-item label="底部距离" v-if="Object.keys(nodeAttrForm).includes('gridBottom')">
+            <el-input-number v-model="nodeAttrForm.gridBottom" style="width: 100%" />
+          </el-form-item>
+          <el-form-item label="右侧距离" v-if="Object.keys(nodeAttrForm).includes('gridRight')">
+            <el-input-number v-model="nodeAttrForm.gridRight" style="width: 100%" />
+          </el-form-item>
           <el-form-item label="默认日期" v-if="Object.keys(nodeAttrForm).includes('defaultTime')">
             <el-date-picker
               v-model="nodeAttrForm.defaultTime"

src/views/boardGenerate/nodes/board/lineNode.vue

@@ -49,141 +49,164 @@ const props = defineProps({
 const chartRef = ref();
 let chart = null;
 const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
+const defaultOption= {
+  title: {
+    text: props.data.options.title || '',
+    textStyle: {
+      fontSize: 12,
+      fontWeight: 400,
+      color: '#fff'
+    },
+    left: '0',
+    top: '5%'
+  },
+  legend: {
+    icon: 'circle',
+    top: '5%',
+    right: '5%',
+    itemWidth: 6,
+    itemGap: 20,
+    textStyle: {
+      color: '#fff'
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      label: {
+        show: true,
+        backgroundColor: '#fff',
+        color: '#000',
+        borderColor: 'rgba(0,0,0,0)',
+        shadowColor: 'rgba(0,0,0,0)',
+        shadowOffsetY: 0
+      },
+      lineStyle: {
+        width: 0
+      }
+    },
+    backgroundColor: '#fff',
+    textStyle: {
+      color: '#000'
+    },
+    padding: [10, 10],
+    extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
+  },
+  grid: {
+    top: props.data?.options?.gridTop+'%' || '20%',
+    left: props.data?.options?.gridLeft+'%' || '20%',
+    bottom: props.data?.options?.gridBottom+'%' || '20%',
+    right: props.data?.options?.gridRight+'%' || '20%'
+  },
+  xAxis: [
+    {
+      name:props.data?.options?.xName || '',
+      type: 'category',
+      axisLine: {
+        lineStyle: {
+          color: '#DCE2E8'
+        }
+      },
+      axisTick: {
+        show: true
+      },
+      axisLabel: {
+        interval: 0,
+        textStyle: {
+          color: '#fff'
+        },
+        fontSize: 12,
+        margin: 3
+      },
+      axisPointer: {
+        label: {
+          padding: [0, 0, 0, 0],
+          margin: 0,
+          fontSize: 12
+        }
+      },
+      boundaryGap: true
+    }
+  ],
+  yAxis: [
+    {
+      name:props.data?.options?.yName || '',
+      type: 'value',
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#fff'
+        }
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#fff'
+        }
+      },
+      splitLine: {
+        show: false
+      }
+    }
+  ],
+  series: [
+    {
+      type: 'line',
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: false,
+      yAxisIndex: 0,
+      showSymbol: false,
+      lineStyle: {
+        width: 1,
+        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+          {
+            offset: 0,
+            color: '#9effff'
+          },
+          {
+            offset: 1,
+            color: '#9E87FF'
+          }
+        ]),
+        shadowColor: 'rgba(158,135,255, 0.3)',
+        shadowBlur: 10,
+        shadowOffsetY: 20
+      },
+      itemStyle: {
+        normal: {
+          color: colorList[0],
+          borderColor: colorList[0]
+        }
+      }
+    }
+  ]
+}
 const getOption = () => {
   const chartOption = {
     title: {
-      text: props.data.options.title || '设备运行数量',
+      text: props.data.options.title || '',
-      textStyle: {
-        fontSize: 12,
-        fontWeight: 400,
-        color: '#fff'
-      },
-      left: '0',
-      top: '5%'
-    },
-    legend: {
-      icon: 'circle',
-      top: '5%',
-      right: '5%',
-      itemWidth: 6,
-      itemGap: 20,
-      textStyle: {
-        color: '#fff'
-      }
-    },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        label: {
-          show: true,
-          backgroundColor: '#fff',
-          color: '#000',
-          borderColor: 'rgba(0,0,0,0)',
-          shadowColor: 'rgba(0,0,0,0)',
-          shadowOffsetY: 0
-        },
-        lineStyle: {
-          width: 0
-        }
-      },
-      backgroundColor: '#fff',
-      textStyle: {
-        color: '#000'
-      },
-      padding: [10, 10],
-      extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
     },
     grid: {
-      top: '30%',
+      top: props.data?.options?.gridTop+'%' || '20%',
-      bottom: '10%'
+      left: props.data?.options?.gridLeft+'%' || '20%',
+      bottom: props.data?.options?.gridBottom+'%' || '20%',
+      right: props.data?.options?.gridRight+'%' || '20%'
     },
     xAxis: [
       {
-        type: 'category',
+        name:props.data?.options?.xName || '',
-        axisLine: {
-          lineStyle: {
-            color: '#DCE2E8'
-          }
-        },
-        axisTick: {
-          show: true
-        },
-        axisLabel: {
-          interval: 0,
-          textStyle: {
-            color: '#fff'
-          },
-          // 默认x轴字体大小
-          fontSize: 12,
-          // margin:文字到x轴的距离
-          margin: 3
-        },
-        axisPointer: {
-          label: {
-            padding: [0, 0, 0, 0],
-            margin: 0,
-            // 移入时的字体大小
-            fontSize: 12
-          }
-        },
-        boundaryGap: true
       }
     ],
     yAxis: [
       {
-        type: 'value',
+        name:props.data?.options?.yName || '',
-        axisTick: {
-          show: false
-        },
-        axisLine: {
-          show: true,
-          lineStyle: {
-            color: '#fff'
-          }
-        },
-        axisLabel: {
-          textStyle: {
-            color: '#fff'
-          }
-        },
-        splitLine: {
-          show: false
-        }
       }
     ],
-    series: [
-      {
-        type: 'line',
-        symbolSize: 1,
-        symbol: 'circle',
-        smooth: false,
-        yAxisIndex: 0,
-        showSymbol: false,
-        lineStyle: {
-          width: 1,
-          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-            {
-              offset: 0,
-              color: '#9effff'
-            },
-            {
-              offset: 1,
-              color: '#9E87FF'
-            }
-          ]),
-          shadowColor: 'rgba(158,135,255, 0.3)',
-          shadowBlur: 10,
-          shadowOffsetY: 20
-        },
-        itemStyle: {
-          normal: {
-            color: colorList[0],
-            borderColor: colorList[0]
-          }
-        }
-      }
-    ]
   };
+  console.log(chartOption);
   let xData = [props.inputData?.x1 || []];
   let yData = [props.inputData?.y1 || []];
   let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
@@ -209,12 +232,12 @@ onMounted(() => {
   chart = echarts.init(chartRef.value, 'macarons', {
     renderer: 'svg'
   });
-  chart.setOption(getOption(), true);
+  chart.setOption(defaultOption, true);
 });
 watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
   if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
 
-    chart && chart.setOption(getOption(), true);
+    chart && chart.setOption(getOption(), false);
   }
 }, { deep: true, immediate: true });
 watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {

src/views/boardGenerate/tool.js

@@ -10,11 +10,11 @@ const getId = (type) => {
 
 const getOption = (e) => {
   if (e === 'line' || e === 'multiLines') {
-    return { title: '', yNames: [] };
+    return { title: '', yNames: [],gridTop:30,gridLeft:5,gridBottom:10,gridRight:10,xName:'',yName:'' };
   } else if (e === 'bar' || e === 'multiBars') {
-    return { title: '', yNames: [] };
+    return { title: '', yNames: [],gridTop:30,gridLeft:5,gridBottom:10,gridRight:10,xName:'',yName:'' };
   } else if (e === 'curve' || e === 'multiCurves') {
-    return { title: '', yNames: [] };
+    return { title: '', yNames: [],gridTop:30,gridLeft:5,gridBottom:10,gridRight:10,xName:'',yName:'' };
   } else if (e === 'pie') {
     return { title: '', yNames: [] };
   } else if (e === 'customBoard') {