Echarts在线免费图表

 
            let data = {
   station: [22754.87, 24777.32, null, null, null],
   preview: [24019.03, 26470.5, 28723.29, 26470.5, 25450.5],
   heat: [25283.19, 27863.69, null, null, null],
   temp: [4.4, 2.9, 0.2, 1.5, 2.1],
   xData: ['11-16', '11-17', '11-18', '11-19', '11-20']
}
option = {
   backgroundColor:"#000",
   grid: {
      left: "10%",
      right: "13%",
      top: "20%",
      bottom: "10%"
   },
   legend: {
      data: ["预测负荷", "热源耗热量", "站耗热量", "室外温度"],
      textStyle: {
         color: "#fff",
         fontSize: 14
      },
      itemWidth: 10,
      itemHeight: 10,
      left: "center",
      top: "4%"
   },
   tooltip: {
      trigger: "axis",
      axisPointer: {
         // 坐标轴指示器，坐标轴触发有效
         type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      },
      padding: [8, 15],
      backgroundColor: "rgba(12, 51, 115,0.8)",
      borderColor: "rgba(3, 11, 44, 0.5)",
      textStyle: {
         color: "rgba(255, 255, 255, 1)"
      },
      formatter: "{b0}<br />{a0}(GJ): {c0}<br />{a1}(GJ): {c1}<br />{a2}(GJ): {c2}<br />{a3}(℃): {c3}"
   },
   xAxis: [
      {
         type: "category",
         data: data.xData,
         axisTick: {
            show: false // 不显示坐标轴刻度线
         },
         axisLine: {
            lineStyle: {
               color: "rgba(178,194,211,0.35)"
            }
         },
         axisLabel: {
            interval: 0,
            textStyle: {
               color: "#fff"
            }
         }
      }
   ],
   yAxis: [
      {
         type: "value",
         axisTick: {
            show: false // 不显示坐标轴刻度线
         },
         axisLabel: {
            formatter: "{value}",
            textStyle: {
               color: "#fff"
            }
         },
         splitLine: {
            lineStyle: {
               type: "dashed",
               color: "#344a53"
            }
         },
         min: 0
      },
      {
         type: "value",
         axisLabel: {
            show: true,
            interval: "auto",
            formatter: "{value}℃",
            textStyle: {
               color: "#fff"
            }
         },
         splitLine: {
            show: false // 不显示网格线
         },
         axisTick: {
            show: false // 不显示坐标轴刻度线
         },
         max: 30
      }
   ],
   series: [
      {
         name: "预测负荷",
         data: data.preview,
         type: "bar",
         barWidth: 12,
         yAxisIndex: 0,
         itemStyle: {
            // 柱子颜色渐变
            color: new echarts.graphic.LinearGradient(
               0,
               0,
               0,
               1,
               [
                  {
                     offset: 1,
                     color: "rgba(92,25,168,0)" // 0% 处的颜色
                  },
                  {
                     offset: 0,
                     color: "rgba(92,25,168,0.9)" // 100% 处的颜色
                  }
               ],
               false
            )
         }
      },
      {
         name: "热源耗热量",
         data: data.heat,
         type: "bar",
         barWidth: 12,
         yAxisIndex: 0,
         itemStyle: {
            // 柱子颜色渐变 
            color: new echarts.graphic.LinearGradient(
               0,
               0,
               0,
               1,
               [
                  {
                     offset: 1,
                     color: "#083056" // 0% 处的颜色
                  },
                  {
                     offset: 0,
                     color: "rgba(50,113,173,1)" // 100% 处的颜色
                  }
               ],
               false
            )
         }
      },
      {
         name: "站耗热量",
         data: data.station,
         type: "bar",
         barWidth: 12,
         yAxisIndex: 0,
         itemStyle: {
            // 柱子颜色渐变
            color: new echarts.graphic.LinearGradient(
               0,
               0,
               0,
               1,
               [
                  {
                     offset: 1,
                     color: "rgba(62,208,144,0)" // 0% 处的颜色
                  },
                  {
                     offset: 0,
                     color: "rgba(62,208,144,0.9)" // 100% 处的颜色
                  }
               ],
               false
            )
         }
      },

      {
         name: "室外温度",
         data: data.temp,
         type: "line",
         barWidth: 12,
         yAxisIndex: 1,
         smooth: true,
         itemStyle: {
            color: "#FEB434"
         }
      }
   ]
};