From cc5eb99ccd15d4a32dbf69bbeccea90fcb130d62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E6=AD=A3=E6=98=93?= Date: Tue, 21 Jan 2025 08:41:35 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E5=9B=BE=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ReportScreen/charts/chart1.vue | 25 + .../ReportScreen/charts/chart2.vue | 23 + .../ReportScreen/charts/chart3.vue | 23 + .../SmartScreen/ReportScreen/theme/chalk.json | 718 +++++++++--------- 4 files changed, 438 insertions(+), 351 deletions(-) diff --git a/src/views/SmartScreen/ReportScreen/charts/chart1.vue b/src/views/SmartScreen/ReportScreen/charts/chart1.vue index 10f7d8a..fd5a8f8 100644 --- a/src/views/SmartScreen/ReportScreen/charts/chart1.vue +++ b/src/views/SmartScreen/ReportScreen/charts/chart1.vue @@ -74,6 +74,7 @@ function updateData() { options.title = res.data.title options.xAxis.data = res.data.xAxis.data let _series = res.data.series + _series.forEach((item) => { item.label = { show: true, @@ -83,7 +84,31 @@ function updateData() { formatter: '{c}', color: '#fff' } + // 定义一组颜色 + const colors = [ + "#00b894", + "#fdcb6e", + "#ff7675", + "#6c5ce7", + "#00cec9", + "#ffeaa7", + "#fab1a0", + "#ffbe76", + "#74b9ff", + "#55efc4", + "#a29bfe", + "#d63031", + "#fd79a8", + "#00bfa5", + "#e17055" + ]; + item.data.forEach((dataItem, index) => ( + dataItem.itemStyle = { + color: colors[index % colors.length] // 使用与系列相同的颜色逻辑 + } + )) }) + console.log(_series); options.series = _series chart.value.setOption(options) } diff --git a/src/views/SmartScreen/ReportScreen/charts/chart2.vue b/src/views/SmartScreen/ReportScreen/charts/chart2.vue index 9bf025d..2815b42 100644 --- a/src/views/SmartScreen/ReportScreen/charts/chart2.vue +++ b/src/views/SmartScreen/ReportScreen/charts/chart2.vue @@ -83,6 +83,29 @@ function updateData() { formatter: '{c}', color: '#fff' } + // 定义一组颜色 + const colors = [ + "#00b894", + "#fdcb6e", + "#ff7675", + "#6c5ce7", + "#00cec9", + "#ffeaa7", + "#fab1a0", + "#ffbe76", + "#74b9ff", + "#55efc4", + "#a29bfe", + "#d63031", + "#fd79a8", + "#00bfa5", + "#e17055" + ]; + item.data.forEach((dataItem, index) => ( + dataItem.itemStyle = { + color: colors[index % colors.length] // 使用与系列相同的颜色逻辑 + } + )) }) options.series = _series chart.value.setOption(options) diff --git a/src/views/SmartScreen/ReportScreen/charts/chart3.vue b/src/views/SmartScreen/ReportScreen/charts/chart3.vue index 1a3d0ed..c466487 100644 --- a/src/views/SmartScreen/ReportScreen/charts/chart3.vue +++ b/src/views/SmartScreen/ReportScreen/charts/chart3.vue @@ -83,6 +83,29 @@ function updateData() { formatter: '{c}', color: '#fff' } + // 定义一组颜色 + const colors = [ + "#00b894", + "#fdcb6e", + "#ff7675", + "#6c5ce7", + "#00cec9", + "#ffeaa7", + "#fab1a0", + "#ffbe76", + "#74b9ff", + "#55efc4", + "#a29bfe", + "#d63031", + "#fd79a8", + "#00bfa5", + "#e17055" + ]; + item.data.forEach((dataItem, index) => ( + dataItem.itemStyle = { + color: colors[index % colors.length] // 使用与系列相同的颜色逻辑 + } + )) }) options.series = _series chart.value.setOption(options) diff --git a/src/views/SmartScreen/ReportScreen/theme/chalk.json b/src/views/SmartScreen/ReportScreen/theme/chalk.json index 68e2a62..b557543 100644 --- a/src/views/SmartScreen/ReportScreen/theme/chalk.json +++ b/src/views/SmartScreen/ReportScreen/theme/chalk.json @@ -1,356 +1,372 @@ { - "color": ["#8BC34A", "#05f8d6", "#fdd845", "#22ed7c", "#09b0d3", "#1d27c9", "#f9e264", "#f47a75", "#72ccff", "#f0805a", "#26c0c0", "#d851cc", "#b91dd8", "#2418ea"], - "backgroundColor": "transparent", + "color": [ + "#00b894", + "#fdcb6e", + "#ff7675", + "#6c5ce7", + "#00cec9", + "#ffeaa7", + "#fab1a0", + "#ffbe76", + "#74b9ff", + "#55efc4", + "#a29bfe", + "#d63031", + "#fd79a8", + "#00bfa5", + "#e17055" + ], + "backgroundColor": "transparent", + "textStyle": { + "color": "#fff" + }, + "title": { "textStyle": { - "color": "#fff" + "color": "#ffffff" }, - "title": { - "textStyle": { - "color": "#ffffff" - }, - "subtextStyle": { - "color": "#dddddd" - } - }, - "line": { - "itemStyle": { - "borderWidth": "4" - }, - "lineStyle": { - "width": "3" - }, - "symbolSize": "0", - "symbol": "circle", - "smooth": true - }, - "radar": { - "itemStyle": { - "borderWidth": "4" - }, - "lineStyle": { - "width": "3" - }, - "symbolSize": "0", - "symbol": "circle", - "smooth": true - }, - "bar": { - "itemStyle": { - "barBorderWidth": 0, - "barBorderColor": "#ccc" - } - }, - "pie": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "scatter": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "boxplot": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "parallel": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "sankey": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "funnel": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "gauge": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "candlestick": { - "itemStyle": { - "color": "#fc97af", - "color0": "transparent", - "borderColor": "#fc97af", - "borderColor0": "#87f7cf", - "borderWidth": "2" - } - }, - "graph": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - }, - "lineStyle": { - "width": "1", - "color": "#ffffff" - }, - "symbolSize": "0", - "symbol": "circle", - "smooth": true, - "color": ["#fc97af", "#87f7cf", "#f7f494", "#72ccff", "#f7c5a0", "#d4a4eb", "#d2f5a6", "#76f2f2"], - "label": { - "color": "#FFFFF" - } - }, - "map": { - "itemStyle": { - "areaColor": "#f3f3f3", - "borderColor": "#999999", - "borderWidth": 0.5 - }, - "label": { - "color": "#893448" - }, - "emphasis": { - "itemStyle": { - "areaColor": "rgba(255,178,72,1)", - "borderColor": "#eb8146", - "borderWidth": 1 - }, - "label": { - "color": "rgb(137,52,72)" - } - } - }, - "geo": { - "itemStyle": { - "areaColor": "#f3f3f3", - "borderColor": "#999999", - "borderWidth": 0.5 - }, - "label": { - "color": "#893448" - }, - "emphasis": { - "itemStyle": { - "areaColor": "rgba(255,178,72,1)", - "borderColor": "#eb8146", - "borderWidth": 1 - }, - "label": { - "color": "rgb(137,52,72)" - } - } - }, - "categoryAxis": { - "axisLine": { - "show": true, - "lineStyle": { - "color": "#666666" - } - }, - "axisTick": { - "show": false, - "lineStyle": { - "color": "#333" - } - }, - "axisLabel": { - "show": true, - "color": "#aaaaaa" - }, - "splitLine": { - "show": false, - "lineStyle": { - "color": ["#e6e6e6"] - } - }, - "splitArea": { - "show": false, - "areaStyle": { - "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] - } - } - }, - "valueAxis": { - "axisLine": { - "show": true, - "lineStyle": { - "color": "#666666" - } - }, - "axisTick": { - "show": false, - "lineStyle": { - "color": "#333" - } - }, - "axisLabel": { - "show": true, - "color": "#aaaaaa" - }, - "splitLine": { - "show": false, - "lineStyle": { - "color": ["#e6e6e6"] - } - }, - "splitArea": { - "show": false, - "areaStyle": { - "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] - } - } - }, - "logAxis": { - "axisLine": { - "show": true, - "lineStyle": { - "color": "#666666" - } - }, - "axisTick": { - "show": false, - "lineStyle": { - "color": "#333" - } - }, - "axisLabel": { - "show": true, - "color": "#aaaaaa" - }, - "splitLine": { - "show": false, - "lineStyle": { - "color": ["#e6e6e6"] - } - }, - "splitArea": { - "show": false, - "areaStyle": { - "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] - } - } - }, - "timeAxis": { - "axisLine": { - "show": true, - "lineStyle": { - "color": "#666666" - } - }, - "axisTick": { - "show": false, - "lineStyle": { - "color": "#333" - } - }, - "axisLabel": { - "show": true, - "color": "#aaaaaa" - }, - "splitLine": { - "show": false, - "lineStyle": { - "color": ["#e6e6e6"] - } - }, - "splitArea": { - "show": false, - "areaStyle": { - "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] - } - } - }, - "toolbox": { - "iconStyle": { - "borderColor": "#999999" - }, - "emphasis": { - "iconStyle": { - "borderColor": "#666666" - } - } - }, - "legend": { - "textStyle": { - "color": "#999999" - } - }, - "tooltip": { - "axisPointer": { - "lineStyle": { - "color": "#cccccc", - "width": 1 - }, - "crossStyle": { - "color": "#cccccc", - "width": 1 - } - } - }, - "timeline": { - "lineStyle": { - "color": "#87f7cf", - "width": 1 - }, - "itemStyle": { - "color": "#87f7cf", - "borderWidth": 1 - }, - "controlStyle": { - "color": "#87f7cf", - "borderColor": "#87f7cf", - "borderWidth": 0.5 - }, - "checkpointStyle": { - "color": "#fc97af", - "borderColor": "#fc97af" - }, - "label": { - "color": "#87f7cf" - }, - "emphasis": { - "itemStyle": { - "color": "#f7f494" - }, - "controlStyle": { - "color": "#87f7cf", - "borderColor": "#87f7cf", - "borderWidth": 0.5 - }, - "label": { - "color": "#87f7cf" - } - } - }, - "visualMap": { - "color": ["#fc97af", "#87f7cf"] - }, - "dataZoom": { - "backgroundColor": "rgba(255,255,255,0)", - "dataBackgroundColor": "rgba(114,204,255,1)", - "fillerColor": "rgba(114,204,255,0.2)", - "handleColor": "#72ccff", - "handleSize": "100%", - "textStyle": { - "color": "#333333" - } - }, - "markPoint": { - "label": { - "color": "#293441" - }, - "emphasis": { - "label": { - "color": "#293441" - } - } + "subtextStyle": { + "color": "#dddddd" } + }, + "line": { + "itemStyle": { + "borderWidth": "4" + }, + "lineStyle": { + "width": "3" + }, + "symbolSize": "0", + "symbol": "circle", + "smooth": true + }, + "radar": { + "itemStyle": { + "borderWidth": "4" + }, + "lineStyle": { + "width": "3" + }, + "symbolSize": "0", + "symbol": "circle", + "smooth": true + }, + "bar": { + "itemStyle": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + }, + "pie": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "scatter": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "boxplot": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "parallel": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "sankey": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "funnel": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "gauge": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "candlestick": { + "itemStyle": { + "color": "#fc97af", + "color0": "transparent", + "borderColor": "#fc97af", + "borderColor0": "#87f7cf", + "borderWidth": "2" + } + }, + "graph": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "lineStyle": { + "width": "1", + "color": "#ffffff" + }, + "symbolSize": "0", + "symbol": "circle", + "smooth": true, + "color": ["#fc97af", "#87f7cf", "#f7f494", "#72ccff", "#f7c5a0", "#d4a4eb", "#d2f5a6", "#76f2f2"], + "label": { + "color": "#FFFFF" + } + }, + "map": { + "itemStyle": { + "areaColor": "#f3f3f3", + "borderColor": "#999999", + "borderWidth": 0.5 + }, + "label": { + "color": "#893448" + }, + "emphasis": { + "itemStyle": { + "areaColor": "rgba(255,178,72,1)", + "borderColor": "#eb8146", + "borderWidth": 1 + }, + "label": { + "color": "rgb(137,52,72)" + } + } + }, + "geo": { + "itemStyle": { + "areaColor": "#f3f3f3", + "borderColor": "#999999", + "borderWidth": 0.5 + }, + "label": { + "color": "#893448" + }, + "emphasis": { + "itemStyle": { + "areaColor": "rgba(255,178,72,1)", + "borderColor": "#eb8146", + "borderWidth": 1 + }, + "label": { + "color": "rgb(137,52,72)" + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#666666" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "color": "#aaaaaa" + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": ["#e6e6e6"] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#666666" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "color": "#aaaaaa" + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": ["#e6e6e6"] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#666666" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "color": "#aaaaaa" + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": ["#e6e6e6"] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#666666" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "color": "#aaaaaa" + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": ["#e6e6e6"] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] + } + } + }, + "toolbox": { + "iconStyle": { + "borderColor": "#999999" + }, + "emphasis": { + "iconStyle": { + "borderColor": "#666666" + } + } + }, + "legend": { + "textStyle": { + "color": "#999999" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#cccccc", + "width": 1 + }, + "crossStyle": { + "color": "#cccccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#87f7cf", + "width": 1 + }, + "itemStyle": { + "color": "#87f7cf", + "borderWidth": 1 + }, + "controlStyle": { + "color": "#87f7cf", + "borderColor": "#87f7cf", + "borderWidth": 0.5 + }, + "checkpointStyle": { + "color": "#fc97af", + "borderColor": "#fc97af" + }, + "label": { + "color": "#87f7cf" + }, + "emphasis": { + "itemStyle": { + "color": "#f7f494" + }, + "controlStyle": { + "color": "#87f7cf", + "borderColor": "#87f7cf", + "borderWidth": 0.5 + }, + "label": { + "color": "#87f7cf" + } + } + }, + "visualMap": { + "color": ["#fc97af", "#87f7cf"] + }, + "dataZoom": { + "backgroundColor": "rgba(255,255,255,0)", + "dataBackgroundColor": "rgba(114,204,255,1)", + "fillerColor": "rgba(114,204,255,0.2)", + "handleColor": "#72ccff", + "handleSize": "100%", + "textStyle": { + "color": "#333333" + } + }, + "markPoint": { + "label": { + "color": "#293441" + }, + "emphasis": { + "label": { + "color": "#293441" + } + } + } }