Echarts在线免费图表

 
            option = {
   backgroundColor: '#031d33',
   tooltip: {
      trigger: "axis",
      axisPointer: {
         type: "shadow",
      },
   },
   legend: {
      top: "top",
      textStyle: {
         color: "#fff", // 文字的颜色。
         fontSize: 18,
      },
   },
   grid: {
      left: "4%",
      right: "4%",
      top: "25%",
      bottom: "10%",
      containLabel: true,
   },
   yAxis: {
      name: "万千瓦时",
      nameTextStyle: {
         fontSize: 20,
         color: "#fff",
      },
      type: "value",

      splitLine: {
         show: true,
         lineStyle: {
            color: "#1ebfda",
            type: "dashed",
         },
      },
      axisLine: {
         show: true,
         textStyle: {
            color: "#1ebfda",
         },
         lineStyle: {
            color: "#1ebfda", //刻度线的颜色
         },
      },
      axisTick: {
         show: false,
      },
      axisLabel: {
         color: "#fff",
         fontSize: 18,
      },
   },
   xAxis: {
      type: "category",
      data: [
         "一月",
         "二月",
         "三月",
         "四月",
         "五月",
         "六月",
         "七月",
         "八月",
         "九月",
         "十月",
         "十一月",
         "十二月",
      ],
      axisLine: {
         show: true,
         textStyle: {
            color: "#1ebfda",
         },
         lineStyle: {
            color: "#1ebfda", //刻度线的颜色
         },
      },
      axisTick: {
         show: false,
      },
      axisLabel: {
         color: "#fff",
         fontSize: 18,
      },
   },
   //  dataZoom: [
   //    //x轴滑动条
   //    {
   //      type: "slider",
   //      show: true,
   //      xAxisIndex: [0],
   //      bottom: "7%",
   //      start: 0, // 表示默认展示20%～80%这一段。
   //      end: 5,
   //      height: 10,
   //      fillerColor: "#14a8e5",
   //      borderColor: "#127fac",
   //      backgroundColor: "#127fac", //两边未选中的滑动条区域的颜色
   //      showDataShadow: false, //是否显示数据阴影 默认auto
   //      showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
   //    },
   //    {
   //      type: "inside",
   //      xAxisIndex: 0,
   //      zoomOnMouseWheel: false, //滚轮是否触发缩放
   //      moveOnMouseMove: true, //鼠标滚轮触发滚动
   //      moveOnMouseWheel: true,
   //    },
   //  ],
   color: [
      "#ffb141",
      "#1393ff",
      "#519bff",
      "#ff3b3b",
      "#51d8ff",
      "#51ff72",
      "#ff51bb",
      "#a3ff51",
      "#ffc851",
      "#ff7e51",
      "#ff5151",
      "#f151ff",

   ],
   series: [
      {
         name: "风",
         type: "bar",
         barWidth: 20,
         barGap: "40%",
         data: [
            430, 300, 320, 480, 410, 520, 570,
            610, 610, 440, 630, 630,
         ],
         itemStyle: {
            barBorderRadius: [4, 24, 0, 0],
         },
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
               offset: 0,
               color: '#ffaf40',
            },
            {
               offset: 1,
               color: '#ffd750'
            }
         ]),
      },
      {
         name: "光",
         type: "bar",
         barWidth: 20,
         barGap: "40%",
         data: [
            810, 580, 700,860, 810, 1010,
            1100, 1220, 1220, 1000, 1300, 1080,
         ],
         itemStyle: {
            barBorderRadius: [4, 24, 0, 0],
         },
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
               offset: 0,
               color: '#1392ff',
            },
            {
               offset: 1,
               color: '#00d9fa'
            }
         ]),
      }
   ],
};