Browse Source

fix:初步实现3d组件

liu.shiyi 1 year ago
parent
commit
ef8f838664

+ 20 - 0
data-room-ui/packages/Echarts/3D图/3D固定柱状图.js

@@ -114,6 +114,7 @@ const option = {
         show: true,
         show: true,
         alignWithLabel: true
         alignWithLabel: true
       },
       },
+      // 横坐标颜色
       nameTextStyle: {
       nameTextStyle: {
         color: '#82b0ec'
         color: '#82b0ec'
       },
       },
@@ -129,6 +130,25 @@ const option = {
         },
         },
         margin: 30
         margin: 30
       }
       }
+    },
+    {
+      type: 'category',
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      },
+      splitArea: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      data: xData
     }
     }
   ],
   ],
   yAxis: [
   yAxis: [

+ 10 - 54
data-room-ui/packages/EchartsRender/index.vue

@@ -193,59 +193,15 @@ export default {
       const maxY = Math.max(...yData)
       const maxY = Math.max(...yData)
       // 生成阴影柱子的值
       // 生成阴影柱子的值
       const shadowData = Array.from({ length: xField.length }, () => maxY)
       const shadowData = Array.from({ length: xField.length }, () => maxY)
-      option.xAxis[0].data = xData
+      option.xAxis = option.xAxis.map(item => {
+        return {
+          ...item,
+          data: xData
+        }
+      })
       const hasSeries = config.setting.find(item => item.optionField === 'seriesField' && item.value !== '')
       const hasSeries = config.setting.find(item => item.optionField === 'seriesField' && item.value !== '')
       // 判断是否存在分组字段
       // 判断是否存在分组字段
       if (hasSeries) {
       if (hasSeries) {
-        option.xAxis = [
-          {
-            type: 'category',
-            data: xData,
-            // 坐标轴刻度设置:x轴数据展示
-            axisTick: {
-              show: true,
-              alignWithLabel: true
-            },
-            nameTextStyle: {
-              color: '#82b0ec'
-            },
-            // 横坐标颜色
-            nameTextStyle: {
-              color: '#82b0ec'
-            },
-            // 是否显示坐标轴的轴线
-            axisLine: {
-              show: false
-            },
-            // 坐标轴刻度标签
-            axisLabel: {
-              textStyle: {
-                fontSize: 10,
-                color: 'rgb(40, 129, 170)'
-              },
-              margin: 30
-            }
-          },
-          {
-            type: 'category',
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            axisLabel: {
-              show: false
-            },
-            splitArea: {
-              show: false
-            },
-            splitLine: {
-              show: false
-            },
-            data: xData
-          }
-        ]
         const seriesField = config.setting.find(item => item.optionField === 'seriesField')?.value
         const seriesField = config.setting.find(item => item.optionField === 'seriesField')?.value
         const seriesFieldList = [...new Set(data.map(item => item[seriesField]))]
         const seriesFieldList = [...new Set(data.map(item => item[seriesField]))]
         option.series = []
         option.series = []
@@ -253,7 +209,7 @@ export default {
           const seriesData = (data.filter(item => item[seriesField] === seriesFieldItem))?.map(item => item[yField])
           const seriesData = (data.filter(item => item[seriesField] === seriesFieldItem))?.map(item => item[yField])
           const seriesItem = [
           const seriesItem = [
             {
             {
-              name: 'y1柱子顶部',
+              name: seriesFieldItem + '柱子顶部',
               type: 'pictorialBar',
               type: 'pictorialBar',
               tooltip: { show: false },
               tooltip: { show: false },
               symbol: 'diamond',
               symbol: 'diamond',
@@ -296,7 +252,7 @@ export default {
               data: seriesData
               data: seriesData
             },
             },
             {
             {
-              name: 'y1柱子底部',
+              name: seriesFieldItem + '柱子底部',
               type: 'pictorialBar',
               type: 'pictorialBar',
               tooltip: { show: false },
               tooltip: { show: false },
               symbol: 'diamond',
               symbol: 'diamond',
@@ -308,7 +264,7 @@ export default {
               data: seriesData
               data: seriesData
             },
             },
             {
             {
-              name: '背景柱子1',
+              name: seriesFieldItem + '背景柱子',
               type: 'bar',
               type: 'bar',
               tooltip: { show: false },
               tooltip: { show: false },
               xAxisIndex: 1,
               xAxisIndex: 1,
@@ -323,7 +279,7 @@ export default {
               }
               }
             },
             },
             {
             {
-              name: 'y1背景柱子顶部',
+              name: seriesFieldItem + '背景柱子顶部',
               type: 'pictorialBar',
               type: 'pictorialBar',
               tooltip: { show: false },
               tooltip: { show: false },
               symbol: 'diamond',
               symbol: 'diamond',