Echarts 横向堆叠柱图

在这里插入图片描述

function echart() {
var echart0 = echarts.init(document.getElementById(‘echart0’));
let testData = [
{“equName”:"#1",“outputCoal”:3000,“outputRock”:4000,“planCoal”:50,“planRock”:60},
{“equName”:"#2",“outputCoal”:4000,“outputRock”:5000,“planCoal”:40,“planRock”:60},
{“equName”:"#3",“outputCoal”:5000,“outputRock”:6000,“planCoal”:50,“planRock”:60},
{“equName”:"#4",“outputCoal”:6000,“outputRock”:7000,“planCoal”:50,“planRock”:60},
{“equName”:"#5",“outputCoal”:7000,“outputRock”:8000,“planCoal”:30,“planRock”:60},
{“equName”:"#6",“outputCoal”:8200,“outputRock”:9000,“planCoal”:50,“planRock”:60}
]

function maxOutput(){
  return Math.max(...this.dataAll.map(e=>Math.max(e.outputCoal,e.outputRock)))
}
option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {
      top:'3%',
      right:'3%',
      textStyle:{
        color :'#'
      }
    },
    grid: {
      left: '2%',
      right: '5%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        textStyle: {
          color: '#0ce0ff',
          fontSize: 16
        },
      },
      axisLine: {
        lineStyle: {
          color: '#0ce0ff'
        }
      },
      splitLine:{
        show:true,
        lineStyle:{
          color:'#0ce0ff'
        }
      },
    },
    yAxis: {
      type: 'category',
      data: testData.map(e=>e.equName),
      axisLabel: {
        textStyle: {
          color: '#0ce0ff',
          fontSize: 16
        },
      },
      axisLine: {
        lineStyle: {
          color: '#0ce0ff'
        }
      },

    },
    series: [
      {
        name: '完成量1',
        type: 'bar',
        stack: 'coal',
        itemStyle:{
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: '#0ce0ff'
            }, {
              offset: 1,
              color: '#38e8ce'
            }]),
          },
        },
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: testData.map(e=>{
          let val =  e.outputCoal
          return {
            value: val,
            label : {
              show : val >= maxOutput / 10
            }
          }
        })
      },
      {
        name: '完成量2',
        type: 'bar',
        stack: 'coal',
        itemStyle:{
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: '#ff9702'
            }, {
              offset: 1,
              color: '#ffd045'
            }]),
          },
        },
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: testData.map(e=>{
          let val = e.planCoal == null || e.planCoal ===0 ? undefined :
            Math.abs(e.planCoal * 10000 - e.outputCoal)
          return {
            value : val,
            label:{
              show: val && val >= maxOutput / 10
            }
          }
        })
      },
      {
        name: '完成量3',
        type: 'bar',
        stack: 'rock',
        itemStyle:{
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: '#54d12f'
            }, {
              offset: 1,
              color: '#b6ff2b'
            }]),
          },
        },
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: testData.map(e=>{
          let val =  e.outputRock
          return {
            value: val,
            label : {
              show : val >= maxOutput / 10
            }
          }
        }),
      },{
        name: '完成量4',
        type: 'bar',
        stack: 'rock',
        itemStyle:{
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: '#8a51ec'
            }, {
              offset: 1,
              color: '#ab83f6'
            }]),
          },
        },
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: testData.map(e=>{
          let val = e.planRock == null || e.planRock ===0 ? undefined :
            Math.abs(e.planRock * 10000 - e.outputRock)
          return {
            value : val,
            label:{
              show: val && val >= maxOutput / 10
            }
          }
        }),
      },
    ]

}
echart0.setOption(option)

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值