RIZO/beizeValveMesVue
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

统计图优化

Browse Source
This commit is contained in:
赵正易 2025-01-21 08:41:35 +08:00
parent 0a92ccd80e
commit cc5eb99ccd
4 changed files with 438 additions and 351 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/SmartScreen/ReportScreen/charts/chart1.vue
View File

@ -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)
}

23
src/views/SmartScreen/ReportScreen/charts/chart2.vue
View File

@ -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)

23
src/views/SmartScreen/ReportScreen/charts/chart3.vue
View File

@ -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)

718
src/views/SmartScreen/ReportScreen/theme/chalk.json
View File

@ -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"
}
}
}
}