• 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);
          }
          },
    

      

  • 相关阅读:
    vs2019编译错误:Exception Processing Message 0xc0000005 Parameters...
    error LNK2001
    Debug Assertion Failed
    对路径“………………”的访问被拒绝
    c语言打开文件为什么总是以二进制方式打开
    关于typedef的用法总结
    xml学习第一天
    关于VS2017编译成功系统找不到指定文件.exe的问题
    引入的外部js文件在html文件在浏览器中乱码显示
    结对作业(四则运算)
  • 原文地址:https://www.cnblogs.com/sweeeper/p/11957165.html
Copyright © 2020-2023  润新知