Echarts 横向堆叠柱图

最新推荐文章于 2025-10-19 09:22:34 发布

原创最新推荐文章于 2025-10-19 09:22:34 发布 · 610 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

javascript 同时被 2 个专栏收录

18 篇文章

订阅专栏

echarts

8 篇文章

订阅专栏

此博客展示了如何使用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)

}