From 38bf04fd638554ade23579f7b750cad85fc5e434 Mon Sep 17 00:00:00 2001 From: "zhu.yawen" Date: Tue, 26 Sep 2023 10:25:29 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:3D=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=BA=95=E9=83=A8=E9=98=B4=E5=BD=B1=E9=A2=9C=E8=89=B2=E9=85=8D?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Echarts/3D图/3D分组柱状图.js | 16 +++++- .../Echarts/3D图/3D基础柱状图.js | 12 +++++ data-room-ui/packages/EchartsRender/index.vue | 50 +++++-------------- 3 files changed, 38 insertions(+), 40 deletions(-) diff --git a/data-room-ui/packages/Echarts/3D图/3D分组柱状图.js b/data-room-ui/packages/Echarts/3D图/3D分组柱状图.js index d2301d1d..9723bfd3 100644 --- a/data-room-ui/packages/Echarts/3D图/3D分组柱状图.js +++ b/data-room-ui/packages/Echarts/3D图/3D分组柱状图.js @@ -66,7 +66,7 @@ const setting = [ field: 'seriesCustom_barColor', // 对应options中的字段 optionField: 'seriesCustom.barColor', - value: ['#1370a7', '#4ebebe', '#3864ab', '#9c9c46', '#a6404b', '#ac582c', '#719c33', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'], + value: ['#1370a7', '#4ebebe', '#3864ab', '#9c9c46', '#a6404b', '#ac582c', '#719c33', '#945FB9', '#FF9845', '#1E9493'], tabName: 'custom', groupName: 'graph' }, @@ -90,7 +90,7 @@ const setting = [ field: 'seriesCustom_shadowColor', // 对应options中的字段 optionField: 'seriesCustom.shadowColor', - value: ['#082442', '#0e2e3c', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'], + value: ['#082442', '#0e2e3c', '#082442', '#0e2e3c', '#082442', '#0e2e3c', '#082442', '#0e2e3c', '#082442', '#0e2e3c'], tabName: 'custom', groupName: 'graph' }, @@ -106,6 +106,18 @@ const setting = [ tabName: 'custom', groupName: 'graph' }, + { + label: '底部阴影颜色', + // 设置组件类型 + type: 'colorPicker', + // 字段 + field: 'graphic_children_style_fill', + // 对应options中的字段 + optionField: 'graphic.children.style.fill', + value: '#3f4867', + tabName: 'custom', + groupName: 'graph' + }, { label: '数据标签', type: 'switch', // 设置组件类型 diff --git a/data-room-ui/packages/Echarts/3D图/3D基础柱状图.js b/data-room-ui/packages/Echarts/3D图/3D基础柱状图.js index e11345f4..fedac0b5 100644 --- a/data-room-ui/packages/Echarts/3D图/3D基础柱状图.js +++ b/data-room-ui/packages/Echarts/3D图/3D基础柱状图.js @@ -81,6 +81,18 @@ const setting = [ tabName: 'custom', groupName: 'graph' }, + { + label: '底部阴影颜色', + // 设置组件类型 + type: 'colorPicker', + // 字段 + field: 'graphic_children_style_fill', + // 对应options中的字段 + optionField: 'graphic.children.style.fill', + value: '#3f4867', + tabName: 'custom', + groupName: 'graph' + }, { label: '数据标签', type: 'switch', // 设置组件类型 diff --git a/data-room-ui/packages/EchartsRender/index.vue b/data-room-ui/packages/EchartsRender/index.vue index 4da44175..145a6152 100644 --- a/data-room-ui/packages/EchartsRender/index.vue +++ b/data-room-ui/packages/EchartsRender/index.vue @@ -118,18 +118,19 @@ export default { const chartDom = document.getElementById(this.chatId) this.chart = echarts.init(chartDom) config.option && this.chart.setOption(config.option) - this.observeChart(chartDom, this.chart, config.option) + this.observeChart(chartDom, this.chart) }, /** * 控制底部阴影大小 */ - observeChart (container, myChart, option) { + observeChart (container, myChart) { 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 + const option = this.config.option // 调整长方形的大小 option.graphic.children[0].shape.width = width * 0.9 // 调整多边形的大小 @@ -214,6 +215,10 @@ export default { option.push(beforeChange[index]) } ) + } else if (optionField[0] === 'graphic') { + option.graphic.children.forEach(item => { + item.style.fill = set.value + }) } else { optionField.forEach((field, index) => { if (index === optionField.length - 1) { @@ -232,10 +237,11 @@ export default { return config }, dataFormatting (config, data) { + console.log('config', config); + // config = this.config // 数据返回成功则赋值 if (data.success) { data = data.data - config = this.transformSettingToOption(config, 'data') // 获取到后端返回的数据，有则赋值 const option = config.option const setting = config.setting @@ -248,6 +254,7 @@ export default { } } config.option = this.echartsOptionFormatting(config, data) + config = this.transformSettingToOption(config, 'data') } else { // 数据返回失败则赋前端的模拟数据 // config.option.data = this.plotList?.find(plot => plot.name === config.name)?.option?.data || config?.option?.data @@ -332,7 +339,7 @@ export default { symbolPosition: 'end', z: 15, zlevel: 2, - color: 'rgba(2, 175, 249,1)', + color: '#ffff33', data: seriesData }, { @@ -341,23 +348,6 @@ export default { barGap: '20%', barWidth: barWidth, color: '#115ba6', - // itemStyle: { - // normal: { - // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - // { - // offset: 0, - // color: '#115ba6' - // }, - // { - // offset: 1, - // color: '#1db0dd' - // } - // ]), - // opacity: 0.8, - // shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色 - // shadowBlur: 0 // 阴影模糊值 - // } - // }, label: { show: false @@ -387,11 +377,7 @@ export default { data: shadowData, zlevel: 1, barWidth: barWidth, - itemStyle: { - normal: { - color: 'rgba(9, 44, 76,.8)' - } - } + color: 'rgba(9, 44, 76,.8)' }, { id: 'shadowTopColor' + seriesFieldItem, @@ -437,18 +423,6 @@ export default { item.barWidth = seriesCustom.barWidth } }) - // 颜色配置 - // ids.forEach(id => { - // if (id !== 'barWidth') { - // let index = 0 - // _config.option.series.forEach(item => { - // if (item.id.includes(id)) { - // item.color = _config.option.seriesCustom[id][index] - // index++ - // } - // }) - // } - // }) // 如果是基础柱状图 if (!isGroup) { _config.option.series.forEach(item => { From 1cb1d9fbbff7d7029bd0a75ccb2164eb0857ae8e Mon Sep 17 00:00:00 2001 From: "liu.shiyi" Date: Tue, 26 Sep 2023 11:14:13 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=E6=95=B0=E6=8D=AE=E6=9F=A5=E7=9C=8B?= =?UTF-8?q?=E5=9B=BA=E5=AE=9A=E8=A1=A8=E5=A4=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BigScreenDesign/DataViewDialog/index.vue | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/data-room-ui/packages/BigScreenDesign/DataViewDialog/index.vue b/data-room-ui/packages/BigScreenDesign/DataViewDialog/index.vue index a3054862..508f60aa 100644 --- a/data-room-ui/packages/BigScreenDesign/DataViewDialog/index.vue +++ b/data-room-ui/packages/BigScreenDesign/DataViewDialog/index.vue @@ -17,8 +17,9 @@