luoyang-screen/src/page/LinePage/Right/LineChart/chart.config.ts
2024-08-27 10:48:46 +08:00

100 lines
2.1 KiB
TypeScript

import * as echarts from "echarts";
export default function getOptions(tempData: any) {
if (Object.keys(tempData).length === 0) {
return null;
}
const colors = ["#1A99FF", "#50F4E3"];
return {
color: colors,
grid: { top: 30, right: 12, bottom: 10, left: 10, containLabel: true },
legend: {
show: true,
icon: "roundRect",
top: 10,
right: 10,
padding: 0,
itemWidth: 10,
itemHeight: 10,
itemGap: 3,
height: 10,
textStyle: {
color: "#DFF1FE",
fontSize: 14,
},
},
xAxis: {
type: "category",
data: tempData.time,
// data: Array(7)
// .fill(1)
// .map((_, index) => {
// const today = new Date();
// const dtimestamp =
// today.getTime() - (index + 1) * 24 * 60 * 60 * 1000;
// return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
// dtimestamp
// ).getDate()}`;
// })
// .reverse(),
axisLabel: {
color: "#fff",
fontSize: 14,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 2,
color: "#5982B2",
},
},
},
yAxis: {
name: "单位/千片",
nameTextStyle: {
color: "#fff",
fontSize: 14,
},
type: "value",
axisLabel: {
color: "#fff",
fontSize: 14,
formatter: "{value}",
},
axisLine: {
show: true,
lineStyle: {
width: 2,
color: "#5982B2",
},
},
splitLine: {
lineStyle: {
width: 2,
color: "#5982B2",
},
},
},
series: [
{
name: "投入",
type: "line",
symbol: "circle",
symbolSize: 4,
data: tempData.input,
},
{
name: "产出",
type: "line",
symbol: "circle",
symbolSize: 4,
data: tempData.output,
},
],
tooltip: {
trigger: "axis",
className: "luoyang-chart-tooltip",
show: false,
},
};
}