xinkeaboard/xinkeaboard-admin/src/pages/sysset/bigscreen/utils/getLineChartOptions.js

export default function ({ xAxisData, seriesData }, $echarts) {
  return {
    xAxis: {
      type: "category",
      data: xAxisData,
      axisLine: { lineStyle: { color: "#00ffe7", width: 2 } },
      axisLabel: {
        color: "#00ffe7",
        fontSize: 22,
        fontWeight: "bold",
        shadowColor: "#00ffe7",
        shadowBlur: 10,
      },
      splitLine: { show: false },
    },
    yAxis: {
      type: "value",
      axisLine: { lineStyle: { color: "#00ffe7", width: 2 } },
      axisLabel: {
        color: "#00ffe7",
        fontSize: 22,
        fontWeight: "bold",
        shadowColor: "#00ffe7",
        shadowBlur: 10,
      },
      splitLine: { lineStyle: { color: "rgba(0,255,231,0.1)" } },
    },
    series: [
      {
        data: seriesData,
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 16,
        lineStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: "#00ffe7" },
              { offset: 1, color: "#0078ff" },
            ],
          },
          width: 5,
          shadowColor: "#00ffe7",
          shadowBlur: 20,
        },
        itemStyle: {
          color: "#00ffe7",
          borderColor: "#fff",
          borderWidth: 4,
          shadowColor: "#00ffe7",
          shadowBlur: 10,
        },
        areaStyle: {
          color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(0,255,231,0.5)" },
            { offset: 1, color: "rgba(0,120,255,0.1)" },
          ]),
        },
      },
    ],
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,34,51,0.9)",
      borderColor: "#00ffe7",
      borderWidth: 2,
      textStyle: { color: "#00ffe7", fontSize: 26, fontWeight: "bold" },
      axisPointer: {
        lineStyle: {
          color: "#00ffe7",
          width: 3,
          type: "dashed",
        },
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
  };
}