const xAxis = (data) => {
return [
{
type: 'category',
interval: 0, // 必须显示x轴文字
axisTick: {
show: true,
},
axisLine: {
show: true, // 坐标轴横线
lineStyle: {
color: lineColor,
},
},
textStyle: {
color: textColor,
},
data,
},
{
gridIndex: 1,
type: 'category',
interval: 0, // 必须显示x轴文字
axisTick: {
show: true,
},
axisLine: {
show: true, // 坐标轴横线
lineStyle: {
color: lineColor,
},
},
textStyle: {
color: textColor,
},
data,
},
];
};
const grid = () => {
return [
{
left: 40,
bottom: '60%',
top: 28,
right: 40,
containLabel: true,
},
{
left: 40,
top: '52%',
right: 40,
containLabel: true,
bottom: 50,
},
];
};
const yAxis = (name1, name2, name3, name4, tip) => {
return [
{
type: 'value',
name: name1,
scale: false,
alignTicks: true, // 双y轴变为一条线
min: 0,
max: (value) => {
return value.max ? null : 1;
},
splitLine: {
lineStyle: {
type: 'dashed',
color: lineColor,
},
},
textStyle: {
color: textColor,
},
axisLabel: {
formatter(value) {
return `${value.toFixed(2)}`;
},
},
},
{
type: 'value',
name: name2,
scale: false,
alignTicks: true,
min: 0,
max: (value) => {
return value.max ? null : 1;
},
splitLine: {
lineStyle: {
type: 'dashed',
color: lineColor,
},
},
textStyle: {
color: textColor,
},
axisLabel: {
formatter(value) {
return `${value.toFixed(2)}`;
},
},
},
{
type: 'value',
name: name3,
gridIndex: 1,
scale: false,
alignTicks: true,
min: 0,
max: (value) => {
return value.max ? null : 1;
},
splitLine: {
lineStyle: {
type: 'dashed',
color: lineColor,
},
},
textStyle: {
color: textColor,
},
axisLabel: {
formatter(value) {
return `${value.toFixed(2)}`;
},
},
},
{
type: 'value',
name: name4,
gridIndex: 1,
scale: false,
alignTicks: true,
min: 0,
max: (value) => {
return value.max ? null : 1;
},
splitLine: {
lineStyle: {
type: 'dashed',
color: lineColor,
},
},
textStyle: {
color: textColor,
},
axisLabel: {
formatter(value) {
return `${value.toFixed(2)}`;
},
},
},
];
};
const series = (name1, name2, name3, name4, data1, data2, data3, data4) => {
return [
{
name: name1,
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 0,
emphasis: {
disabled: true,
focus: 'none',
},
data: data1,
},
{
name: name2,
type: 'line',
xAxisIndex: 0,
yAxisIndex: 1,
smooth: true,
symbol: 'none',
emphasis: {
disabled: true,
focus: 'none',
},
data: data2,
},
{
name: name3,
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 2,
emphasis: {
disabled: true,
focus: 'none',
},
data: data3,
},
{
name: name4,
type: 'line',
xAxisIndex: 1,
yAxisIndex: 3,
smooth: true,
symbol: 'none',
emphasis: {
disabled: true,
focus: 'none',
},
data: data4,
},
];
};
const tooltip = () => {
return {
trigger: 'axis',
textStyle: {
color: '#fff',
},
borderWidth: 1,
backgroundColor:
theme === 'dark' ? 'rgba(0, 0, 0,0.9)' : 'rgba(0,0,0,0.65)',
borderColor:
theme === 'dark' ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.16)',
formatter(params) {
let str = '';
str += `${params[0].name}
`;
for (let i = 0; i < params.length; i += 1) {
str +=
`
${
params[i].seriesName
}${params[i].seriesType === 'bar' ? '(亿元)' : '(%)'}` +
`${
params[i]?.data ? `${Number(params[i]?.data).toFixed(2)}` : '0.00'
}${params[i].seriesType === 'line' ? '%' : ''}`;
}
return str;
},
};
};
const option = (tip) => {
return {
animation: false,
animationDuration: 0, // 这里两个动画设置可以让图表更顺滑
animationEasing: 'cubicInOut', // 这里两个动画设置可以让图表更顺滑
color: ['#6998f6', '#efe8c8', '#8695f0', '#8cb6f7'],
legend: {
x: 'center',
y: 'buttom',
icon: 'react',
top: '94%',
textStyle: {
color: textColor,
},
itemWidth: 8,
itemHeight: 8,
},
grid: grid(),
tooltip: tooltip(),
// 将上下两个tootip合成一个
axisPointer: {
link: { xAxisIndex: 'all' },
},
xAxis: xAxis(tip ? xAxisExchange : xAxisBank),
yAxis: yAxis(
'大白',
'小黑',
'小红花',
'小绿',
'flag'
),
dataZoom: [
{
type: 'slider',
xAxisIndex: [0, 1], // 显示 0 1 的数据，这个要加，不加的话，悬浮提示就会出问题
show: true,
height: 16,
maxSpan,
// 刚进入页面 滚动条的位置
// startValue: moment(watchSelectRow?.firstBuyDay).format('YYYY-MM-DD'),
// endValue: moment(watchSelectRow?.finalSellDay).format('YYYY-MM-DD'),
},
],
series: series(
'大白',
'小黑',
'小红花',
'小绿',
data1,
data2,
data3,
data4
),
};
};
