From b2392458ebf42594b9fc5390fda40d7a0a12f923 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 03 九月 2025 17:40:52 +0800
Subject: [PATCH] 调试自动生成网格融合图片功能（待完成）
---
src/utils/chart/chart-option.js | 251 +++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 209 insertions(+), 42 deletions(-)
diff --git a/src/utils/chart/chart-option.js b/src/utils/chart/chart-option.js
index 556a0bb..89a9380 100644
--- a/src/utils/chart/chart-option.js
+++ b/src/utils/chart/chart-option.js
@@ -14,24 +14,67 @@
return fontSize;
}
+function baseVisualMap(area) {
+ const _pieces = [];
+ area.forEach((v, i) => {
+ // if (i == 0) {
+ // _pieces.push({
+ // lt: v[0],
+ // color: 'green'
+ // });
+ // }
+ _pieces.push({
+ gte: v[0],
+ lte: v[1],
+ color: 'red'
+ });
+ });
+ // const lastOne = area[area.length - 1];
+ // _pieces.push({
+ // gt: lastOne[1],
+ // color: 'green'
+ // });
+ return {
+ type: 'piecewise',
+ // type: 'continuous',
+ show: false,
+ dimension: 0,
+ pieces: _pieces,
+ outOfRange: {
+ color: ['#5470c6']
+ }
+ };
+}
+
// 鎶樼嚎鍥�
-function factorLineOption(_xAxis, _series, legends) {
+function factorLineOption(_xAxis, _series) {
var fontSize = fGetChartFontSize();
return {
animationEasing: 'elasticOut',
animationDelayUpdate: function (idx) {
return idx * 5;
},
- // toolbox: {
- // bottom: 0,
- // feature: {
- // dataZoom: {},
- // magicType: {
- // type: ['line', 'bar']
- // },
- // restore: {}
- // }
- // },
+ toolbox: {
+ // bottom: 0,
+ feature: {
+ // dataZoom: {},
+ // magicType: {
+ // type: ['line', 'bar']
+ // },
+ // restore: {
+ // title: '鍒锋柊'
+ // },
+ saveAsImage: {
+ show: true,
+ backgroundColor: '#122b54a9',
+ name: '璧拌埅鐩戞祴鍥�',
+ title: '淇濆瓨涓哄浘鐗�',
+ iconStyle: {
+ borderColor: '#fff'
+ }
+ }
+ }
+ },
tooltip: {
textStyle: {
fontSize: fontSize
@@ -39,7 +82,7 @@
},
legend: {
type: 'scroll',
- data: legends,
+ // data: legends,
left: 0,
textStyle: {
fontSize: fontSize,
@@ -48,6 +91,8 @@
},
xAxis: {
name: '鏃堕棿',
+ nameLocation: 'middle',
+ nameGap: 30,
data: _xAxis,
axisLabel: {
textStyle: {
@@ -74,7 +119,16 @@
}
},
yAxis: {
- name: '娴撳害(渭g/m鲁)',
+ name: '娴撳害(渭g/m鲁)/娓╁害(鈩�)/閫熷害(m/s)',
+ nameLocation: 'middle',
+ nameGap: 30,
+ // nameTruncate: {
+ // maxWidth: 100,
+ // ellipsis: '...'
+ // },
+ // nameTextStyle: {
+ // color: 'red'
+ // },
axisLabel: {
textStyle: {
fontSize: fontSize
@@ -94,35 +148,143 @@
},
minInterval: 1
},
- series: _series,
- dataZoom: [
- {
- type: 'inside',
- start: 0,
- end: 100
+ series: _series
+ };
+}
+
+// 鎶樼嚎鍥�
+function smallLineOption(
+ _xAxis,
+ _series,
+ yMinInterval,
+ mode = 'dark',
+ tag,
+ animation = true,
+ defaultGrid,
+ title
+) {
+ var fontSize = fGetChartFontSize();
+ const _grid = defaultGrid
+ ? defaultGrid
+ : { left: '12%', right: '2%', top: '7%', bottom: '30%' };
+ return {
+ title: {
+ text: title,
+ textStyle: {
+ color: mode == 'dark' ? '#ffffff' : '#000000'
+ },
+ left: 'center'
+ },
+ animation: animation,
+ animationEasing: 'elasticOut',
+ animationDelayUpdate: function (idx) {
+ return idx * 5;
+ },
+ tooltip: {
+ textStyle: {
+ fontSize: fontSize
}
- ]
+ },
+ grid: _grid,
+ legend: {
+ show: false
+ },
+ xAxis: [
+ {
+ show: true,
+ name: tag ? '鏃堕棿' : '',
+ // type: 'time',
+ data: _xAxis,
+ axisLabel: {
+ textStyle: {
+ fontSize: fontSize
+ },
+ color: mode == 'dark' ? '#ffffff' : '#000000',
+ textBorderColor: mode == 'dark' ? '#fff' : '#000000'
+ },
+ axisTick: {
+ lineStyle: {
+ color: mode == 'dark' ? '#ffffff' : '#000000'
+ },
+ intervel: 0,
+ inside: false
+ },
+
+ nameTextStyle: {
+ color: mode == 'dark' ? '#ffffff' : '#000000'
+ },
+ axisLine: {
+ lineStyle: {
+ color: mode == 'dark' ? '#ffffff' : '#000000'
+ }
+ }
+ },
+ { show: true }
+ ],
+ yAxis: [
+ {
+ name: tag ? '娴撳害(渭g/m鲁)' : '',
+ // type: 'time',
+ axisLabel: {
+ textStyle: {
+ fontSize: fontSize
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: mode == 'dark' ? '#ffffff' : '#000000'
+ }
+ },
+ axisTick: {
+ show: false,
+ lineStyle: {
+ color: mode == 'dark' ? '#ffffff' : '#000000'
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ minInterval: yMinInterval ? yMinInterval : 1,
+ intervel: 1,
+ min: function (value) {
+ return Math.floor(value.min);
+ },
+ max: function (value) {
+ return Math.ceil(value.max);
+ }
+ },
+ {
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: mode == 'dark' ? '#ffffff' : '#000000'
+ }
+ }
+ }
+ ],
+ series: _series
};
}
// 浠〃鐩�
function gaugeOption(name, value) {
- var fontSize = fGetChartFontSize();
+ // var fontSize = fGetChartFontSize();
var option = {
- title: {
- text: name,
- textStyle: {
- color: 'white',
- fontSize: fontSize
- },
- left: 'center'
- },
+ // title: {
+ // text: name,
+ // textStyle: {
+ // color: 'white',
+ // fontSize: fontSize
+ // },
+ // left: 'center'
+ // },
textStyle: {
color: '#ffffff',
fontSize: 10
},
tooltip: {
- formatter: '{a} <br/>{b} : {c}%'
+ formatter: '{a} : {c}km/h'
},
toolbox: {
// feature: {
@@ -134,12 +296,17 @@
{
name: name,
type: 'gauge',
+ title: {
+ color: 'white',
+ offsetCenter: [0, '50%']
+ },
detail: {
color: 'white',
- formatter: '{value}',
+ formatter: '{value}km/h',
textStyle: {
- fontSize: fontSize
- }
+ fontSize: 18
+ },
+ offsetCenter: [0, '80%']
},
splitLine: {
lineStyle: {
@@ -156,13 +323,13 @@
fontSize: 10
},
axisLine: {
- lineStyle: {
- color: [
- [0.2, '#2afd2a'],
- [0.8, '#f1e74d'],
- [1, '#c23531']
- ]
- }
+ // lineStyle: {
+ // color: [
+ // [0.2, '#2afd2a'],
+ // [0.8, '#f1e74d'],
+ // [1, '#c23531']
+ // ]
+ // }
},
itemStyle: {
color: 'white'
@@ -170,7 +337,7 @@
data: [
{
value: value,
- name: ''
+ name: '杞﹂��'
}
],
min: 0,
@@ -181,4 +348,4 @@
return option;
}
-export { factorLineOption, gaugeOption };
+export { factorLineOption, smallLineOption, gaugeOption, baseVisualMap };
--
Gitblit v1.9.3