feat:3D固定柱状图添加底部阴影大小自适应

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

@@ -1,14 +1,10 @@
 import * as echarts from 'echarts'
 // 配置版本号
-const version = '2023071001'
-// 分类
-const category = 'Column'
+const version = '2023091901'
 // 标题
 const title = '3D固定柱状图'
-// 类别， new Line()
-const chartType = 'Column'
 // 用于标识，唯一，和文件夹名称一致
-const name = 'FenZuZhuZhuangTu'
+const name = '3DGuDingZhuZhuangTu'
 
 // 右侧配置项
 const setting = [
@@ -96,7 +92,6 @@ const setting = [
     tabName: 'custom',
     groupName: 'graph'
   }
-
 ]
 
 // 配置处理脚本
@@ -107,9 +102,9 @@ const dataHandler = ''
 
 // 图表配置 new Line('domName', option)
 
-const xData = ['本年话务总量', '本年人工话务量', '每万客户呼入量', '本年话务总量', '本年人工话务量', '每万客户呼入量']
-const yData = [300, 1230, 425, 300, 1230, 425]
-const maxData = [1500, 1500, 1500, 1500, 1500, 1500]
+const xData = ['本年话务总量', '本年人工话务量', '每万客户呼入量', '本年话务总量']
+const yData = [300, 1230, 425, 300]
+const maxData = [1500, 1500, 1500, 1500]
 const option = {
   animation: false,
   tooltip: {
@@ -333,10 +328,8 @@ const option = {
   ]
 }
 export default {
-  category,
   version,
   title,
-  chartType,
   name,
   option,
   setting,

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

@@ -74,6 +74,22 @@ export default {
           this.changeStyle(this.config, true)
         }
       }
+    },
+    'config.w': {
+      handler (val) {
+        if (val) {
+          console.log('this.config',this.config);
+          const chartDom = document.getElementById(this.chatId)
+          this.observeChart(chartDom, this.chart, this.config.option)
+        }
+      }
+    },
+    'config.h': {
+      handler (val) {
+        if (val) {
+          this.newChart(this.config)
+        }
+      }
     }
   },
   mounted () {
@@ -117,10 +133,34 @@ export default {
      * 构造chart
      */
     newChart (config) {
+      // console.log('重新渲染图片');
       const chartDom = document.getElementById(this.chatId)
       this.chart = echarts.init(chartDom)
       config.option && this.chart.setOption(config.option)
     },
+    /**
+     * 控制底部阴影大小
+     */
+    observeChart (container, myChart, option) {
+      const resizeObserver = new ResizeObserver(entries => {
+        myChart.resize()
+        // entries[0].contentRect.width:此时监测的盒子的宽度
+        // entries[0].contentRect.height:此时监测的盒子的高度
+        const width = entries[0].contentRect.width
+        const height = entries[0].contentRect.height
+        // 调整长方形的大小
+        option.graphic.children[0].shape.width = width * 0.9
+        // 调整多边形的大小
+        option.graphic.children[1].shape.points = [
+          [width / 10, -height / 6],
+          [width - width / 6, -height / 6],
+          [width * 0.9, 0],
+          [0, 0]
+        ]
+        myChart.setOption(option)
+      })
+      resizeObserver.observe(container)
+    },
     /**
      * 注册事件
      */
@@ -160,6 +200,7 @@ export default {
       return config
     },
     dataFormatting (config, data) {
+      console.log('config', config)
       // 数据返回成功则赋值
       if (data.success) {
         data = data.data
@@ -471,6 +512,7 @@ export default {
     },
     // 组件的样式改变，返回改变后的config
     changeStyle (config, isUpdateTheme) {
+      console.log('組件樣式改變',config)
       config = { ...this.config, ...config }
       config = this.transformSettingToOption(config, 'custom')
       // 这里定义了option和setting是为了保证在执行eval时,optionHandler、dataHandler里面可能会用到，

data-room-ui/packages/Render/RenderCard2.vue

@@ -24,6 +24,7 @@ import pcComponent from 'data-room-ui/js/utils/componentImport'
 import { dataInit, destroyedEvent } from 'data-room-ui/js/utils/eventBus'
 import CustomComponent from '../PlotRender/index.vue'
 import Svgs from '../Svgs/index.vue'
+import EchartsComponent from '../EchartsRender/index.vue'
 import RemoteComponent from 'data-room-ui/RemoteComponents/index.vue'
 import cloneDeep from 'lodash/cloneDeep'
 const components = {}
@@ -39,7 +40,8 @@ export default {
     ...components,
     CustomComponent,
     Svgs,
-    RemoteComponent
+    RemoteComponent,
+    EchartsComponent
   },
   props: {
     // 卡片的属性