80 lines
2.1 KiB
JavaScript
80 lines
2.1 KiB
JavaScript
|
|
export default function getLineChartOption({
|
|
xAxisData = [],
|
|
seriesData = [],
|
|
// legendData = [],
|
|
isDarkMode = false,
|
|
}) {
|
|
|
|
// const defaultColors = isDarkMode
|
|
// ? ['#D32029', '#31B47B', '#D89614'] : ['#F5222D', '#31B47B', '#FAAD14'];
|
|
|
|
const defaultColors = isDarkMode
|
|
? ['#31B47B', '#D89614', '#D32029'] : ['#31B47B', '#FAAD14', '#F5222D'];
|
|
|
|
const styledSeries = seriesData.map((item, index) => {
|
|
const color = item.color || defaultColors[index % defaultColors.length];
|
|
return {
|
|
...item,
|
|
showSymbol: true, // Show symbol at each data point
|
|
itemStyle: {
|
|
color,
|
|
},
|
|
};
|
|
});
|
|
|
|
return {
|
|
grid: {
|
|
left: '3%',
|
|
right: '5%',
|
|
top: '25%',
|
|
bottom: '0%',
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
// data: legendData,
|
|
icon: 'circle',
|
|
top: '0%',
|
|
right: '5%',
|
|
orient: 'horizontal',
|
|
textStyle: {
|
|
color: isDarkMode ? 'white' : '#676A7B',
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
data: xAxisData,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: isDarkMode ? '#AAAAAA' : '#333333',
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: isDarkMode ? '#676A7B' : '#676A7B',
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
position: 'left',
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: isDarkMode ? '#AAAAAA' : '#333333',
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: isDarkMode ? '#676A7B' : '#676A7B',
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: isDarkMode ? '#444444' : '#EEEEEE',
|
|
},
|
|
},
|
|
},
|
|
series: styledSeries,
|
|
};
|
|
}
|