fix:3d组件添加样式配置

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

@@ -86,21 +86,22 @@ const setting = [
   {
     label: '柱子背景顶部颜色',
     type: 'colorPicker', // 设置组件类型
-    field: 'seriesCustom_shadowColor', // 字段
-    optionField: 'seriesCustom.shadowColor', // 对应options中的字段
-    value: '#041133',
+    field: 'seriesCustom_shadowTopColor', // 字段
+    optionField: 'seriesCustom.shadowTopColor', // 对应options中的字段
+    value: '#142f5a',
     tabName: 'custom',
     groupName: 'graph'
   },
   {
     label: '柱子背景颜色',
     type: 'colorPicker', // 设置组件类型
-    field: 'seriesCustom_shadowTopColor', // 字段
-    optionField: 'seriesCustom.shadowTopColor', // 对应options中的字段
-    value: '#142f5a',
+    field: 'seriesCustom_shadowColor', // 字段
+    optionField: 'seriesCustom.shadowColor', // 对应options中的字段
+    value: '#041133',
     tabName: 'custom',
     groupName: 'graph'
   }
+
 ]
 
 // 配置处理脚本
@@ -235,6 +236,7 @@ const option = {
   series: [
     // 顶部
     {
+      id: 'barTopColor', // 用于区分是图表的什么部分
       type: 'pictorialBar', // 象形柱图
       symbol: 'diamond',
       symbolOffset: [0, '-50%'], // 上部菱形
@@ -256,6 +258,7 @@ const option = {
     },
     // 底部
     {
+      id: 'barBottomColor', // 用于区分是图表的什么部分
       type: 'pictorialBar',
       symbol: 'diamond',
       symbolSize: [30, 15],
@@ -267,6 +270,7 @@ const option = {
     },
     // 柱子
     {
+      id: 'barColor', // 用于区分是图表的什么部分
       type: 'bar',
       barWidth: 30,
       z: 10,
@@ -291,6 +295,7 @@ const option = {
     },
     // 阴影柱子
     {
+      id: 'shadowColor', // 用于区分是图表的什么部分
       type: 'bar',
       barWidth: 30,
       barGap: '-100%',
@@ -309,6 +314,7 @@ const option = {
     },
     // 阴影顶部
     {
+      id: 'shadowTopColor', // 用于区分是图表的什么部分
       type: 'pictorialBar', // 象形柱图
       symbol: 'diamond',
       symbolOffset: [0, '-50%'], // 上部菱形

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

@@ -24,6 +24,7 @@ import plotList, { getCustomPlots } from '../G2Plots/plotList'
 import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
 import _ from 'lodash'
 import * as echarts from 'echarts'
+import CloneDeep from 'lodash-es/cloneDeep'
 
 export default {
   name: 'PlotCustomComponent',
@@ -118,8 +119,8 @@ export default {
      */
     newChart (config) {
       const chartDom = document.getElementById(this.chatId)
-      const myChart = echarts.init(chartDom)
-      config.option && myChart.setOption(config.option)
+      this.chart = echarts.init(chartDom)
+      config.option && this.chart.setOption(config.option)
     },
     /**
      * 注册事件
@@ -424,12 +425,27 @@ export default {
     },
     // 对series里面的样式进行配置
     seriesStyle (config) {
+      const _config = CloneDeep(config)
       // 如果
-      for (const item of config.option.seriesCustom) {
-        if (item.id === 'shadowTopColor') {
-          item.color = config.seriesCustom.shadowTopColor
+      // const ids = Object.keys(config.option.seriesCustom)
+      const ids = ['barTopColor', 'barBottomColor', 'shadowColor', 'shadowTopColor']
+      _config.option.series.forEach((item) => {
+        if (ids.includes(item.id)) {
+          item.color = _config.option.seriesCustom[item.id]
+        } else {
+          item.itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: _config.option.seriesCustom.barColor1
+            },
+            {
+              offset: 1,
+              color: _config.option.seriesCustom.barColor2
+            }
+          ])
         }
-      }
+      })
+      return _config
     },
     // 组件的样式改变，返回改变后的config
     changeStyle (config, isUpdateTheme) {
@@ -446,6 +462,7 @@ export default {
           console.error(e)
         }
       }
+      config = this.seriesStyle(config)
       // 只有样式改变时更新主题配置，切换主题时不需要保存
       if (!isUpdateTheme) {
         config.theme = settingToTheme(_.cloneDeep(config), this.customTheme)
@@ -455,7 +472,7 @@ export default {
         this.changeActiveItemConfig(config)
       }
       if (this.chart) {
-        this.chart.update(config.option)
+        this.chart.setOption(config.option)
       }
       return config
     }