修改看板配置

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,10 +49,9 @@ const props = defineProps({
 const chartRef = ref();
 let chart = null;
 const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
-const getOption = () => {
-  const chartOption = {
+const defaultOption= {
   title: {
-      text: props.data.options.title || '设备运行数量',
+    text: props.data.options.title || '',
     textStyle: {
       fontSize: 12,
       fontWeight: 400,
@@ -94,11 +93,14 @@ const getOption = () => {
     extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
   },
   grid: {
-      top: '30%',
-      bottom: '10%'
+    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: {
@@ -113,16 +115,13 @@ const getOption = () => {
         textStyle: {
           color: '#fff'
         },
-          // 默认x轴字体大小
         fontSize: 12,
-          // margin:文字到x轴的距离
         margin: 3
       },
       axisPointer: {
         label: {
           padding: [0, 0, 0, 0],
           margin: 0,
-            // 移入时的字体大小
           fontSize: 12
         }
       },
@@ -131,6 +130,7 @@ const getOption = () => {
   ],
   yAxis: [
     {
+      name:props.data?.options?.yName || '',
       type: 'value',
       axisTick: {
         show: false
@@ -183,7 +183,30 @@ const getOption = () => {
       }
     }
   ]
+}
+const getOption = () => {
+  const chartOption = {
+    title: {
+      text: props.data.options.title || '',
+    },
+    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 || '',
+      }
+    ],
+    yAxis: [
+      {
+        name:props.data?.options?.yName || '',
+      }
+    ],
   };
+  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') {