From 5044e346704526fd2fdc435e4e63edc7d3ef98f9 Mon Sep 17 00:00:00 2001 From: "zhu.yawen" Date: Fri, 22 Sep 2023 14:03:57 +0800 Subject: [PATCH] =?UTF-8?q?feat:=203D=E5=88=86=E7=BB=84=E6=9F=B1=E7=8A=B6?= =?UTF-8?q?=E5=9B=BE=E6=B7=BB=E5=8A=A0=E5=8F=B3=E4=BE=A7=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Echarts/3D图/3D分组柱状图.js | 574 +++++++++++++++--- .../Echarts/3D图/3D基础柱状图.js | 2 +- data-room-ui/packages/EchartsRender/index.vue | 36 +- 3 files changed, 519 insertions(+), 93 deletions(-) diff --git a/data-room-ui/packages/Echarts/3D图/3D分组柱状图.js b/data-room-ui/packages/Echarts/3D图/3D分组柱状图.js index c4874117..6a7c25d6 100644 --- a/data-room-ui/packages/Echarts/3D图/3D分组柱状图.js +++ b/data-room-ui/packages/Echarts/3D图/3D分组柱状图.js @@ -39,58 +39,437 @@ const setting = [ tabName: 'data' }, { - label: '柱子顶部颜色', - type: 'colorPicker', // 设置组件类型 - field: 'seriesCustom_barTopColor', // 字段 - optionField: 'seriesCustom.barTopColor', // 对应options中的字段 - value: '#2DB1EF', + label: '柱子宽度', + type: 'inputNumber', // 设置组件类型 + field: 'seriesCustom_barWidth', // 字段 + optionField: 'seriesCustom.barWidth', // 对应options中的字段 + value: 20, tabName: 'custom', groupName: 'graph' }, + // { + // label: '柱子顶部颜色', + // type: 'colorPicker', // 设置组件类型 + // field: 'seriesCustom_barTopColor', // 字段 + // optionField: 'seriesCustom.barTopColor', // 对应options中的字段 + // value: '#2DB1EF', + // tabName: 'custom', + // groupName: 'graph' + // }, + // { + // label: '柱子颜色1', + // type: 'colorPicker', // 设置组件类型 + // field: 'seriesCustom_barColor1', // 字段 + // optionField: 'seriesCustom.barColor1', // 对应options中的字段 + // value: '#115ba6', + // tabName: 'custom', + // groupName: 'graph' + // }, + // { + // label: '柱子颜色2', + // type: 'colorPicker', // 设置组件类型 + // field: 'seriesCustom_barColor2', // 字段 + // optionField: 'seriesCustom.barColor2', // 对应options中的字段 + // value: '#1db0dd', + // tabName: 'custom', + // groupName: 'graph' + // }, + // { + // label: '柱子底部颜色', + // type: 'colorPicker', // 设置组件类型 + // field: 'seriesCustom_barBottomColor', // 字段 + // optionField: 'seriesCustom.barBottomColor', // 对应options中的字段 + // value: '#187dcb', + // tabName: 'custom', + // groupName: 'graph' + // }, + // { + // label: '柱子背景顶部颜色', + // type: 'colorPicker', // 设置组件类型 + // field: 'seriesCustom_shadowTopColor', // 字段 + // optionField: 'seriesCustom.shadowTopColor', // 对应options中的字段 + // value: '#142f5a', + // tabName: 'custom', + // groupName: 'graph' + // }, + // { + // label: '柱子背景颜色', + // type: 'colorPicker', // 设置组件类型 + // field: 'seriesCustom_shadowColor', // 字段 + // optionField: 'seriesCustom.shadowColor', // 对应options中的字段 + // value: '#041133', + // tabName: 'custom', + // groupName: 'graph' + // }, { - label: '柱子颜色1', - type: 'colorPicker', // 设置组件类型 - field: 'seriesCustom_barColor1', // 字段 - optionField: 'seriesCustom.barColor1', // 对应options中的字段 - value: '#115ba6', + label: '数据标签', + type: 'switch', // 设置组件类型 + field: 'series_barColor_label_show', // 字段 + optionField: 'series.barColor.label.show', // 对应options中的字段 + value: 0, + active: 1, + inactive: 0, tabName: 'custom', groupName: 'graph' }, { - label: '柱子颜色2', - type: 'colorPicker', // 设置组件类型 - field: 'seriesCustom_barColor2', // 字段 - optionField: 'seriesCustom.barColor2', // 对应options中的字段 - value: '#1db0dd', + label: '数据标签位置', + type: 'select', // 设置组件类型 + field: 'series_barColor_label_position', // 字段 + optionField: 'series.barColor.label.position', // 对应options中的字段 + // 是否多选 + multiple: false, + value: 'inside', tabName: 'custom', + options: [ + { + label: '顶部', + value: 'top' + }, + { + label: '居中', + value: 'inside' + }, + { + label: '底部', + value: 'bottom' + } + ], groupName: 'graph' }, { - label: '柱子底部颜色', + label: '数据标签颜色', type: 'colorPicker', // 设置组件类型 - field: 'seriesCustom_barBottomColor', // 字段 - optionField: 'seriesCustom.barBottomColor', // 对应options中的字段 - value: '#187dcb', + field: 'series_barColor_label_color', // 字段 + optionField: 'series.barColor.label.color', // 对应options中的字段 + value: '#ffffff', tabName: 'custom', groupName: 'graph' }, { - label: '柱子背景顶部颜色', - type: 'colorPicker', // 设置组件类型 - field: 'seriesCustom_shadowTopColor', // 字段 - optionField: 'seriesCustom.shadowTopColor', // 对应options中的字段 - value: '#142f5a', + label: '数据标签大小', + // 设置组件类型 + type: 'inputNumber', + // 字段 + field: 'series_barColor_label_fontSize', + // 对应options中的字段 + optionField: 'series.barColor.label.fontSize', + value: 12, tabName: 'custom', groupName: 'graph' }, + // 网格线 { - label: '柱子背景颜色', - type: 'colorPicker', // 设置组件类型 - field: 'seriesCustom_shadowColor', // 字段 - optionField: 'seriesCustom.shadowColor', // 对应options中的字段 - value: '#041133', + label: '分隔线', + type: 'switch', + field: 'yAxis_splitLine_show', + optionField: 'yAxis.splitLine.show', + value: 0, + active: 1, + inactive: 0, tabName: 'custom', - groupName: 'graph' + groupName: 'grid' + }, + { + label: '宽度', + type: 'inputNumber', + field: 'yAxis_splitLine_lineStyle_width', + optionField: 'yAxis.splitLine.lineStyle.width', + value: 1, + tabName: 'custom', + groupName: 'grid' + }, + { + label: '颜色', + type: 'colorPicker', + field: 'yAxis_splitLine_lineStyle_color', + optionField: 'yAxis.splitLine.lineStyle.color', + value: '#fff', + tabName: 'custom', + groupName: 'grid' + }, + // x轴 xAxis + { + label: '显示', + type: 'switch', + field: 'xAxis_show', + optionField: 'xAxis.show', + value: 0, + active: 1, + inactive: 0, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '轴线显示', + type: 'switch', + field: 'xAxis_axisLine_show', + optionField: 'xAxis.axisLine.show', + value: 0, + active: 1, + inactive: 0, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '轴线颜色', + type: 'colorPicker', + field: 'xAxis_axisLine_lineStyle_color', + optionField: 'xAxis.axisLine.lineStyle.color', + // 是否多选 + multiple: false, + value: '#333', + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签显示', + type: 'switch', + field: 'xAxis_axisLabel_show', + optionField: 'xAxis.axisLabel.show', + value: 1, + active: 1, + inactive: 0, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签颜色', + type: 'colorPicker', + field: 'xAxis_axisLabel_textStyle_color', + optionField: 'xAxis.axisLabel.textStyle.color', + // 是否多选 + multiple: false, + value: '#8C8C8C', + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签大小', + type: 'inputNumber', + field: 'xAxis_axisLabel_textStyle_fontSize', + optionField: 'xAxis.axisLabel.textStyle.fontSize', + value: 14, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签距离', + type: 'inputNumber', + field: 'xAxis_axisLabel_margin', + optionField: 'xAxis.axisLabel.margin', + value: 30, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标题', + type: 'input', + field: 'xAxis_name', + optionField: 'xAxis.name', + value: '', + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标题颜色', + type: 'colorPicker', + field: 'xAxis_nameTextStyle_color', + optionField: 'xAxis.nameTextStyle.color', + // 是否多选 + multiple: false, + value: '#8C8C8C', + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标题大小', + type: 'inputNumber', + field: 'xAxis_nameTextStyle_fontSize', + optionField: 'xAxis.nameTextStyle.fontSize', + value: 12, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标题位置', + type: 'select', + field: 'xAxis_nameLocation', + optionField: 'xAxis.nameLocation', + value: 'start', + tabName: 'custom', + options: [ + { + label: '左', + value: 'start' + }, + { + label: '中', + value: 'center' + }, + { + label: '右', + value: 'end' + }], + groupName: 'xAxis' + }, + // Y轴 yAxis + { + label: '显示', + type: 'switch', + field: 'yAxis_show', + optionField: 'yAxis.show', + value: 1, + active: 1, + inactive: 0, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '轴线显示', + type: 'switch', + field: 'yAxis_axisLine_show', + optionField: 'yAxis.axisLine.show', + value: 1, + active: 1, + inactive: 0, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '轴线颜色', + type: 'colorPicker', + field: 'yAxis_axisLine_lineStyle_color', + optionField: 'yAxis.axisLine.lineStyle.color', + // 是否多选 + multiple: false, + value: '#333', + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '刻度显示', + type: 'switch', + field: 'yAxis_axisTick_show', + optionField: 'yAxis.axisTick.show', + value: 1, + active: 1, + inactive: 0, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '刻度颜色', + type: 'colorPicker', + field: 'yAxis_axisTick_lineStyle_color', + optionField: 'yAxis.axisTick.lineStyle.color', + // 是否多选 + multiple: false, + value: '#fff', + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '刻度宽度', + type: 'inputNumber', + field: 'yAxis_axisTick_lineStyle_width', + optionField: 'yAxis.axisTick.lineStyle.width', + // 是否多选 + multiple: false, + value: 1, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标签显示', + type: 'switch', + field: 'yAxis_axisLabel_show', + optionField: 'yAxis.axisLabel.show', + value: 1, + active: 1, + inactive: 0, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标签颜色', + type: 'colorPicker', + field: 'yAxis_axisLabel_textStyle_color', + optionField: 'yAxis.axisLabel.textStyle.color', + // 是否多选 + multiple: false, + value: '#8C8C8C', + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标签大小', + type: 'inputNumber', + field: 'yAxis_axisLabel_textStyle_fontSize', + optionField: 'yAxis.axisLabel.textStyle.fontSize', + value: 14, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标签距离', + type: 'inputNumber', + field: 'yAxis_axisLabel_margin', + optionField: 'yAxis.axisLabel.margin', + value: 10, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标题', + type: 'input', + field: 'yAxis_name', + optionField: 'yAxis.name', + value: '', + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标题颜色', + type: 'colorPicker', + field: 'yAxis_nameTextStyle_color', + optionField: 'yAxis.nameTextStyle.color', + // 是否多选 + multiple: false, + value: '#8C8C8C', + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标题大小', + type: 'inputNumber', + field: 'yAxis_nameTextStyle_fontSize', + optionField: 'yAxis.nameTextStyle.fontSize', + value: 12, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标题位置', + type: 'select', + field: 'yAxis_nameLocation', + optionField: 'yAxis.nameLocation', + value: 'end', + tabName: 'custom', + options: [ + { + label: '下', + value: 'start' + }, + { + label: '中', + value: 'center' + }, + { + label: '上', + value: 'end' + }], + groupName: 'yAxis' } ] @@ -100,7 +479,6 @@ const optionHandler = '' // 数据处理脚本 const dataHandler = '' -// 图表配置 new Line('domName', option) const xData = ['本年话务总量', '本年人工话务量', '每万客户呼入量', '每万客户呼入量' ] const yData1 = [300, 1230, 425, 1200] @@ -122,7 +500,7 @@ const option = { }, graphic: { type: 'group', - bottom: '8%', + bottom: '5%', left: '10%', z: 100, children: [ @@ -131,7 +509,7 @@ const option = { left: 0, bottom: 0, shape: { - width: 400, + width: 418 * 0.9, height: 10 }, style: { @@ -144,7 +522,7 @@ const option = { bottom: 10, shape: { // 左上、右上、右下、左下 - points: [[40, -50], [360, -50], [400, 0], [0, 0]] + points: [[418 / 10, -320 / 6], [418 - 418 / 6, -320 / 6], [418 * 0.9, 0], [0, 0]] }, style: { fill: '#303256' @@ -154,23 +532,30 @@ const option = { }, xAxis: [ { + show: true, + name: '', type: 'category', data: xData, - // 坐标轴刻度设置:x轴数据展示 + nameTextStyle: { + color: '', + fontSize: 12 + }, + nameLocation: '', + // 坐标轴刻度设置 axisTick: { - show: true, + show: false, alignWithLabel: true }, - // 横坐标颜色 - nameTextStyle: { - color: '#82b0ec' - }, // 是否显示坐标轴的轴线 axisLine: { - show: false + show: false, + lineStyle: { + color: '#333' + } }, // 坐标轴刻度标签 axisLabel: { + show: true, textStyle: { fontSize: 10, color: 'rgb(40, 129, 170)' @@ -179,6 +564,7 @@ const option = { } }, { + show: false, type: 'category', axisLine: { show: false @@ -198,36 +584,62 @@ const option = { data: xData } ], - yAxis: [ - { - show: true, // y轴文本标签显示 - type: 'value', - axisLabel: { - textStyle: { - color: 'rgb(40, 129, 170)' - } - }, - // 分隔线 - splitLine: { - show: false // yAxis.show配置为true时，该配置才有效 + yAxis: { + name: '', + nameTextStyle: { + color: '', + fontSize: 12 + }, + nameLocation: 'end', + show: true, + type: 'value', + axisLabel: { + show: true, + textStyle: { + color: '#fff', + fontSize: 12 }, - // y轴轴线是否显示 - axisLine: { - show: true + margin: 10 + }, + axisTick: { + show: true, + lineStyle: { + color: '#fff', + width: 1 + } + }, + // 分隔线 + splitLine: { + show: false, // yAxis.show配置为true时，该配置才有效 + lineStyle: { + color: '#fff', + width: 1 + } + }, + // y轴轴线是否显示 + axisLine: { + show: true, + lineStyle: { + color: '#fff' } } - ], + }, seriesCustom: { - barTopColor: '#2DB1EF', - barBottomColor: '#187dcb', - barColor1: '#115ba6', - barColor2: '#1db0dd', - shadowColor: '#041133', - shadowTopColor: '#142f5a' + barWidth: 30, + // 顶部菱形颜色 + barTopColor: ['#2DB1EF'], + // 底部菱形颜色 + barBottomColor: ['#187dcb'], + // 柱子颜色 + barColor: ['#1db0dd'], + // 阴影柱子颜色 + shadowColor: ['#041133'], + // 阴影柱子顶部颜色 + shadowTopColor: ['#142f5a'] }, series: [ { - name: 'y1柱子顶部', + id: 'barTopColor1', type: 'pictorialBar', tooltip: { show: false }, symbol: 'diamond', @@ -240,7 +652,7 @@ const option = { data: yData1 }, { - name: 'y2柱子顶部', + id: 'barTopColor2', type: 'pictorialBar', tooltip: { show: false }, symbol: 'diamond', @@ -253,10 +665,10 @@ const option = { data: yData2 }, { - name: 'y1', + id: ' barColor1', type: 'bar', barGap: '20%', - 30: 30, + barWidth: 30, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ @@ -275,17 +687,19 @@ const option = { } }, label: { - show: false + show: true, + position: 'inside', + color: '#fff' }, zlevel: 2, z: 12, data: yData1 }, { - name: 'y2', + id: 'barColor2', type: 'bar', // barGap: '60%', - 30: 30, + barWidth: 30, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ @@ -304,14 +718,16 @@ const option = { } }, label: { - show: false + show: true, + position: 'inside', + color: '#fff' }, zlevel: 2, z: 12, data: yData2 }, { - name: 'y1柱子底部', + id: 'barBottomColor1', type: 'pictorialBar', tooltip: { show: false }, symbol: 'diamond', @@ -323,7 +739,7 @@ const option = { data: yData1 }, { - name: 'y2柱子底部', + id: 'barBottomColor2', type: 'pictorialBar', tooltip: { show: false }, symbol: 'diamond', @@ -335,14 +751,14 @@ const option = { data: yData2 }, { - name: '背景柱子1', + id: 'shadowColor1', type: 'bar', tooltip: { show: false }, xAxisIndex: 1, barGap: '20%', data: maxData1, zlevel: 1, - 30: 30, + barWidth: 30, itemStyle: { normal: { color: 'rgba(9, 44, 76,.8)' @@ -350,14 +766,14 @@ const option = { } }, { - name: '背景柱子2', + id: 'shadowColor2', type: 'bar', tooltip: { show: false }, xAxisIndex: 1, barGap: '20%', data: maxData2, zlevel: 1, - 30: 30, + barWidth: 30, itemStyle: { normal: { color: 'rgba(16, 56, 70,.8)' @@ -365,7 +781,7 @@ const option = { } }, { - name: 'y1背景柱子顶部', + id: 'shadowTopColor1', type: 'pictorialBar', tooltip: { show: false }, symbol: 'diamond', @@ -378,7 +794,7 @@ const option = { data: maxData1 }, { - name: 'y2背景柱子顶部', + id: 'shadowTopColor2', type: 'pictorialBar', tooltip: { show: false }, symbol: 'diamond', diff --git a/data-room-ui/packages/Echarts/3D图/3D基础柱状图.js b/data-room-ui/packages/Echarts/3D图/3D基础柱状图.js index 72a8a45e..e11345f4 100644 --- a/data-room-ui/packages/Echarts/3D图/3D基础柱状图.js +++ b/data-room-ui/packages/Echarts/3D图/3D基础柱状图.js @@ -86,7 +86,7 @@ const setting = [ type: 'switch', // 设置组件类型 field: 'series_barColor_label_show', // 字段 optionField: 'series.barColor.label.show', // 对应options中的字段 - value: 0, + value: 1, active: 1, inactive: 0, tabName: 'custom', diff --git a/data-room-ui/packages/EchartsRender/index.vue b/data-room-ui/packages/EchartsRender/index.vue index 9b36211b..ba92cbd3 100644 --- a/data-room-ui/packages/EchartsRender/index.vue +++ b/data-room-ui/packages/EchartsRender/index.vue @@ -195,29 +195,39 @@ export default { } }) } else if (optionField[0] === 'series') { - // 存储要修改的series对象 - let changeObject = {} - // 存储改变后的series对象 - let changedObject = {} + let changeObject = [] + let beforeChange = [] + // 如果要配置数据标签相关信息 optionField.forEach((field, index) => { if (index === 0) { option = option[field] } else if (index === 1) { - // 根据id找到对应的type - changeObject = option.find(obj => obj.id === field) - changedObject = changeObject - option = option.filter(obj => obj.id !== field) + // 筛选出需要修改的series对象 + changeObject = option.filter(item => item.id.includes(field)) + beforeChange = [...changeObject] + option = option.filter(item => !(item.id.includes(field))) } else if (index === optionField.length - 1) { - // 数据配置时，必须有值才更新 if ((set.tabName === type && type === 'data' && set.value) || (set.tabName === type && type === 'custom')) { - changeObject[field] = set.value + changeObject.map(item => { + item[field] = set.value + }) } } else { - changeObject = changeObject[field] + const changeResult = [] + changeObject.forEach(item => { + const result = { ...item[field] } + changeResult.push(result) + }) + changeObject = [...changeResult] } }) - changeObject = { ...changeObject, ...changedObject } - option.push(changeObject) + // 合并修改后的series对象 + changeObject.forEach( + (item, index) => { + beforeChange[index].label = _.cloneDeep(item) + option.push(beforeChange[index]) + } + ) } else { optionField.forEach((field, index) => { if (index === optionField.length - 1) {