echarts柱状图堆叠在一个柱子上

最新推荐文章于 2024-05-15 11:06:01 发布

三妹_day

最新推荐文章于 2024-05-15 11:06:01 发布

阅读量637

点赞数

分类专栏： echarts vue js问题文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/qq_26841153/article/details/129260576

版权

js问题同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

echarts

3 篇文章 0 订阅

订阅专栏

var colorList=['#63E6E2','#FFD60A','#FF7400','#3092FF']
var parttNames=['尖时段电费','峰时段电费','平时段电费','谷峰段电费']
var date=['01-02','01-03','01-04','01-04','01-05','01-06','01-07','01-08']
// data[0]-尖时段电费，ata[1]-峰时段电费，ata[2]-平时段电费，ata[3]-谷峰段电费
var data=[[23, 30,40, 60,20, 30,40, 60],[20, 30,40, 60,20, 30,40, 60],[23, 30,40, 60,20, 30,40, 60],[20, 30,40, 60,20, 30,40, 60]]
 
var series = []
parttNames.forEach((item,index)=>{
  var obj={
    name: item,
    type: 'bar',
    stack: '趋势图',   // 这里stack同一个值，表示为在一个柱子上，要想多个组堆叠，就设置多组不同的值
    label: {
       show: true,
       position: 'insideRight'
    },
    barWidth: '10%',
    data: data[index],
    color:colorList[index],
    tooltip:{
    axisLabel: {
          formatter: '{b} : {d}% \n {c}',
          color:'red',
      },
    }
  }
  series.push(obj)
})
 
var option = {
    color: ['#F56C6C', '#FFC53A', '#7CA870', '#999999'],
    legend:{
        textStyle:{
          color:'#95A8C2',
        },
      },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: date,
            splitLine: {show: false}, // 去除网格线
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'red',
                width: '1'
              }
            },
        }
    ],
    yAxis: [
      {
          type: 'value',
          name:'元',
          axisLabel: {
              formatter: '{value}w',
              color:'red',
          },
          splitLine: {show: true}, // 去除网格线
          axisLine: {
            show: false,
          },
      }
    ],
                         
    series:series,
}