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: { // 卡片的属性