Echarts在线免费图表

 
            
// x轴数据
const xAxisData = [
   "0时",
   "1时",
   "2时",
   "3时",
   "4时",
   "5时",
   "6时",
   "7时",
   "8时",
   "9时",
   "10时",
   "11时",
   "12时",
   "13时",
   "14时",
   "15时",
   "16时",
   "17时",
   "18时",
   "19时",
   "20时",
   "21时",
   "22时",
   "23时",
   "24时"
]

// series中数据
const seriesData = [
   3.07,
   3.17,
   2.93,
   2.98,
   3.02,
   3.27,
   3.54,
   50.01,
   464.03,
   1051.66,
   1651.11,
   2075.18,
   2204.91,
   2170.55,
   1908.83,
   1488.4,
   893.61,
   312.64,
   17.07,
   2.41,
   2.35,
   5.33,
   3.24,
   3.41,
   0
]

option = {
   backgroundColor: 'rgba(12, 25, 61)',
   color: ["#029AFE"],
   tooltip: {
      trigger: "axis",
      textStyle: { color: "#fff", fontSize: 14 },
      className: "tooltip",
      order: "seriesDesc",
      renderMode: "html",
      backgroundColor: "#1b366a", // 设置背景颜色
      borderColor: "#1b366a", // 边框颜色
      formatter: (params) => {
         return `
            ${params[0].name}  <br/>
            ${params[0].marker}
            ${params[0].seriesName} :
            ${params[0].value == 0 ? "-" : Number(params[0].value).toLocaleString()}万千瓦`;
      },
   },
   legend: {
      data: ["光伏出力负荷"],
      top: "6%",
      right: 12,
      icon: "rect",
      itemHeight: 2,
      textStyle: {
         align: "right",
         color: "#fff",
         fontSize: 16,
      },
   },
   grid: {
      left: 12,
      right: 12,
      bottom: "3%",
      containLabel: true,
   },
   xAxis: [
      {
         type: "category",
         splitLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         axisLabel: {
            color: "#fff",
            fontSize: 16,
            interval: 1, // 不隔断直接显示
         },
         axisLine: {
            show: true,
            lineStyle: {
               color: "#ccc",
            },
         },
         data: xAxisData,
      },
   ],
   yAxis: [
      {
         type: "value",
         splitLine: {
            show: true,
            lineStyle: {
               type: [6, 8],
               dashOffset: 1,
               color: "rgba(255, 255, 255, 0.1)",
            },
         },
         axisLine: {
            show: true,
            lineStyle: {
               color: "#ccc",
            },
         },
         axisLabel: {
            show: true,
            color: "#fff",
            fontSize: 16,
         },
         axisTick: {
            show: false,
         },
      },
   ],
   series: [
      {
         name: "光伏出力负荷",
         type: "line",
         data: seriesData,
         symbol: "none",
         smooth: true,
         cursor: "default",
         width: 2,
         areaStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                     {
                        offset: 0,
                        color: "rgba(2, 154, 254,.4)",
                     },
                     {
                        offset: 1,
                        color: "rgba(2, 154, 254, 0)",
                     },
                  ],
                  false
               ),
               shadowColor: "rgba(2, 154, 254, .3)",
               shadowBlur: 2,
            },
         },
      },
   ],
};