From 6b04fa30552fc5d024223d55040908a44d3acf7e Mon Sep 17 00:00:00 2001 From: "2090205686@qq.com" Date: Thu, 15 May 2025 15:00:12 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8A=95=E5=85=A5=E5=93=81=E7=9B=91=E7=AE=A1?= =?UTF-8?q?=E5=92=8C=E7=94=9F=E4=BA=A7=E7=BB=8F=E8=90=A5=E4=B8=BB=E4=BD=93?= =?UTF-8?q?(=E6=9C=AA=E5=AE=8C)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 2 - .../custom-echart-column-line/index.vue | 10 ++-- .../custom-echart-hyaline-cake/index.vue | 4 +- .../custom-echart-triangle/index.vue | 46 ++++++++++++------- src/components/subTop.vue | 2 +- src/styles/common/define.scss | 13 ++++++ .../business/components/businessFour.vue | 2 +- src/views/business/components/businessOne.vue | 4 +- .../business/components/businessThere.vue | 4 +- src/views/business/components/businessTwo.vue | 4 +- .../entities/components/categoryCharts.vue | 8 ++-- .../components/entitiesCategoryCharts.vue | 4 +- .../components/entitiesStatistics.vue | 30 ++++++------ src/views/entities/components/hotCharts.vue | 6 +-- src/views/entities/index.vue | 4 +- 15 files changed, 89 insertions(+), 54 deletions(-) diff --git a/components.d.ts b/components.d.ts index 5e2d588..971b418 100644 --- a/components.d.ts +++ b/components.d.ts @@ -42,8 +42,6 @@ declare module 'vue' { CustomScrollTitle: typeof import('./src/components/custom-scroll-title/index.vue')['default'] CustomTableOperate: typeof import('./src/components/custom-table-operate/index.vue')['default'] CustomTableTree: typeof import('./src/components/custom-table-tree/index.vue')['default'] - IndexCo: typeof import('./src/components/custom-echart-line/index-co.vue')['default'] - IndexRe: typeof import('./src/components/new-hyaline-cake/index-re.vue')['default'] NewHyalineCake: typeof import('./src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] diff --git a/src/components/custom-echart-column-line/index.vue b/src/components/custom-echart-column-line/index.vue index 02c91bb..a31a67b 100644 --- a/src/components/custom-echart-column-line/index.vue +++ b/src/components/custom-echart-column-line/index.vue @@ -128,11 +128,11 @@ export default { option.series[1].data = yDataLine.value; option.xAxis.data = xData.value; setOptions(option); - // startAutoPlay({ - // interval: 2000, - // seriesIndex: 0, - // showTooltip: true, - // }); + startAutoPlay({ + interval: 2000, + seriesIndex: 0, + showTooltip: true, + }); getInstance()?.off('click', onClick); getInstance()?.on('click', onClick); } diff --git a/src/components/custom-echart-hyaline-cake/index.vue b/src/components/custom-echart-hyaline-cake/index.vue index 49954f3..1164fa9 100644 --- a/src/components/custom-echart-hyaline-cake/index.vue +++ b/src/components/custom-echart-hyaline-cake/index.vue @@ -183,7 +183,9 @@ export default { const option = Object.assign( { tooltip: { - backgroundColor: 'rgba(18, 55, 85, 0.8);', + // tooltip样式调整添加这个类名 + className: 'custom-tooltip-container', // 自定义父容器类名 + backgroundColor: 'rgba(0,0,0,0.5)', borderColor: '#35d0c0', color: '#fff', position: function (point, params, dom, rect, size) { diff --git a/src/components/custom-echart-triangle/index.vue b/src/components/custom-echart-triangle/index.vue index 7fbb704..77210c1 100644 --- a/src/components/custom-echart-triangle/index.vue +++ b/src/components/custom-echart-triangle/index.vue @@ -56,8 +56,9 @@ export default { zlevel: 1, name: '漏斗图', type: 'funnel', + top: '11%', left: 'center', - width: '28%', + width: '25%', sort: 'ascending', gap: 0, label: { @@ -66,38 +67,51 @@ export default { width: '200px', align: 'right', formatter: function (params) { + if (!params.data.reaVal) return ''; let arr = [`{a|${params.data.name}}`, `{b| ${params.data.reaVal}%}`]; return arr.join('\n'); - // params.data.name + ':' + params.data.reaVal + '%'}; }, rich: { a: { color: '#fff', fontSize: '16px' }, - b: { color: '#05FCC6', fontSize: '16px' }, + b: { color: '#05FCC6', fontSize: '16px', marginTop: '10px' }, }, verticalAlign: 'middle', - padding: [5, 10], // 增加标签内边距 + padding: [5, 6], // 增加标签内边距 }, labelLine: { show: true, - length: 20, - length2: 30, + length: 10, + length2: 50, smooth: true, lineStyle: { - width: 2, + width: 1, color: '#ffffff', opacity: 1, type: 'solid', }, - // 自定义折线路径（从标签到数据点的像素坐标） - // 参数：idx-数据索引, params-包含标签位置信息的对象 - // formatter: function (idx, params) { - // return [ - // [params.labelRect.x, params.labelRect.y], // 起点（标签位置） - // [params.labelRect.x + 20, params.labelRect.y], // 水平线段 - // [params.labelRect.x + 20, params.dataCoord[1]] // 垂直线段 - // ]; - // }, }, + // 添加第二段折线 + // markLine: { + // symbol: 'none', // 隐藏端点 + // lineStyle: { + // type: 'solid', + // color: '#fff', + // width: 1, + // }, + // data: [ + // // 从默认 labelLine 的终点到自定义位置 + // [ + // { + // coord: [50, 50], // 第一段线的终点（需动态计算） + // name: 'Label1', + // }, + // { + // coord: [80, 50], // 第二段线的终点 + // name: 'Label1', + // }, + // ], + // ], + // }, itemStyle: { show: false, borderColor: '#fff', diff --git a/src/components/subTop.vue b/src/components/subTop.vue index ee9e800..188fe75 100644 --- a/src/components/subTop.vue +++ b/src/components/subTop.vue @@ -155,7 +155,7 @@ const handleCommand = (data) => { -webkit-background-clip: text; color: #fff; letter-spacing: 4px; - text-shadow: -2px 0 0 1px #add8f1; + text-shadow: -2px 0 10px #add8f1; width: 100%; padding: 0 36px 0 72px; box-sizing: border-box; diff --git a/src/styles/common/define.scss b/src/styles/common/define.scss index 4f25271..c08d1cc 100644 --- a/src/styles/common/define.scss +++ b/src/styles/common/define.scss @@ -9,6 +9,19 @@ } } +.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; + height: 8px !important; + vertical-align: middle; + margin-top: -4px; + } +} .custom-echarts-tips { color: #fff; } + diff --git a/src/views/business/components/businessFour.vue b/src/views/business/components/businessFour.vue index 47abf05..9adc294 100644 --- a/src/views/business/components/businessFour.vue +++ b/src/views/business/components/businessFour.vue @@ -127,7 +127,7 @@ watch( width: 160px; margin: 0 auto; height: 32px; - line-height: 32px; + line-height: 26px; font-size: 16px; font-weight: 400; text-align: center; diff --git a/src/views/business/components/businessOne.vue b/src/views/business/components/businessOne.vue index b1c2427..0823e1c 100644 --- a/src/views/business/components/businessOne.vue +++ b/src/views/business/components/businessOne.vue @@ -199,7 +199,9 @@ function getPie3D(pieData, internalDiameterRatio) { }, }, tooltip: { - backgroundColor: 'rgba(18, 55, 85, 0.8);', + // tooltip样式调整添加这个类名 + className: 'custom-tooltip-container', // 自定义父容器类名 + backgroundColor: 'rgba(0,0,0,0.5)', borderColor: '#35d0c0', color: '#fff', position: function (point, params, dom, rect, size) { diff --git a/src/views/business/components/businessThere.vue b/src/views/business/components/businessThere.vue index 8569a9b..cce663b 100644 --- a/src/views/business/components/businessThere.vue +++ b/src/views/business/components/businessThere.vue @@ -27,7 +27,9 @@ const state = reactive({ axisPointer: { type: 'shadow', }, - backgroundColor: 'rgba(18, 55, 85, 0.8);', + // tooltip样式调整添加这个类名 + className: 'custom-tooltip-container', // 自定义父容器类名 + backgroundColor: 'rgba(0,0,0,0.5)', borderColor: '#35d0c0', formatter: (data) => { const params = data[0]; diff --git a/src/views/business/components/businessTwo.vue b/src/views/business/components/businessTwo.vue index e882517..8d9005c 100644 --- a/src/views/business/components/businessTwo.vue +++ b/src/views/business/components/businessTwo.vue @@ -30,7 +30,9 @@ const state = reactive({ axisPointer: { type: 'shadow', }, - backgroundColor: 'rgba(18, 55, 85, 0.8);', + // tooltip样式调整添加这个类名 + className: 'custom-tooltip-container', // 自定义父容器类名 + backgroundColor: 'rgba(0,0,0,0.5)', borderColor: '#35d0c0', formatter: (data) => { const params = data[0]; diff --git a/src/views/entities/components/categoryCharts.vue b/src/views/entities/components/categoryCharts.vue index e6e3237..7e654b2 100644 --- a/src/views/entities/components/categoryCharts.vue +++ b/src/views/entities/components/categoryCharts.vue @@ -12,22 +12,22 @@ const data = ref([ { name: ' 企业', value: 10.8, - itemStyle: { color: '#3c5fc4', opacity: 0.8 }, + itemStyle: { color: '#5b7bc7', opacity: 0.8 }, }, { name: ' 合作社', value: 18.4, - itemStyle: { color: '#8fd8ff', opacity: 0.8 }, + itemStyle: { color: '#8ed0f3', opacity: 0.8 }, }, { name: ' 村集体', value: 14.3, - itemStyle: { color: '#55d9a4', opacity: 0.8 }, + itemStyle: { color: '#65be97', opacity: 0.8 }, }, { name: ' 个体', value: 23.7, - itemStyle: { color: '#d2a823', opacity: 0.8 }, + itemStyle: { color: '#f0c94d', opacity: 0.8 }, }, ]); diff --git a/src/views/entities/components/entitiesCategoryCharts.vue b/src/views/entities/components/entitiesCategoryCharts.vue index 751140b..90d3f06 100644 --- a/src/views/entities/components/entitiesCategoryCharts.vue +++ b/src/views/entities/components/entitiesCategoryCharts.vue @@ -31,7 +31,9 @@ const state = reactive({ axisPointer: { type: 'shadow', }, - backgroundColor: 'rgba(18, 55, 85, 0.8);', + // tooltip样式调整添加这个类名 + className: 'custom-tooltip-container', // 自定义父容器类名 + backgroundColor: 'rgba(0,0,0,0.5);', borderColor: '#35d0c0', formatter: (data) => { const params = data[0]; diff --git a/src/views/entities/components/entitiesStatistics.vue b/src/views/entities/components/entitiesStatistics.vue index d80321e..5ebd08b 100644 --- a/src/views/entities/components/entitiesStatistics.vue +++ b/src/views/entities/components/entitiesStatistics.vue @@ -22,7 +22,7 @@ const state = reactive({ option: { grid: { left: '3%', - right: '10%', + right: '1%', bottom: '10%', top: '15%', containLabel: true, @@ -33,7 +33,9 @@ const state = reactive({ axisPointer: { type: 'shadow', }, - backgroundColor: 'rgba(18, 55, 85, 0.8);', + // tooltip样式调整添加这个类名 + className: 'custom-tooltip-container', // 自定义父容器类名 + backgroundColor: 'rgba(0,0,0,0.5)', borderColor: '#35d0c0', formatter: (data) => { console.log('data', data); @@ -133,14 +135,14 @@ const state = reactive({ }, ], legend: { - itemWidth: 12, - itemHeight: 8, + itemWidth: 16, + itemHeight: 16, itemGap: 20, right: '2%', top: '3%', x: 'center', textStyle: { - fontSize: 14, + fontSize: 16, color: '#fff', }, data: ['总产量（吨）', '平均产量（吨）'], @@ -159,12 +161,12 @@ const state = reactive({ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, - color: 'rgba(53,208,192,1)', + color: 'rgba(1,254,253,1)', }, { offset: 1, - color: 'rgba(53,208,192,0)', + color: 'rgba(1,254,253,0)', }, ]), }, @@ -183,20 +185,18 @@ const state = reactive({ name: '平均产量（吨）', type: 'line', yAxisIndex: 1, - showSymbol: true, + showSymbol: false, symbolSize: 8, - smooth: true, + smooth: false, symbol: 'circle', max: 100, lineStyle: { normal: { - color: 'rgba(53,208,192,1)', + color: '#FEF906', }, }, itemStyle: { - color: 'rgba(254,249,6,1)', - borderColor: '#fff', - borderWidth: 1, + color: '#FEF906', }, }, ], @@ -216,14 +216,14 @@ const loadData = async (code = '') => { // }); await sleep(500); state.data = [ - { value: 103, value1: 208, name: '耿马镇' }, + { value: 103, value1: 102, name: '耿马镇' }, { value: 72, value1: 157, name: '勐撒镇' }, { value: 50, value1: 125, name: '勐永镇' }, { value: 60, value1: 146, name: '孟定镇' }, { value: 40, value1: 86, name: '勐简乡' }, { value: 111, value1: 172, name: '贺派乡' }, { value: 81, value1: 180, name: '四排山乡' }, - { value: 55, value1: 99, name: '芒洪乡' }, + { value: 55, value1: 66, name: '芒洪乡' }, { value: 68, value1: 84, name: '大兴乡' }, ]; }; diff --git a/src/views/entities/components/hotCharts.vue b/src/views/entities/components/hotCharts.vue index 052b253..a7e6008 100644 --- a/src/views/entities/components/hotCharts.vue +++ b/src/views/entities/components/hotCharts.vue @@ -12,9 +12,9 @@ import { ref, reactive, onMounted } from 'vue'; const data = ref([ - { value: 40, name: '一级', reaVal: '20' }, - { value: 80, name: '二级', reaVal: '30' }, - { value: 120, name: '三级', reaVal: '50' }, + { value: 40, name: '一级', reaVal: '20', itemStyle: { color: '#56b1c0' } }, + { value: 80, name: '二级', reaVal: '30', itemStyle: { color: '#77c8ca' } }, + { value: 120, name: '三级', reaVal: '50', itemStyle: { color: '#7bb9cf' } }, ]); const option = reactive({}); onMounted(() => {}); diff --git a/src/views/entities/index.vue b/src/views/entities/index.vue index 75de771..c3bfd86 100644 --- a/src/views/entities/index.vue +++ b/src/views/entities/index.vue @@ -121,14 +121,14 @@ const loadData = async () => { { value: 20, name: '2025' }, ], third: [ - { value: 78, value1: 128, name: '耿马镇' }, + { value: 98, value1: 88, name: '耿马镇' }, { value: 55, value1: 117, name: '勐撒镇' }, { value: 65, value1: 145, name: '勐永镇' }, { value: 60, value1: 126, name: '孟定镇' }, { value: 40, value1: 86, name: '勐简乡' }, { value: 81, value1: 152, name: '贺派乡' }, { value: 41, value1: 130, name: '四排山乡' }, - { value: 63, value1: 109, name: '芒洪乡' }, + { value: 100, value1: 101, name: '芒洪乡' }, { value: 79, value1: 184, name: '大兴乡' }, ], };