echarts曲线图

drawLeftLine(){
        let drawLine = echarts.init(document.getElementById('data-left-middle-table-wrap'));
        let option = null;
        option = {
          tooltip: {
              trigger: 'axis'
          },
          color:['#52F478','#FFCD8B'],
          icon: "circle",
          legend: {
              x:'200px',
              y:'10px',
              data:['进车辆','出车辆'],
              textStyle:{
                fontSize: 14,//字体大小
                color: '#BBF6FF'//字体颜色
              },

          },
          grid: {
              left: '0px',
              // right: '0px',
              bottom: '0px',
              containLabel: true
          },
          xAxis: {
              type: 'category',
              name:'小时',
              nameGap:'15',
              show:true,
              boundaryGap:false,
              axisLabel:{
                textStyle:{
                  color:'#FFFFFF'
                }
              },
              splitArea : {
                show : false,
              },
              splitLine : {
                show :false,
              },
              axisLine:{
                lineStyle:{
                    color:'#BBF6FF',
                    width:2,
                },
                symbol:['none','arrow']
              },
              data: [0,2,4,6,8,10,12,14,16,18,20,22,24]
          },
          yAxis: {
              type: 'value',
              name:'数量',
              show:true,
              axisLabel:{
                textStyle:{
                  color:'#FFFFFF'
                }
              },
              splitArea : {
                show : false,
              },
              splitLine : {
                show :false,
              },
              axisLine:{
                lineStyle:{
                    color:'#BBF6FF',
                    width:2,
                },
                symbol:['none','arrow']
              },
          },
          series: [
              {
                  name:'进车辆',
                  type: 'line',
                  smooth: true,
                  lineStyle:{
                    normal:{
                      color:'#4EEE79',
                      width:3
                    }
                  },
                  areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: 'red'
                            }, {
                                offset: 1,
                                color: 'yellow'
                            }]),
                        },
                    },
                  data:[4,10, 40, 60, 100, 120,140,150,130,100,60,30,20]
              },
              {
                  name:'出车辆',
                  type:'line',
                  smooth: true,
                  lineStyle:{
                    normal:{
                      color:'#FFCD8B',
                      width:3
                    }
                  },
                  areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: '#4B4558'
                            }, {
                                offset: 1,
                                color: '#516359'
                            }]),
                        },
                    },
                  data:[3,8, 30, 50, 110, 100,80,100,120,90,60,20,10]
              }
          ]
      };
      if (option && typeof option === "object") {
          drawLine.setOption(option);
      }
      },

  

 

posted @ 2019-11-29 13:19  sweeeper  阅读(4193)  评论(0编辑  收藏  举报