Echarts在线免费图表

 
            
let day = ["2024-01-01","2024-01-02","2024-01-03","2024-01-04","2024-01-05",];
let data1 = [10,5,6,2,2];
let data2 = [20,15,0,1,3];
let data3 = [0,1,8,1,6];
let data4 = [11,0,0,1,0];
let data5 = [13,5,1,0,0];
option = {
   backgroundColor:"#000000",
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(9, 24, 48, 0.5)",
          textStyle: {
            color: "#CFE3FC",
          },
        },
        legend: {
          data: ["紧急", "严重", "次要", "警告", "信息"],
          textStyle: {
            color: "#c2e9ed",
            fontSize: "14",
          },
        },
        grid: {
          left: "8%",
          right: "8%",
          top: "8%",
          bottom: "11%",
        },
        xAxis: {
          type: "category",
          data: day,
          boundaryGap: false,
          axisLine: {
            show: true, // 去掉轴线
          },
          axisTick: {
            show: false, // 去掉刻度线
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#c2e9ed", //X轴文字颜色
              fontSize: "12",
            },
          },
        },
        yAxis: {
          type: "value",
          minInterval: 1,
          axisLine: {
            show: true, // 去掉轴线
          },
          axisTick: {
            show: false, // 去掉刻度线
          },
          axisLabel: {
            textStyle: {
              color: "#FFF", // 设置 y 轴文字颜色为白色
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(77, 128, 254, 0.2)",
            },
          },
        },
        series: [
          {
            name: "紧急",
            type: "line",
            smooth: true,//是否是曲线
            symbol: "circle",
            symbolSize: 2,
            lineStyle: {
              color: "#E45959",
              width: 2,
              // type: "solid", // 直线类型，默认为实线，可选：'solid', 'dashed', 'dotted'
            },
            itemStyle: {
              color: "#E45959",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(89,89,26,0.1)",
                },
                {
                  offset: 1,
                  color: "rgba(89,89,26,0)",
                },
              ]),
            },
            data: data1,
          },
          {
            name: "严重",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 2,
            lineStyle: {
              color: "#E97659",
              width: 2,
            },
            itemStyle: {
              color: "#E97659",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(118,89,0,0.1)",
                },
                {
                  offset: 1,
                  color: "rgba(118,89,0,0)",
                },
              ]),
            },
            data: data2,
          },
          {
            name: "次要",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 2,
            lineStyle: {
              color: "#FFA059",
              width: 2,
            },
            itemStyle: {
              color: "#FFA059",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(160,89,26,0.1)",
                },
                {
                  offset: 1,
                  color: "rgba(160,89,26,0)",
                },
              ]),
            },
            data: data3,
          },
          {
            name: "警告",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 2,
            lineStyle: {
              color: "#FFC859",
              width: 2,
            },
            itemStyle: {
              color: "#FFC859",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(200,89,26,0.1)",
                },
                {
                  offset: 1,
                  color: "rgba(200,89,26,0)",
                },
              ]),
            },
            data: data4,
          },
          {
            name: "信息",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 2,
            lineStyle: {
              color: "#7499FF",
              width: 2,
            },
            itemStyle: {
              color: "#7499FF",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(153,255,26,0.1)",
                },
                {
                  offset: 1,
                  color: "rgba(153,255,26,0)",
                },
              ]),
            },
            data: data5,
          },
        ],
      };