|
|
@@ -282,12 +282,24 @@ export function revenueProfitLineOption(series) {
|
|
|
}
|
|
|
|
|
|
// ===== PE / PB 估值带 =====
|
|
|
-function priceBandOption(series, opts) {
|
|
|
+function priceBandOption(series, opts, closeSeries) {
|
|
|
const dates = series.map((s) => s[0])
|
|
|
const mid = series.map((s) => s[1])
|
|
|
const up = series.map((s) => s[2])
|
|
|
const dn = series.map((s) => s[3])
|
|
|
const cur = series.map((s) => s[4])
|
|
|
+ const hasClose = Array.isArray(closeSeries) && closeSeries.length > 0
|
|
|
+ const closeMap = hasClose ? new Map(closeSeries.map(([d, v]) => [d, v])) : null
|
|
|
+ const closeAligned = hasClose ? dates.map((d) => (closeMap.has(d) ? closeMap.get(d) : null)) : []
|
|
|
+ const lastClose = hasClose ? closeSeries[closeSeries.length - 1][1] : null
|
|
|
+ const lastCloseDate = hasClose ? closeSeries[closeSeries.length - 1][0] : null
|
|
|
+ const legendData = [
|
|
|
+ { name: '当前', itemStyle: { color: opts.curColor } },
|
|
|
+ { name: '上轨', itemStyle: { color: C.faint } },
|
|
|
+ { name: '中枢', itemStyle: { color: C.mut } },
|
|
|
+ { name: '下轨', itemStyle: { color: C.faint } },
|
|
|
+ ]
|
|
|
+ if (hasClose) legendData.push({ name: '指数走势', itemStyle: { color: C.warn } })
|
|
|
return {
|
|
|
tooltip: {
|
|
|
...tipOpt,
|
|
|
@@ -296,19 +308,19 @@ function priceBandOption(series, opts) {
|
|
|
valueFormatter: (v) => v.toFixed(opts.toFixed || 2),
|
|
|
},
|
|
|
legend: {
|
|
|
- data: [
|
|
|
- { name: '当前', itemStyle: { color: opts.curColor } },
|
|
|
- { name: '上轨', itemStyle: { color: C.faint } },
|
|
|
- { name: '中枢', itemStyle: { color: C.mut } },
|
|
|
- { name: '下轨', itemStyle: { color: C.faint } },
|
|
|
- ],
|
|
|
+ data: legendData,
|
|
|
top: 4,
|
|
|
textStyle: { color: C.mut, fontSize: 11 },
|
|
|
itemWidth: 14,
|
|
|
},
|
|
|
- grid: { top: 36, left: 50, right: 24, bottom: 32, containLabel: true },
|
|
|
+ grid: { top: 36, left: 50, right: hasClose ? 60 : 24, bottom: 32, containLabel: true },
|
|
|
xAxis: { type: 'category', data: dates, ...axisStyle({ axisLabel: { color: C.mut, fontSize: 10.5 } }) },
|
|
|
- yAxis: { type: 'value', ...axisStyle() },
|
|
|
+ yAxis: hasClose
|
|
|
+ ? [
|
|
|
+ { type: 'value', name: opts.toFixed === 3 ? 'PB' : 'PE', nameTextStyle: { color: opts.curColor, fontSize: 10.5, padding: [0, 0, 0, -28] }, position: 'left', ...axisStyle() },
|
|
|
+ { type: 'value', name: '指数走势', nameTextStyle: { color: C.warn, fontSize: 10.5, padding: [0, -28, 0, 0] }, position: 'right', ...axisStyle({ splitLine: { show: false } }) },
|
|
|
+ ]
|
|
|
+ : { type: 'value', ...axisStyle() },
|
|
|
series: [
|
|
|
{ name: '下轨', type: 'line', data: dn, symbol: 'none', smooth: true, lineStyle: { color: C.faint, type: 'dashed', width: 1 }, z: 1 },
|
|
|
{ name: '上轨', type: 'line', data: up, symbol: 'none', smooth: true, lineStyle: { color: C.faint, type: 'dashed', width: 1 }, z: 1 },
|
|
|
@@ -333,16 +345,39 @@ function priceBandOption(series, opts) {
|
|
|
data: [{ name: '当前', value: cur[cur.length - 1], xAxis: dates[dates.length - 1], yAxis: cur[cur.length - 1] }],
|
|
|
},
|
|
|
},
|
|
|
+ ...(hasClose ? [{
|
|
|
+ name: '指数走势',
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data: closeAligned,
|
|
|
+ symbol: 'none',
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: { color: C.warn, width: 1.6 },
|
|
|
+ z: 4,
|
|
|
+ markPoint: {
|
|
|
+ symbol: 'circle', symbolSize: 7,
|
|
|
+ itemStyle: { color: C.warn, borderColor: '#fff', borderWidth: 2 },
|
|
|
+ label: { formatter: (p) => p.value.toFixed(0), color: C.warn, fontSize: 10, position: 'bottom', fontWeight: 600 },
|
|
|
+ data: [{ name: '当前指数走势', value: lastClose, xAxis: lastCloseDate, yAxis: lastClose }],
|
|
|
+ },
|
|
|
+ }] : []),
|
|
|
],
|
|
|
}
|
|
|
}
|
|
|
-export function peBandOption(series) { return priceBandOption(series, { curColor: C.brand, toFixed: 2 }) }
|
|
|
-export function pbBandOption(series) { return priceBandOption(series, { curColor: C.brandD, toFixed: 3 }) }
|
|
|
+export function peBandOption(series, closeSeries) { return priceBandOption(series, { curColor: C.brand, toFixed: 2 }, closeSeries) }
|
|
|
+export function pbBandOption(series, closeSeries) { return priceBandOption(series, { curColor: C.brandD, toFixed: 3 }, closeSeries) }
|
|
|
|
|
|
// ===== 股息率 =====
|
|
|
-export function dividendLineOption(series) {
|
|
|
+export function dividendLineOption(series, closeSeries) {
|
|
|
const dates = series.map((s) => s[0])
|
|
|
const values = series.map((s) => s[1])
|
|
|
+ const hasClose = Array.isArray(closeSeries) && closeSeries.length > 0
|
|
|
+ const closeMap = hasClose ? new Map(closeSeries.map(([d, v]) => [d, v])) : null
|
|
|
+ const closeAligned = hasClose ? dates.map((d) => (closeMap.has(d) ? closeMap.get(d) : null)) : []
|
|
|
+ const lastClose = hasClose ? closeSeries[closeSeries.length - 1][1] : null
|
|
|
+ const lastCloseDate = hasClose ? closeSeries[closeSeries.length - 1][0] : null
|
|
|
+ const legendData = [{ name: '股息率', itemStyle: { color: C.warn } }]
|
|
|
+ if (hasClose) legendData.push({ name: '指数走势', itemStyle: { color: C.brand } })
|
|
|
return {
|
|
|
tooltip: {
|
|
|
...tipOpt,
|
|
|
@@ -350,9 +385,20 @@ export function dividendLineOption(series) {
|
|
|
axisPointer: { type: 'line' },
|
|
|
valueFormatter: (v) => `${v.toFixed(2)}%`,
|
|
|
},
|
|
|
- grid: { top: 28, left: 50, right: 24, bottom: 32, containLabel: true },
|
|
|
+ legend: {
|
|
|
+ data: legendData,
|
|
|
+ top: 4,
|
|
|
+ textStyle: { color: C.mut, fontSize: 11 },
|
|
|
+ itemWidth: 14,
|
|
|
+ },
|
|
|
+ grid: { top: 36, left: 50, right: hasClose ? 60 : 24, bottom: 32, containLabel: true },
|
|
|
xAxis: { type: 'category', data: dates, ...axisStyle({ axisLabel: { color: C.mut, fontSize: 10.5 } }) },
|
|
|
- yAxis: { type: 'value', ...axisStyle({ axisLabel: { color: C.mut, fontSize: 11, formatter: '{value}%' } }) },
|
|
|
+ yAxis: hasClose
|
|
|
+ ? [
|
|
|
+ { type: 'value', name: '股息率', nameTextStyle: { color: C.warn, fontSize: 10.5, padding: [0, 0, 0, -28] }, position: 'left', ...axisStyle({ axisLabel: { color: C.mut, fontSize: 11, formatter: '{value}%' } }) },
|
|
|
+ { type: 'value', name: '指数走势', nameTextStyle: { color: C.brand, fontSize: 10.5, padding: [0, -28, 0, 0] }, position: 'right', ...axisStyle({ splitLine: { show: false } }) },
|
|
|
+ ]
|
|
|
+ : { type: 'value', ...axisStyle({ axisLabel: { color: C.mut, fontSize: 11, formatter: '{value}%' } }) },
|
|
|
series: [
|
|
|
{
|
|
|
name: '股息率',
|
|
|
@@ -377,14 +423,36 @@ export function dividendLineOption(series) {
|
|
|
data: [{ name: '当前', value: values[values.length - 1], xAxis: dates[dates.length - 1], yAxis: values[values.length - 1] }],
|
|
|
},
|
|
|
},
|
|
|
+ ...(hasClose ? [{
|
|
|
+ name: '指数走势',
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data: closeAligned,
|
|
|
+ symbol: 'none',
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: { color: C.brand, width: 1.6 },
|
|
|
+ markPoint: {
|
|
|
+ symbol: 'circle', symbolSize: 7,
|
|
|
+ itemStyle: { color: C.brand, borderColor: '#fff', borderWidth: 2 },
|
|
|
+ label: { formatter: (p) => p.value.toFixed(0), color: C.brand, fontSize: 10, position: 'bottom', fontWeight: 600 },
|
|
|
+ data: [{ name: '当前指数走势', value: lastClose, xAxis: lastCloseDate, yAxis: lastClose }],
|
|
|
+ },
|
|
|
+ }] : []),
|
|
|
],
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// ===== ERP =====
|
|
|
-export function erpLineOption(series) {
|
|
|
+export function erpLineOption(series, closeSeries) {
|
|
|
const dates = series.map((s) => s[0])
|
|
|
const values = series.map((s) => s[1])
|
|
|
+ const hasClose = Array.isArray(closeSeries) && closeSeries.length > 0
|
|
|
+ const closeMap = hasClose ? new Map(closeSeries.map(([d, v]) => [d, v])) : null
|
|
|
+ const closeAligned = hasClose ? dates.map((d) => (closeMap.has(d) ? closeMap.get(d) : null)) : []
|
|
|
+ const lastClose = hasClose ? closeSeries[closeSeries.length - 1][1] : null
|
|
|
+ const lastCloseDate = hasClose ? closeSeries[closeSeries.length - 1][0] : null
|
|
|
+ const legendData = [{ name: 'ERP', itemStyle: { color: C.brandD } }]
|
|
|
+ if (hasClose) legendData.push({ name: '指数走势', itemStyle: { color: C.warn } })
|
|
|
return {
|
|
|
tooltip: {
|
|
|
...tipOpt,
|
|
|
@@ -392,9 +460,20 @@ export function erpLineOption(series) {
|
|
|
axisPointer: { type: 'line' },
|
|
|
valueFormatter: (v) => `${v.toFixed(2)}%`,
|
|
|
},
|
|
|
- grid: { top: 28, left: 50, right: 24, bottom: 32, containLabel: true },
|
|
|
+ legend: {
|
|
|
+ data: legendData,
|
|
|
+ top: 4,
|
|
|
+ textStyle: { color: C.mut, fontSize: 11 },
|
|
|
+ itemWidth: 14,
|
|
|
+ },
|
|
|
+ grid: { top: 36, left: 50, right: hasClose ? 60 : 24, bottom: 32, containLabel: true },
|
|
|
xAxis: { type: 'category', data: dates, ...axisStyle({ axisLabel: { color: C.mut, fontSize: 10.5 } }) },
|
|
|
- yAxis: { type: 'value', ...axisStyle({ axisLabel: { color: C.mut, fontSize: 11, formatter: '{value}%' } }) },
|
|
|
+ yAxis: hasClose
|
|
|
+ ? [
|
|
|
+ { type: 'value', name: 'ERP', nameTextStyle: { color: C.brandD, fontSize: 10.5, padding: [0, 0, 0, -28] }, position: 'left', ...axisStyle({ axisLabel: { color: C.mut, fontSize: 11, formatter: '{value}%' } }) },
|
|
|
+ { type: 'value', name: '指数走势', nameTextStyle: { color: C.warn, fontSize: 10.5, padding: [0, -28, 0, 0] }, position: 'right', ...axisStyle({ splitLine: { show: false } }) },
|
|
|
+ ]
|
|
|
+ : { type: 'value', ...axisStyle({ axisLabel: { color: C.mut, fontSize: 11, formatter: '{value}%' } }) },
|
|
|
series: [
|
|
|
{
|
|
|
name: 'ERP',
|
|
|
@@ -412,12 +491,12 @@ export function erpLineOption(series) {
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
- markLine: {
|
|
|
- symbol: ['none', 'none'],
|
|
|
- data: [
|
|
|
- { yAxis: 4.0, lineStyle: { color: C.mut, type: 'dashed', width: 1 }, label: { show: true, position: 'end', formatter: '历史中枢', color: C.mut, fontSize: 10 } },
|
|
|
- ],
|
|
|
- },
|
|
|
+ // markLine: {
|
|
|
+ // symbol: ['none', 'none'],
|
|
|
+ // data: [
|
|
|
+ // { yAxis: 4.0, lineStyle: { color: C.mut, type: 'dashed', width: 1 }, label: { show: true, position: 'end', formatter: '历史中枢', color: C.mut, fontSize: 10 } },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
markPoint: {
|
|
|
symbol: 'circle', symbolSize: 8,
|
|
|
itemStyle: { color: C.brandD, borderColor: '#fff', borderWidth: 2 },
|
|
|
@@ -425,22 +504,44 @@ export function erpLineOption(series) {
|
|
|
data: [{ name: '当前', value: values[values.length - 1], xAxis: dates[dates.length - 1], yAxis: values[values.length - 1] }],
|
|
|
},
|
|
|
},
|
|
|
+ ...(hasClose ? [{
|
|
|
+ name: '指数走势',
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data: closeAligned,
|
|
|
+ symbol: 'none',
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: { color: C.warn, width: 1.6 },
|
|
|
+ markPoint: {
|
|
|
+ symbol: 'circle', symbolSize: 7,
|
|
|
+ itemStyle: { color: C.warn, borderColor: '#fff', borderWidth: 2 },
|
|
|
+ label: { formatter: (p) => p.value.toFixed(0), color: C.warn, fontSize: 10, position: 'bottom', fontWeight: 600 },
|
|
|
+ data: [{ name: '当前指数走势', value: lastClose, xAxis: lastCloseDate, yAxis: lastClose }],
|
|
|
+ },
|
|
|
+ }] : []),
|
|
|
],
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// ===== 换手率 + 成交额 双轴 =====
|
|
|
-export function liquidityBarLineOption(series) {
|
|
|
+export function liquidityBarLineOption(series, closeSeries) {
|
|
|
const dates = series.map((s) => s[0])
|
|
|
const turnover = series.map((s) => s[1])
|
|
|
const volume = series.map((s) => s[2])
|
|
|
+ const hasClose = Array.isArray(closeSeries) && closeSeries.length > 0
|
|
|
+ const closeMap = hasClose ? new Map(closeSeries.map(([d, v]) => [d, v])) : null
|
|
|
+ const closeAligned = hasClose ? dates.map((d) => (closeMap.has(d) ? closeMap.get(d) : null)) : []
|
|
|
+ const lastClose = hasClose ? closeSeries[closeSeries.length - 1][1] : null
|
|
|
+ const lastCloseDate = hasClose ? closeSeries[closeSeries.length - 1][0] : null
|
|
|
+ const legendData = [
|
|
|
+ { name: '换手率', itemStyle: { color: C.brand } },
|
|
|
+ { name: '成交额(千亿港元)', itemStyle: { color: C.up } },
|
|
|
+ ]
|
|
|
+ if (hasClose) legendData.push({ name: '指数走势', itemStyle: { color: C.warn } })
|
|
|
return {
|
|
|
tooltip: { ...tipOpt, trigger: 'axis', axisPointer: { type: 'shadow' } },
|
|
|
legend: {
|
|
|
- data: [
|
|
|
- { name: '换手率', itemStyle: { color: C.brand } },
|
|
|
- { name: '成交额(千亿港元)', itemStyle: { color: C.up } },
|
|
|
- ],
|
|
|
+ data: legendData,
|
|
|
top: 4,
|
|
|
textStyle: { color: C.mut, fontSize: 11 },
|
|
|
itemWidth: 14,
|
|
|
@@ -449,24 +550,57 @@ export function liquidityBarLineOption(series) {
|
|
|
xAxis: { type: 'category', data: dates, ...axisStyle({ axisLabel: { color: C.mut, fontSize: 10.5 } }) },
|
|
|
yAxis: [
|
|
|
{ type: 'value', name: '换手率(%)', ...axisStyle({ axisLabel: { color: C.mut, fontSize: 11, formatter: '{value}%' }, nameTextStyle: { color: C.mut, fontSize: 10 } }) },
|
|
|
- { type: 'value', name: '成交额(千亿)', ...axisStyle({ axisLabel: { color: C.mut, fontSize: 11 }, nameTextStyle: { color: C.mut, fontSize: 10 } }) },
|
|
|
+ { type: 'value', name: hasClose ? '成交额(千亿) / 指数走势' : '成交额(千亿)', ...axisStyle({ axisLabel: { color: C.mut, fontSize: 11 }, nameTextStyle: { color: C.mut, fontSize: 10 } }) },
|
|
|
],
|
|
|
series: [
|
|
|
{ name: '换手率', type: 'bar', data: turnover, barWidth: 12, itemStyle: { color: 'rgba(21,82,208,0.65)', borderRadius: [3, 3, 0, 0] } },
|
|
|
{ name: '成交额(千亿港元)', type: 'line', yAxisIndex: 1, data: volume, symbol: 'none', smooth: true, lineStyle: { color: C.up, width: 2.2 } },
|
|
|
+ ...(hasClose ? [{
|
|
|
+ name: '指数走势',
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data: closeAligned,
|
|
|
+ symbol: 'none',
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: { color: C.warn, width: 1.6 },
|
|
|
+ markPoint: {
|
|
|
+ symbol: 'circle', symbolSize: 7,
|
|
|
+ itemStyle: { color: C.warn, borderColor: '#fff', borderWidth: 2 },
|
|
|
+ label: { formatter: (p) => p.value.toFixed(0), color: C.warn, fontSize: 10, position: 'bottom', fontWeight: 600 },
|
|
|
+ data: [{ name: '当前指数走势', value: lastClose, xAxis: lastCloseDate, yAxis: lastClose }],
|
|
|
+ },
|
|
|
+ }] : []),
|
|
|
],
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// ===== RSI 单线 =====
|
|
|
-export function rsiLineOption(series) {
|
|
|
+export function rsiLineOption(series, closeSeries) {
|
|
|
const dates = series.map((s) => s[0])
|
|
|
const values = series.map((s) => s[1])
|
|
|
+ const hasClose = Array.isArray(closeSeries) && closeSeries.length > 0
|
|
|
+ const closeMap = hasClose ? new Map(closeSeries.map(([d, v]) => [d, v])) : null
|
|
|
+ const closeAligned = hasClose ? dates.map((d) => (closeMap.has(d) ? closeMap.get(d) : null)) : []
|
|
|
+ const lastClose = hasClose ? closeSeries[closeSeries.length - 1][1] : null
|
|
|
+ const lastCloseDate = hasClose ? closeSeries[closeSeries.length - 1][0] : null
|
|
|
+ const legendData = [{ name: 'RSI', itemStyle: { color: C.brand } }]
|
|
|
+ if (hasClose) legendData.push({ name: '指数走势', itemStyle: { color: C.warn } })
|
|
|
return {
|
|
|
tooltip: { ...tipOpt, trigger: 'axis', axisPointer: { type: 'line' }, valueFormatter: (v) => v.toFixed(2) },
|
|
|
- grid: { top: 28, left: 50, right: 24, bottom: 32, containLabel: true },
|
|
|
+ legend: {
|
|
|
+ data: legendData,
|
|
|
+ top: 4,
|
|
|
+ textStyle: { color: C.mut, fontSize: 11 },
|
|
|
+ itemWidth: 14,
|
|
|
+ },
|
|
|
+ grid: { top: 36, left: 50, right: hasClose ? 60 : 24, bottom: 32, containLabel: true },
|
|
|
xAxis: { type: 'category', data: dates, ...axisStyle({ axisLabel: { color: C.mut, fontSize: 10.5 } }) },
|
|
|
- yAxis: { type: 'value', min: 0, max: 100, interval: 25, ...axisStyle() },
|
|
|
+ yAxis: hasClose
|
|
|
+ ? [
|
|
|
+ { type: 'value', min: 0, max: 100, interval: 25, ...axisStyle() },
|
|
|
+ { type: 'value', name: '指数走势', position: 'right', ...axisStyle({ splitLine: { show: false }, nameTextStyle: { color: C.warn, fontSize: 10 } }) },
|
|
|
+ ]
|
|
|
+ : { type: 'value', min: 0, max: 100, interval: 25, ...axisStyle() },
|
|
|
series: [
|
|
|
{
|
|
|
name: 'RSI', type: 'line', data: values, symbol: 'none', smooth: true,
|
|
|
@@ -495,19 +629,52 @@ export function rsiLineOption(series) {
|
|
|
data: [{ name: '当前', value: values[values.length - 1], xAxis: dates[dates.length - 1], yAxis: values[values.length - 1] }],
|
|
|
},
|
|
|
},
|
|
|
+ ...(hasClose ? [{
|
|
|
+ name: '指数走势',
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data: closeAligned,
|
|
|
+ symbol: 'none',
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: { color: C.warn, width: 1.6 },
|
|
|
+ markPoint: {
|
|
|
+ symbol: 'circle', symbolSize: 7,
|
|
|
+ itemStyle: { color: C.warn, borderColor: '#fff', borderWidth: 2 },
|
|
|
+ label: { formatter: (p) => p.value.toFixed(0), color: C.warn, fontSize: 10, position: 'bottom', fontWeight: 600 },
|
|
|
+ data: [{ name: '当前指数走势', value: lastClose, xAxis: lastCloseDate, yAxis: lastClose }],
|
|
|
+ },
|
|
|
+ }] : []),
|
|
|
],
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// ===== VOSC 单线 =====
|
|
|
-export function voscLineOption(series) {
|
|
|
+export function voscLineOption(series, closeSeries) {
|
|
|
const dates = series.map((s) => s[0])
|
|
|
const values = series.map((s) => s[1])
|
|
|
+ const hasClose = Array.isArray(closeSeries) && closeSeries.length > 0
|
|
|
+ const closeMap = hasClose ? new Map(closeSeries.map(([d, v]) => [d, v])) : null
|
|
|
+ const closeAligned = hasClose ? dates.map((d) => (closeMap.has(d) ? closeMap.get(d) : null)) : []
|
|
|
+ const lastClose = hasClose ? closeSeries[closeSeries.length - 1][1] : null
|
|
|
+ const lastCloseDate = hasClose ? closeSeries[closeSeries.length - 1][0] : null
|
|
|
+ const legendData = [{ name: 'VOSC', itemStyle: { color: C.up } }]
|
|
|
+ if (hasClose) legendData.push({ name: '指数走势', itemStyle: { color: C.warn } })
|
|
|
return {
|
|
|
tooltip: { ...tipOpt, trigger: 'axis', axisPointer: { type: 'line' }, valueFormatter: (v) => v.toFixed(3) },
|
|
|
- grid: { top: 28, left: 50, right: 24, bottom: 32, containLabel: true },
|
|
|
+ legend: {
|
|
|
+ data: legendData,
|
|
|
+ top: 4,
|
|
|
+ textStyle: { color: C.mut, fontSize: 11 },
|
|
|
+ itemWidth: 14,
|
|
|
+ },
|
|
|
+ grid: { top: 36, left: 50, right: hasClose ? 60 : 24, bottom: 32, containLabel: true },
|
|
|
xAxis: { type: 'category', data: dates, ...axisStyle({ axisLabel: { color: C.mut, fontSize: 10.5 } }) },
|
|
|
- yAxis: { type: 'value', ...axisStyle() },
|
|
|
+ yAxis: hasClose
|
|
|
+ ? [
|
|
|
+ { type: 'value', ...axisStyle() },
|
|
|
+ { type: 'value', name: '指数走势', position: 'right', ...axisStyle({ splitLine: { show: false }, nameTextStyle: { color: C.warn, fontSize: 10 } }) },
|
|
|
+ ]
|
|
|
+ : { type: 'value', ...axisStyle() },
|
|
|
series: [
|
|
|
{
|
|
|
name: 'VOSC', type: 'line', data: values, symbol: 'none', smooth: true,
|
|
|
@@ -521,10 +688,10 @@ export function voscLineOption(series) {
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
- markLine: {
|
|
|
- symbol: ['none', 'none'],
|
|
|
- data: [{ yAxis: 0, lineStyle: { color: C.mut, type: 'dashed' }, label: { show: true, position: 'end', formatter: '零轴', color: C.mut, fontSize: 10 } }],
|
|
|
- },
|
|
|
+ // markLine: {
|
|
|
+ // symbol: ['none', 'none'],
|
|
|
+ // data: [{ yAxis: 0, lineStyle: { color: C.mut, type: 'dashed' }, label: { show: true, position: 'end', formatter: '零轴', color: C.mut, fontSize: 10 } }],
|
|
|
+ // },
|
|
|
markPoint: {
|
|
|
symbol: 'circle', symbolSize: 8,
|
|
|
itemStyle: { color: C.up, borderColor: '#fff', borderWidth: 2 },
|
|
|
@@ -532,6 +699,21 @@ export function voscLineOption(series) {
|
|
|
data: [{ name: '当前', value: values[values.length - 1], xAxis: dates[dates.length - 1], yAxis: values[values.length - 1] }],
|
|
|
},
|
|
|
},
|
|
|
+ ...(hasClose ? [{
|
|
|
+ name: '指数走势',
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data: closeAligned,
|
|
|
+ symbol: 'none',
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: { color: C.warn, width: 1.6 },
|
|
|
+ markPoint: {
|
|
|
+ symbol: 'circle', symbolSize: 7,
|
|
|
+ itemStyle: { color: C.warn, borderColor: '#fff', borderWidth: 2 },
|
|
|
+ label: { formatter: (p) => p.value.toFixed(0), color: C.warn, fontSize: 10, position: 'bottom', fontWeight: 600 },
|
|
|
+ data: [{ name: '当前指数走势', value: lastClose, xAxis: lastCloseDate, yAxis: lastClose }],
|
|
|
+ },
|
|
|
+ }] : []),
|
|
|
],
|
|
|
}
|
|
|
}
|