zoukankan      html  css  js  c++  java
  • 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',
                        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',
                        2,
                    },
                    symbol:['none','arrow']
                  },
              },
              series: [
                  {
                      name:'进车辆',
                      type: 'line',
                      smooth: true,
                      lineStyle:{
                        normal:{
                          color:'#4EEE79',
                          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',
                          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);
          }
          },
    

      

  • 相关阅读:
    git升级
    redis集群
    redis安装
    escript
    git搭建仓库与服务器
    svnsync
    post_commit.sh
    nvm安装和使用
    quartz 定时器
    Oracle flashback恢复误删的数据或表
  • 原文地址:https://www.cnblogs.com/sweeeper/p/11957165.html
Copyright © 2011-2022 走看看