上下堆叠图

最新推荐文章于 2024-09-13 10:46:15 发布

熳林

最新推荐文章于 2024-09-13 10:46:15 发布

阅读量401

点赞数

文章标签： echarts 前端

本文链接：https://blog.csdn.net/ML_18239943315/article/details/121613838

版权

optionThirdTop:{
          title: {
            left: "center" //title 组件离容器左侧的距离，也可以是像素，和百分比
          },
          tooltip: {
            trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
            axisPointer: {     // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' | 'cross' , shadow表示阴影，cross为十字准星
            },
          },
          legend: {
            textStyle: { //图例文字的样式
              color: '#fff',
            },
            data: ['组1进','组1出','组2进','组2出','组3进','组3出','组4进','组4出','组5进','组5出','组6进','组6出' ],
            left: "5%" //组件离容器左侧的距离，可以是left,center,right，也可以是像素px和百分比10%
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '9%', //网格图（柱状图、折线图、气泡图等）离底部的距离，也可以用像素比如10px
            containLabel: true //grid 区域是否包含坐标轴的刻度标签。false可能溢出，默认为false
          },

          xAxis: [{
            type: 'category',
            axisTick: {
              show: true
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'  //这里用参数代替了
              }
            },
            position:'center',
            data:  [  '07:00', '09:00', '11:00', '13:00', '15:00','17:00', '19:00', '21:00', '23:00']
          }],
          yAxis: [{
            type: 'value',
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color:'#ffffff' //这里用参数代替了
              }
            },
          }],
          series: [  {
            name: '组1进',
            type: 'bar',
            stack: 'total',
            color:'#ffffff',
            data: [320, 302, 301, 334, 390, 330, 320, 220, 212]
          },
            {
              name: '组1出',
              type: 'bar',
              stack: 'total',
              color:'#ffffff',
              data: [-320, -302, -301, -334, -390, -330, -320, -220, -212]
            },
            {
              name: '组2进',
              type: 'bar',
              stack: 'total',
              color:'#40888C',
              data: [120, 132, 101, 134, 90, 230, 210, 320, 212]
            },
            {
              name: '组2出',
              type: 'bar',
              stack: 'total',
              color:'#40888C',
              data: [-120, -132, -101, -134, -90, -230, -210, -320, -212]
            },
            {
              name: '组3进',
              type: 'bar',
              stack: 'total',
              color:'#525A58',
              data: [220, 182, 191, 234, 290, 330, 310, 320, 212]
            },
            {
              name: '组3出',
              type: 'bar',
              stack: 'total',
              color:'#525A58',
              data: [-220, -182, -191, -234, -290, -330, -310, -320, -212]
            },
            {
              name: '组4进',
              type: 'bar',
              stack: 'total',
              color:'#797CFF',
              data: [150, 212, 201, 154, 190, 330, 410, 320, 212]
            },{
              name: '组4出',
              type: 'bar',
              stack: 'total',
              color:'#797CFF',
              data: [-150, -212, -201, -154, -190, -330, -410, -320, -212]
            },
            {
              name: '组5进',
              type: 'bar',
              stack: 'total',
              color:'#58CFFF',
              data: [820, 832, 901, 934, 1290, 130, 120, 320, 212]
            },
            {
              name: '组5出',
              type: 'bar',
              stack: 'total',
              color:'#58CFFF',
              data: [-820, -832, -901, -934, -1290, -130, -120, -320, -212]
            },
            {
              name: '组6进',
              type: 'bar',
              stack: 'total',
              color:'#3444FF',
              data: [150, 212, 201, 154, 190, 330, 410, 320, 212]
            },
            {
              name: '组6出',
              type: 'bar',
              stack: 'total',
              color:'#3444FF',
              data: [-150, -212, -201, -154, -190, -330, -410, -320, -212]
            },
          ]
        },