Echarts在线免费图表

 
            var data ={
   xData:["枯水期","丰水期","平水期"],
   yData1:["20","6","18"],
   yData2:["15","8","16"],
   yName1:"监测值",
   yName2:"实际值",
   yLabel:"单位:mg/L"
}


option = {
   backgroundColor:'rgba(3, 72, 84, 1)',
   legend:{
      show:true,
      top:'6%',
      right:'5%',
      itemWidth:25,
      itemHeight:14,
      textStyle:{
         color:'#fff',
         fontSize:14,
         padding:[0,8,0,8]
      },
      data:[data.yName1,data.yName2]
   },
   tooltip:{
      trigger:'axis',
      axisPointer:{
         type:'shadow',
         label:{
            show:true,
            fontSize:14,
            borderColor:'#fff',
            shadowOffsetY:0,
         }
      }
   },
   grid:{
      left:'3%',
      right:'4%',
      top:'20%',
      bottom:'20%',
      containLabel:true
   },
   xAxis:[{
      type:'category',
      data:data.xData,
      axisTick:{
         show:false,
      },
      axisLabel:{
         textStyle:{
            color:"#FFFFFF",
            fontSize:14,
            fontWeight:400
         },
      },
      axisLine:{
         show:true,
         lineStyle:{
            color:"rgba(12,116,123,0.5)",
         },
      },
   }],
   yAxis:[{
      type:'value',
      min:0,
      max:25,
      name:data.yLabel,
      nameTextStyle:{
         color:"#FFFFFF",
      },
      boundaryGap:false,
      axisTick:{
         show:false,
      },
      axisLabel:{
         textStyle:{
            color:"#FFFFFF",
            fontSize:14,
            fontWeight:400
         },
      },
      splitLine:{
         show:true,
         lineStyle:{
            color:"rgba(12,116,123,0.5)",
         },
      },
      axisLine:{
         show:true,
         lineStyle:{
            color:"rgba(12,116,123,0.5)",
         },
      },
   }],
   series:[{
      name:data.yName1,
      type:'bar',
      data:data.yData1,
      barWidth:24,
      itemStyle:{
         color:new echarts.graphic.LinearGradient(0,0,0,1,[
            {
               offset:0,
               color:'rgba(42,245,152,1)',
            },
            {
               offset:1,
               color:'rgba(17,153,142,1)',
            },
         ]),
      }
   },
   {
      name:data.yName2,
      type:'bar',
      data:data.yData2,
      barWidth:24,
      barGap:"40%",
      barCategoryGap:"30%",
      itemStyle:{
         normal:{
            color:new echarts.graphic.LinearGradient(0,1,0,0,[
               {
                  offset:0,
                  color:'rgba(170,169,169,1)',
               },
               {
                  offset:1,
                  color:'rgba(255,255,255,1)',
               },
            ]),
         }
      }
   },
   ],
};