const options = {
backgroundColor: 'transparent',
animationDuration: 5000,
title: {
text: [`{a|[${fundInfo.stockName}] ${fundInfo.stockCode}}`, `{b|${(fundInfo.exunbusibuy / 10000).toFixed(2)}万元}`, `{c|${(fundInfo.exunbusisale / 10000).toFixed(2)}万元}`, `{${data.priceLimit == 0 ? 'd' : (data.priceLimit > 0 ? 'b' : 'c')}|${data.priceLimit}%}`].join(''),
left: 10,
top: 0,
textStyle: {
rich: {
a: {
color: '#fff',
fontSize: 13,
marginRight: '10px',
},
b: {
color: '#F50057',
fontSize: 13,
padding: [2, 4],
},
c: {
color: '#1de9b6',
fontSize: 13,
padding: [2, 4],
},
d: {
color: 'skyblue',
fontSize: 13,
padding: [2, 4],
},
},
},
},
tooltip: {
hideDelay: 500,
trigger: 'axis',
axisPointer: {
crossStyle: {
color: '#999',
},
},
},
visualMap: {
show: false,
seriesIndex: 1,
dimension: 2,
pieces: [
{
value: 1,
color: '#F50057',
},
{
value: -1,
color: '#1DE9B6',
},
],
},
axisPointer: {
link: [
{
xAxisIndex: 'all',
},
],
},
grid: [
{
left: 50,
right: 10,
top: 35,
width: '75%',
height: 120,
},
{
left: 50,
right: 10,
top: 165,
bottom: 0,
width: '75%',
height: 45,
},
],
xAxis: [
{
type: 'category',
axisTick: {
show: false,
},
axisPointer: {
type: 'shadow',
},
axisLine: {
show: false,
lineStyle: {
color: '#474747',
},
},
data: timeLineGroup,
axisLabel: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: '#E5E5E5',
width: 0.3,
type: 'solid',
},
},
boundaryGap: true,
},
{
gridIndex: 1,
type: 'category',
data: timeLineGroup,
boundaryGap: false,
axisLabel: {
interval: 0,
color: "#97DDFA",
formatter: function (val: any, index: any) {
if (index === 0) return '09:30';
if (index === 60) return '10:30';
if (index === 120) return '11:30/13:00';
if (index === 180) return '14:00';
if (index === 240) return '15:00';
return '';
},
},
axisTick: {
interval: function (index: any, value: any) {
const indexs = [0, 60, 120, 180, 240];
if (indexs.includes(index)) return true;
},
},
splitLine: {
show: false,
},
},
],
yAxis: [
{
type: 'value',
color: '#fff',
splitLine: {
show: true,
lineStyle: {
color: '#E5E5E5',
width: 0.1,
type: 'solid',
},
},
scale: true,
interval: data.lineYvalueGap,
min: data.lineYvalueMin,
max: data.lineYvalueMax,
z: 5,
axisLabel: {
show: true,
inside: true,
margin: -5,
fontSize: 12,
align: 'right',
formatter: function (value: any) {
if (value > data.preClosPrice) {
return '{red|' + value + '}';
} else {
return '{green|' + value + '}';
}
},
rich: {
green: { color: '#1DE9B6' },
red: { color: '#F50057' },
},
},
},
{
scale: true,
gridIndex: 1,
type: 'value',
min: data.barYvalueMin,
max: data.barYvalueMax,
splitNumber: 2,
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.2)',
type: 'solid',
},
},
axisTick: {
show: false,
},
axisLabel: {
inside: true,
show: true,
showMinlabel: true,
showMaxlabel: true,
color: '#fff',
margin: -5,
fontSize: 12,
align: 'right',
formatter: function (value: any, index: any) {
if (index === 0) {
return '0手';
}
return `${value}手`;
},
},
},
{
gridIndex: 0,
type: 'value',
max: data.fractionYvaluemMax,
min: data.fractionYvaluemMin,
interval: data.fractionYvaluemGap,
splitLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0.2)',
type: 'solid',
},
},
axisLine: {
show: false,
},
splitArea: {
show: false,
},
scale: true,
z: 3,
boundaryGap: false,
axisLabel: {
show: true,
inside: true,
margin: -5,
fontSize: 12,
align: 'left',
formatter: function (val: any) {
return `${val}%`;
},
textStyle: {
color: function (val: any, index: any) {
return val > 0 ? '#F50057' : val < 0 ? '#1DE9B6' : 'skyblue';
},
},
},
},
],
series: [
{
name: '当前价格',
type: 'line',
animation: false,
smooth: true,
symbol: 'none',
data: data.lineData,
lineStyle: {
color: 'skyblue',
width: 1,
},
z: 3,
markPoint: {
data: markPointData
},
},
{
name: '成交量',
type: 'bar',
animation: false,
xAxisIndex: 1,
yAxisIndex: 1,
data: data.barData,
barWidth: 1,
itemStyle: {
normal: {
color: function (params: any) {
if (params.data[2]) {
return '#F50057';
} else {
return '#1DE9B6';
}
},
},
},
},
],
};
