From 11c56eabe45cffba7f40f09a0cbc88f30fba98e5 Mon Sep 17 00:00:00 2001 From: 13713575202 <1345916905@qq.com> Date: Thu, 22 May 2025 15:37:05 +0800 Subject: [PATCH 1/5] xiabin --- .../components/custom-echart-bar/index.vue | 118 +++++++++--------- .../business/components/businessThere.vue | 7 +- 2 files changed, 66 insertions(+), 59 deletions(-) diff --git a/new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue b/new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue index d1b5e37..38fcc69 100644 --- a/new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue +++ b/new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue @@ -43,34 +43,34 @@ export default { const chartRef = ref(null); const { setOptions, getInstance, startAutoPlay } = useEcharts(chartRef); let option = reactive({ - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - label: { - show: true, - backgroundColor: '#333', - }, - }, - }, - legend: { - top: 30, - }, - grid: { - top: 60, - }, - xAxis: { - type: 'category', - data: [], - }, - yAxis: { - type: 'value', - }, - series: [], - isHorizontal: { - type: Boolean, - default: false, - }, + // tooltip: { + // trigger: 'axis', + // axisPointer: { + // type: 'shadow', + // label: { + // show: true, + // backgroundColor: '#333', + // }, + // }, + // }, + // legend: { + // top: 30, + // }, + // grid: { + // top: 60, + // }, + // xAxis: { + // type: 'category', + // data: [], + // }, + // yAxis: { + // type: 'value', + // }, + // series: [], + // isHorizontal: { + // type: Boolean, + // default: false, + // }, }); watchEffect(() => { @@ -78,38 +78,40 @@ export default { }); function initCharts() { - if (props.option) { + if (props.option && props.option.grid.top == '15%') { Object.assign(option, cloneDeep(props.option)); - } - let typeArr = Array.from(new Set(props.chartData.map((item) => item.type))); - let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name))); - let seriesData = []; - typeArr.forEach((type, index) => { - const barStyle = props.option?.barStyle ?? {}; - let obj = { name: type, type: props.type, ...barStyle }; - let data = []; - xAxisData.forEach((x) => { - let dataArr = props.chartData.filter((item) => type === item.type && item.name == x); - if (dataArr && dataArr.length > 0) { - data.push(dataArr[0].value); - } else { - data.push(null); - } - }); - obj['data'] = data; - if (props.option?.color) { - obj.color = props.option?.color[index]; - } - if (props.option.series && props.option.series.length > 0) { - obj.stack = props.option.series[index].stack ? props.option.series[index].stack : ''; - } - seriesData.push(obj); - }); - option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData; - if (props.isHorizontal) { - option.yAxis.data = xAxisData; } else { - option.xAxis.data = []; + Object.assign(option, cloneDeep(props.option)); + let typeArr = Array.from(new Set(props.chartData.map((item) => item.type))); + let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name))); + let seriesData = []; + typeArr.forEach((type, index) => { + const barStyle = props.option?.barStyle ?? {}; + let obj = { name: type, type: props.type, ...barStyle }; + let data = []; + xAxisData.forEach((x) => { + let dataArr = props.chartData.filter((item) => type === item.type && item.name == x); + if (dataArr && dataArr.length > 0) { + data.push(dataArr[0].value); + } else { + data.push(null); + } + }); + obj['data'] = data; + if (props.option?.color) { + obj.color = props.option?.color[index]; + } + if (props.option.series && props.option.series.length > 0) { + obj.stack = props.option.series[index].stack ? props.option.series[index].stack : ''; + } + seriesData.push(obj); + }); + option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData; + if (props.isHorizontal) { + option.yAxis.data = xAxisData; + } else { + option.xAxis.data = []; + } } console.log(option); setOptions(option); diff --git a/new-digital-agriculture-screen/src/views/business/components/businessThere.vue b/new-digital-agriculture-screen/src/views/business/components/businessThere.vue index 0c14aee..1fcb058 100644 --- a/new-digital-agriculture-screen/src/views/business/components/businessThere.vue +++ b/new-digital-agriculture-screen/src/views/business/components/businessThere.vue @@ -72,6 +72,11 @@ const series = types.map((type, idx) => { borderRadius: 4, formatter: '{@value}万亩', z: 100, + normal: { + show: true, + position: 'inside', + formatter: '{c}%', + }, }, emphasis: { focus: 'series', @@ -112,7 +117,7 @@ const state = reactive({ }, yAxis: { type: 'category', // 分类轴（横向条形图的标签） - data: towns, // 分类数据放在 yAxis + data: [120, 230, 152, 136, 145, 17], // 分类数据放在 yAxis axisTick: { show: false }, // 隐藏刻度线 }, color: colors, From f62526a22b6b081bb3f2e08e7ac1e16ab3078aba Mon Sep 17 00:00:00 2001 From: "2090205686@qq.com" Date: Thu, 22 May 2025 15:40:33 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E4=BA=A7=E5=87=BA=E5=93=81=E7=AE=A1?= =?UTF-8?q?=E7=90=86=E9=A1=B5=E9=9D=A2=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/custom-echart-bar/index.vue | 13 +- .../src/styles/common/define.scss | 2 - .../views/entities/components/valueCharts.vue | 119 +++++++++++++++--- .../src/views/land/components/landOne.vue | 1 + 4 files changed, 111 insertions(+), 24 deletions(-) diff --git a/new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue b/new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue index d1b5e37..1e34cdf 100644 --- a/new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue +++ b/new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue @@ -33,10 +33,16 @@ export default { type: Boolean, default: false, }, + // 是否展示高亮圈圈 showMarkPoint: { type: Boolean, default: false, }, + // 是否堆叠展示 + isHorizontal: { + type: Boolean, + default: false, + }, }, emits: ['click'], setup(props, { emit }) { @@ -67,10 +73,6 @@ export default { type: 'value', }, series: [], - isHorizontal: { - type: Boolean, - default: false, - }, }); watchEffect(() => { @@ -108,8 +110,9 @@ export default { option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData; if (props.isHorizontal) { option.yAxis.data = xAxisData; - } else { option.xAxis.data = []; + } else { + option.xAxis.data = xAxisData; } console.log(option); setOptions(option); diff --git a/new-digital-agriculture-screen/src/styles/common/define.scss b/new-digital-agriculture-screen/src/styles/common/define.scss index c08d1cc..dffc95c 100644 --- a/new-digital-agriculture-screen/src/styles/common/define.scss +++ b/new-digital-agriculture-screen/src/styles/common/define.scss @@ -11,8 +11,6 @@ .custom-tooltip-container{ border-radius: 8px !important; - padding: 6px 16px 6px 8px !important; - background-color: rgba(0,0,0,0.7) !important; backdrop-filter: blur(8px) !important; & span{ width: 8px !important; diff --git a/new-digital-agriculture-screen/src/views/entities/components/valueCharts.vue b/new-digital-agriculture-screen/src/views/entities/components/valueCharts.vue index 397fe75..8f990d7 100644 --- a/new-digital-agriculture-screen/src/views/entities/components/valueCharts.vue +++ b/new-digital-agriculture-screen/src/views/entities/components/valueCharts.vue @@ -16,6 +16,15 @@ const props = defineProps({ }, }); +let values = reactive([]); +const getValue = (dataList) => { + let arr = []; + for (let i = 0; i < dataList.length; i++) { + arr.push(dataList[i].value); + } + return arr; +}; + const state = reactive({ data: [], option: { @@ -45,10 +54,10 @@ const state = reactive({ extraCssText: 'backdrop-filter: blur(8px);', }, barStyle: { - barWidth: 10, + barWidth: 14, itemStyle: { - borderWidth: 10, - borderRadius: [8, 8, 8, 8], // 设置柱子的圆角半径 + borderWidth: 14, + borderRadius: [10, 10, 10, 10], // 设置柱子的圆角半径 }, color: { type: 'linear', @@ -86,25 +95,100 @@ const state = reactive({ show: false, }, }, - yAxis: { - type: 'category', - data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'], - axisTick: { - show: false, + yAxis: [ + { + type: 'category', + data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'], + axisTick: { + show: false, + }, + splitLine: { + show: false, + }, + axisLine: { + show: false, + }, }, - splitLine: { - show: false, + { + // 右侧数量 + type: 'category', + inverse: true, + offset: 10, + axisTick: 'none', + axisLine: 'none', + show: true, + axisLabel: { + textStyle: { + color: '#ffffff', + fontSize: '16', + }, + formatter: function (value) { + let str = '{title|' + value + '吨}'; + return str; + }, + rich: { + title: { + color: '#fff', + fontSize: 16, + }, + }, + }, + data: [12000, 8000, 6000, 4000, 3500], }, - axisLine: { - show: false, - }, - }, + ], series: [ { + name: '值', type: 'bar', - // barWidth: '40%', // 设置柱的宽度 - // barMinHeight: 2, // 设置柱的最小高度 - // barGap: '20%', // 设置柱之间的间隙 + zlevel: 1, + barBorderRadius: 10, + itemStyle: { + borderRadius: [10, 10, 10, 10], + color: 'rgba(100, 200, 255, 0.3)', + }, + backgroundStyle: { + color: 'rgba(100, 200, 255, 0.3)', + borderRadius: [10, 10, 10, 10], // 必须与barBorderRadius保持一致 + }, + barWidth: 20, + data: values, + label: { + position: [0, -16], + align: 'left', + show: true, + formatter: (params) => { + return params.name; + }, + }, + barMaxWidth: 40, + markLine: { + label: { + color: '#26a69a', + }, + }, + }, + { + name: '背景', + type: 'bar', + barWidth: 20, + barGap: '-100%', + data: [], + barBorderRadius: 30, + itemStyle: { + normal: { + color: 'rgba(105,131,242,.3)', + borderRadius: 10, + }, + }, + label: { + show: false, + }, + barMaxWidth: 40, + markLine: { + label: { + color: '#26a69a', + }, + }, }, ], }, @@ -148,6 +232,7 @@ const loadData = (val) => { } } } + values = getValue(state.data); console.log(val); }; diff --git a/new-digital-agriculture-screen/src/views/land/components/landOne.vue b/new-digital-agriculture-screen/src/views/land/components/landOne.vue index 8c7cf27..b510852 100644 --- a/new-digital-agriculture-screen/src/views/land/components/landOne.vue +++ b/new-digital-agriculture-screen/src/views/land/components/landOne.vue @@ -23,6 +23,7 @@ const state = reactive({ containLabel: true, }, tooltip: { + show: true, trigger: 'axis', axisPointer: { type: 'shadow', From 07dbd6398d4e51a7d521191ebdf3cf26764f4290 Mon Sep 17 00:00:00 2001 From: 13713575202 <1345916905@qq.com> Date: Thu, 22 May 2025 15:47:44 +0800 Subject: [PATCH 3/5] xiabin --- .../components/custom-echart-bar/index.vue | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue b/new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue index 904f370..953d518 100644 --- a/new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue +++ b/new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue @@ -88,37 +88,37 @@ export default { Object.assign(option, cloneDeep(props.option)); } else { Object.assign(option, cloneDeep(props.option)); - } - let typeArr = Array.from(new Set(props.chartData.map((item) => item.type))); - let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name))); - let seriesData = []; - typeArr.forEach((type, index) => { - const barStyle = props.option?.barStyle ?? {}; - let obj = { name: type, type: props.type, ...barStyle }; - let data = []; - xAxisData.forEach((x) => { - let dataArr = props.chartData.filter((item) => type === item.type && item.name == x); - if (dataArr && dataArr.length > 0) { - data.push(dataArr[0].value); - } else { - data.push(null); + let typeArr = Array.from(new Set(props.chartData.map((item) => item.type))); + let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name))); + let seriesData = []; + typeArr.forEach((type, index) => { + const barStyle = props.option?.barStyle ?? {}; + let obj = { name: type, type: props.type, ...barStyle }; + let data = []; + xAxisData.forEach((x) => { + let dataArr = props.chartData.filter((item) => type === item.type && item.name == x); + if (dataArr && dataArr.length > 0) { + data.push(dataArr[0].value); + } else { + data.push(null); + } + }); + obj['data'] = data; + if (props.option?.color) { + obj.color = props.option?.color[index]; } + if (props.option.series && props.option.series.length > 0) { + obj.stack = props.option.series[index].stack ? props.option.series[index].stack : ''; + } + seriesData.push(obj); }); - obj['data'] = data; - if (props.option?.color) { - obj.color = props.option?.color[index]; + option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData; + if (props.isHorizontal) { + option.yAxis.data = xAxisData; + option.xAxis.data = []; + } else { + option.xAxis.data = xAxisData; } - if (props.option.series && props.option.series.length > 0) { - obj.stack = props.option.series[index].stack ? props.option.series[index].stack : ''; - } - seriesData.push(obj); - }); - option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData; - if (props.isHorizontal) { - option.yAxis.data = xAxisData; - option.xAxis.data = []; - } else { - option.xAxis.data = xAxisData; } console.log(option); setOptions(option); From 304be8b129314109e5f0e346fea8036a30e7f175 Mon Sep 17 00:00:00 2001 From: "2090205686@qq.com" Date: Thu, 22 May 2025 16:10:22 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=E6=94=BF=E5=8A=A1=E4=BA=91=E6=99=BA?= =?UTF-8?q?=E6=85=A7=E5=A4=A7=E5=B1=8F-=E9=83=A8=E5=88=86=E7=BB=86?= =?UTF-8?q?=E8=8A=82=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business/components/businessThere.vue | 18 +++++++++++------- .../src/views/land/components/basicInfo.vue | 11 ++++++----- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/new-digital-agriculture-screen/src/views/business/components/businessThere.vue b/new-digital-agriculture-screen/src/views/business/components/businessThere.vue index 1fcb058..5e6f8f3 100644 --- a/new-digital-agriculture-screen/src/views/business/components/businessThere.vue +++ b/new-digital-agriculture-screen/src/views/business/components/businessThere.vue @@ -57,10 +57,10 @@ const series = types.map((type, idx) => { barGap: '0%', // 强制堆叠布局 itemStyle: { color: colors[idx], - barBorderRadius: 8, + barBorderRadius: 0, shadowColor: colors[idx], // shadowBlur: 8, - shadowOffsetY: -16, + shadowOffsetY: 0, }, label: { // 添加标签配置 @@ -70,16 +70,18 @@ const series = types.map((type, idx) => { backgroundColor: 'rgba(255,255,255,0.7)', // 白色背景 padding: [2, 4], borderRadius: 4, - formatter: '{@value}万亩', z: 100, normal: { show: true, position: 'inside', - formatter: '{c}%', + formatter: '{c}万亩', }, }, + silent: true, // 禁用所有交互效果 + animation: false, // 禁用动画 emphasis: { focus: 'series', + disabled: true, // 禁用高亮效果 }, z: 100 - idx, data: towns.map((town) => { @@ -96,8 +98,10 @@ const state = reactive({ legend: { data: types, textStyle: { - color: '#ccc', + color: '#fff', }, + selectedMode: false, // 禁用图例切换功能 + inactiveColor: '#fff', // 设置非激活状态颜色（保持原色） }, grid: { top: '15%', @@ -117,7 +121,7 @@ const state = reactive({ }, yAxis: { type: 'category', // 分类轴（横向条形图的标签） - data: [120, 230, 152, 136, 145, 17], // 分类数据放在 yAxis + data: towns, // 分类数据放在 yAxis axisTick: { show: false }, // 隐藏刻度线 }, color: colors, @@ -128,7 +132,7 @@ const state = reactive({ axisPointer: { type: 'shadow', }, - backgroundColor: 'rgba(0,0,0,0.6);', + backgroundColor: 'rgba(0,0,0,0);', borderColor: '#35d0c0', borderRadius: 8, formatter: (params) => ` diff --git a/new-digital-agriculture-screen/src/views/land/components/basicInfo.vue b/new-digital-agriculture-screen/src/views/land/components/basicInfo.vue index ae246de..196197f 100644 --- a/new-digital-agriculture-screen/src/views/land/components/basicInfo.vue +++ b/new-digital-agriculture-screen/src/views/land/components/basicInfo.vue @@ -33,26 +33,27 @@ const props = defineProps({ .basic { width: 100%; margin-top: 10px; - height: 100%; + height: 95%; border: 2px solid #01fefd; border-radius: 16px; backdrop-filter: blur(2px); display: flex; flex-direction: column; - justify-content: space-between; + justify-content: flex-start; color: #ffffff; padding: 20px; .line { display: flex; justify-content: space-between; text-align: left; - line-height: 20px; + line-height: 50px; .title { - font-size: 16px; + font-size: 14px; width: 40%; + color: #ddd; } .values { - font-size: 20px; + font-size: 16px; width: 60%; } } From 5bdde25ceb7eabc8d37152a02f8225c12e76d045 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A7=9A=E4=BF=8A=E6=97=AD?= <398847134@qq.com> Date: Thu, 22 May 2025 16:11:32 +0800 Subject: [PATCH 5/5] =?UTF-8?q?=E7=94=B5=E5=95=86=E5=B9=B3=E5=8F=B0?= =?UTF-8?q?=E5=BC=80=E5=8F=91=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sub-operation-service/index.html | 1 + .../views/ecommerce/components/goodsItem.vue | 25 ++++++--- .../src/views/ecommerce/index.vue | 52 +++++++++++++++++-- 3 files changed, 68 insertions(+), 10 deletions(-) diff --git a/sub-operation-service/index.html b/sub-operation-service/index.html index 47cef74..42ede08 100644 --- a/sub-operation-service/index.html +++ b/sub-operation-service/index.html @@ -4,6 +4,7 @@ + 运营服务 diff --git a/sub-operation-service/src/views/ecommerce/components/goodsItem.vue b/sub-operation-service/src/views/ecommerce/components/goodsItem.vue index 3cb375a..e0884fd 100644 --- a/sub-operation-service/src/views/ecommerce/components/goodsItem.vue +++ b/sub-operation-service/src/views/ecommerce/components/goodsItem.vue @@ -1,11 +1,12 @@ diff --git a/sub-operation-service/src/views/ecommerce/index.vue b/sub-operation-service/src/views/ecommerce/index.vue index 6efe892..93d1110 100644 --- a/sub-operation-service/src/views/ecommerce/index.vue +++ b/sub-operation-service/src/views/ecommerce/index.vue @@ -3,15 +3,25 @@