fix:3d组件可预览可保存

data-room-ui/packages/BigScreenDesign/DataViewDialog/index.vue

@@ -106,7 +106,7 @@ export default {
     getDataList (config) {
       this.loading = true
       // 如果是G2组件则需要从option里面取数据
-      if (['customComponent', 'remoteComponent'].includes(config.type) && (!config.dataSource.businessKey)) {
+      if (['customComponent', 'remoteComponent', 'echartsComponent'].includes(config.type) && (!config.dataSource.businessKey)) {
         this.getDataByOption(config)
         this.fieldsFormat()
         this.loading = false

data-room-ui/packages/BigScreenDesign/PageDesignTop.vue

@@ -458,7 +458,7 @@ export default {
 
       const newChartList = chartList?.map((chart) => {
         // 如果是自定义组件，需要将option转换为json字符串，因为其中可能有函数
-        if (['customComponent', 'remoteComponent'].includes(chart.type)) {
+        if (['customComponent', 'remoteComponent', 'echartsComponent'].includes(chart.type)) {
           // chart.option.data = []
           chart.option = stringifyObjectFunctions(chart.option)
         }

data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue

@@ -41,7 +41,7 @@
           </div>
         </div>
         <div
-          v-if="['customComponent','marquee'].includes(config.type)"
+          v-if="['customComponent','marquee', 'echartsComponent'].includes(config.type)"
           class="data-setting-data-box"
         >
           <div class="lc-field-head">

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

@@ -46,6 +46,60 @@ const setting = [
     multiple: false,
     value: '',
     tabName: 'data'
+  },
+  {
+    label: '柱子顶部颜色',
+    type: 'colorPicker', // 设置组件类型
+    field: 'seriesCustom_barTopColor', // 字段
+    optionField: 'seriesCustom.barTopColor', // 对应options中的字段
+    value: '#2DB1EF',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '柱子颜色1',
+    type: 'colorPicker', // 设置组件类型
+    field: 'seriesCustom_barColor1', // 字段
+    optionField: 'seriesCustom.barColor1', // 对应options中的字段
+    value: '#115ba6',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '柱子颜色2',
+    type: 'colorPicker', // 设置组件类型
+    field: 'seriesCustom_barColor2', // 字段
+    optionField: 'seriesCustom.barColor2', // 对应options中的字段
+    value: '#1db0dd',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '柱子底部颜色',
+    type: 'colorPicker', // 设置组件类型
+    field: 'seriesCustom_barBottomColor', // 字段
+    optionField: 'seriesCustom.barBottomColor', // 对应options中的字段
+    value: '#187dcb',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '柱子背景顶部颜色',
+    type: 'colorPicker', // 设置组件类型
+    field: 'seriesCustom_shadowColor', // 字段
+    optionField: 'seriesCustom.shadowColor', // 对应options中的字段
+    value: '#041133',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '柱子背景颜色',
+    type: 'colorPicker', // 设置组件类型
+    field: 'seriesCustom_shadowTopColor', // 字段
+    optionField: 'seriesCustom.shadowTopColor', // 对应options中的字段
+    value: '#142f5a',
+    tabName: 'custom',
+    groupName: 'graph'
   }
 ]
 
@@ -170,7 +224,16 @@ const option = {
       }
     }
   ],
+  seriesCustom: {
+    barTopColor: '#2DB1EF',
+    barBottomColor: '#187dcb',
+    barColor1: '#115ba6',
+    barColor2: '#1db0dd',
+    shadowColor: '#041133',
+    shadowTopColor: '#142f5a'
+  },
   series: [
+    // 顶部
     {
       type: 'pictorialBar', // 象形柱图
       symbol: 'diamond',
@@ -191,6 +254,7 @@ const option = {
       color: '#2DB1EF',
       data: yData
     },
+    // 底部
     {
       type: 'pictorialBar',
       symbol: 'diamond',
@@ -201,6 +265,7 @@ const option = {
       color: '#187dcb',
       data: yData
     },
+    // 柱子
     {
       type: 'bar',
       barWidth: 30,
@@ -224,13 +289,13 @@ const option = {
       },
       data: yData
     },
+    // 阴影柱子
     {
       type: 'bar',
       barWidth: 30,
       barGap: '-100%',
       itemStyle: {
         normal: {
-          color: '#041133',
           opacity: 0.8,
           shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
           shadowBlur: 0 // 阴影模糊值
@@ -239,8 +304,10 @@ const option = {
       label: {
         show: false
       },
+      color: '#041133',
       data: maxData
     },
+    // 阴影顶部
     {
       type: 'pictorialBar', // 象形柱图
       symbol: 'diamond',

data-room-ui/packages/EchartsRender/index.vue

@@ -317,6 +317,7 @@ export default {
       } else {
         option.series = [
           {
+            id: 'barTopColor', // 用于区分是图表的什么部分
             type: 'pictorialBar', // 象形柱图
             symbol: 'diamond',
             symbolOffset: [0, '-50%'], // 上部菱形
@@ -333,20 +334,22 @@ export default {
                 color: '#27a7ce'
               }
             },
-            color: '#2DB1EF',
+            color: option.seriesCustom.barTopColor,
             data: yData
           },
           {
+            id: 'barBottomColor', // 用于区分是图表的什么部分
             type: 'pictorialBar',
             symbol: 'diamond',
             symbolSize: [30, 15],
             symbolOffset: ['0%', '50%'], // 下部菱形
             // symbolOffset: [0, 7], // 下部椭圆
             z: 12,
-            color: '#187dcb',
+            color: option.seriesCustom.barBottomColor,
             data: yData
           },
           {
+            id: 'barColor', // 用于区分是图表的什么部分
             type: 'bar',
             barWidth: 30,
             z: 10,
@@ -355,11 +358,11 @@ export default {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   {
                     offset: 0,
-                    color: '#115ba6'
+                    color: option.seriesCustom.barColor1
                   },
                   {
                     offset: 1,
-                    color: '#1db0dd'
+                    color: option.seriesCustom.barColor2
                   }
                 ]),
                 opacity: 0.8,
@@ -370,12 +373,13 @@ export default {
             data: yData
           },
           {
+            id: 'shadowColor', // 用于区分是图表的什么部分
             type: 'bar',
             barWidth: 30,
             xAxisIndex: 1,
             itemStyle: {
               normal: {
-                color: '#041133',
+                color: option.seriesCustom.shadowColor,
                 opacity: 0.8,
                 shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
                 shadowBlur: 0 // 阴影模糊值
@@ -390,6 +394,7 @@ export default {
             data: shadowData
           },
           {
+            id: 'shadowTopColor', // 用于区分是图表的什么部分
             type: 'pictorialBar', // 象形柱图
             xAxisIndex: 1,
             symbol: 'diamond',
@@ -407,7 +412,7 @@ export default {
                 color: '#27a7ce'
               }
             },
-            color: '#142f5a',
+            color: option.seriesCustom.shadowTopColor,
             tooltip: {
               show: false
             },
@@ -417,6 +422,15 @@ export default {
       }
       return option
     },
+    // 对series里面的样式进行配置
+    seriesStyle (config) {
+      // 如果
+      for (const item of config.option.seriesCustom) {
+        if (item.id === 'shadowTopColor') {
+          item.color = config.seriesCustom.shadowTopColor
+        }
+      }
+    },
     // 组件的样式改变，返回改变后的config
     changeStyle (config, isUpdateTheme) {
       config = { ...this.config, ...config }

data-room-ui/packages/js/store/actions.js

@@ -16,7 +16,7 @@ export default {
         // 兼容边框配置
         data.chartList.forEach((item) => {
           if (!item.border) {
-            item.border={type:'',titleHeight:60,fontSize:30,isTitle:true,paddingTop:10}
+            item.border = { type: '', titleHeight: 60, fontSize: 30, isTitle: true, paddingTop: 10 }
           }
         })
         const pageInfo = handleResData(data)
@@ -84,7 +84,7 @@ export function handleResData (data) {
   pageInfo.pageConfig.refreshConfig = pageInfo.pageConfig.refreshConfig || []
   let originalConfig = {}
   pageInfo.chartList.forEach((chart) => {
-    if (!['customComponent', 'remoteComponent'].includes(chart.type)) {
+    if (!['customComponent', 'remoteComponent', 'echartsComponent'].includes(chart.type)) {
       originalConfig = { option: { ...setModules[chart.type] }, ...dataModules[chart.type] }
       // 如果没有版本号，或者版本号修改了则需要进行旧数据兼容
       if ((!chart.version) || chart.version !== originalConfig.version) {

data-room-ui/packages/js/utils/themeFormatting.js

@@ -13,7 +13,7 @@ export function settingToTheme (config, type) {
     const theme = { dark: { ...config?.theme?.dark }, light: { ...config?.theme?.light } }
     // 根据组件的type来判断主题的转化方式
     // 如果是g2组件或者远程组件
-    if (['customComponent', 'remoteComponent'].includes(config.type)) {
+    if (['customComponent', 'remoteComponent', 'echartsComponent'].includes(config.type)) {
       config.setting.forEach((setItem) => {
         if (['gradual', 'colorPicker', 'colorSelect'].includes(setItem.type)) {
           theme[type][setItem.field] = setItem.value
@@ -75,7 +75,7 @@ function chartThemeToSetting (chart, type) {
   chart.option.theme = type === 'dark' ? 'transparent' : 'light'
   if (chart.theme && chart.theme[type]) {
     // 如果是g2组件或者远程组件
-    if (['customComponent', 'remoteComponent'].includes(chart.type)) {
+    if (['customComponent', 'remoteComponent', 'echartsComponent'].includes(chart.type)) {
       for (const item of chart.setting) {
         // 检查 obj 中是否存在与 item.field 相对应的属性
         if (Object.prototype.hasOwnProperty.call(chart.theme[type], item.field)) {