From 22e280878d9b257d9d485814eb62adbe12e022b1 Mon Sep 17 00:00:00 2001 From: "zhu.yawen" Date: Tue, 19 Sep 2023 16:04:07 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:3D=E5=9B=BA=E5=AE=9A=E6=9F=B1=E7=8A=B6?= =?UTF-8?q?=E5=9B=BE=E6=B7=BB=E5=8A=A0=E5=BA=95=E9=83=A8=E9=98=B4=E5=BD=B1?= =?UTF-8?q?=E5=A4=A7=E5=B0=8F=E8=87=AA=E9=80=82=E5=BA=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Echarts/3D图/3D固定柱状图.js | 17 +++----- data-room-ui/packages/EchartsRender/index.vue | 42 +++++++++++++++++++ data-room-ui/packages/Render/RenderCard2.vue | 4 +- 3 files changed, 50 insertions(+), 13 deletions(-) diff --git a/data-room-ui/packages/Echarts/3D图/3D固定柱状图.js b/data-room-ui/packages/Echarts/3D图/3D固定柱状图.js index 8df1d9f6..fe022152 100644 --- a/data-room-ui/packages/Echarts/3D图/3D固定柱状图.js +++ b/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, diff --git a/data-room-ui/packages/EchartsRender/index.vue b/data-room-ui/packages/EchartsRender/index.vue index 7e6c9b84..3a1c6917 100644 --- a/data-room-ui/packages/EchartsRender/index.vue +++ b/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里面可能会用到， diff --git a/data-room-ui/packages/Render/RenderCard2.vue b/data-room-ui/packages/Render/RenderCard2.vue index 955cc7a6..972fb9bf 100644 --- a/data-room-ui/packages/Render/RenderCard2.vue +++ b/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: { // 卡片的属性 From 0a86c6705a9011f021a104d9cbed04f21117a8d4 Mon Sep 17 00:00:00 2001 From: "liu.shiyi" Date: Tue, 19 Sep 2023 17:35:45 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=E6=89=A9=E5=A4=A7=E7=94=BB=E5=B8=83?= =?UTF-8?q?=E7=9A=84=E7=BB=84=E4=BB=B6=E6=A1=86=E9=80=89=E8=8C=83=E5=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../packages/BigScreenDesign/MouseSelect/index.vue | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/data-room-ui/packages/BigScreenDesign/MouseSelect/index.vue b/data-room-ui/packages/BigScreenDesign/MouseSelect/index.vue index 043dde26..b1ff02f9 100644 --- a/data-room-ui/packages/BigScreenDesign/MouseSelect/index.vue +++ b/data-room-ui/packages/BigScreenDesign/MouseSelect/index.vue @@ -1,5 +1,6 @@