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

2 years ago · 4e5f7be43a
parent bdc5f0ea5a
commit 4e5f7be43a
7 changed files with 95 additions and 14 deletions
--- a/data-room-ui/packages/BigScreenDesign/DataViewDialog/index.vue
+++ b/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
--- a/data-room-ui/packages/BigScreenDesign/PageDesignTop.vue
+++ b/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)
        }
--- a/data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue
+++ b/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">
--- a/data-room-ui/packages/Echarts/3D图/3D固定柱状图.js
+++ b/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',
--- a/data-room-ui/packages/EchartsRender/index.vue
+++ b/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 }
--- a/data-room-ui/packages/js/store/actions.js
+++ b/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) {
--- a/data-room-ui/packages/js/utils/themeFormatting.js
+++ b/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)) {