eCharts图表柱状图改变堆叠顺序(从上往下)

现状

        eCharts图表柱状图的默认堆叠顺序是从下往上的，有时候与实际的需求不太匹配。

 然而，产品想要的效果是这样的，

虽然这种需求很少，但还是有，那么笔者就简单实现一下这种效果，代码可以直接复制到eCharts官网运行~~（Examples - Apache ECharts）

代码实现

原来的代码，注意这里res是传入进来的数据，当然格式自定义，color就暂时写死5种颜色。注意这里的tooltip自定义写的，不然默认顺序与堆叠顺序相反

let res={
        yData:[{
            name: '组1',
            type: 'bar',
            stack: '总量',
            data: [320, 302, 301, 334, 390]
        },
        {
            name: '组2',
            type: 'bar',
            stack: '总量',
            data: [120, 132, 101, 134, 90]
        },
        {
            name: '组3',
            type: 'bar',
            stack: '总量',
            data: [220, 182, 191, 234, 290]
        },
        {
            name: '组4',
            type: 'bar',
            stack: '总量',
            data: [150, 232, 201, 154, 190]
        }],
      xData:[
      '星期一', '星期二', '星期三', '星期四', '星期五'
    ]
};
let legendName=res.yData.map((item)=>item.name);
let color=['#FF1493','#6495ED','#40E0D0','#FFDAB9','#000'];
option = {
    title: {
        text: '堆叠柱状图'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {            
            type: 'shadow'        
        },
        formatter: function (params) {
          let res='';
          for (let i = params.length - 1; i >=0; i--) {
          res += `<div style="display: flex;">
                    <div style="margin-right: 4px;">${params[i].marker}</div>
                    <div style="margin-right: 20px;">${params[i].seriesName}</div>
                    <div style="font-weight: bold;text-align: right;">${params[i].value}</div>
                  </div>`;
          }
          return res;
        },
    },
    legend: {
        data: legendName
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: res.xData
    },
    yAxis: {
        type: 'value'
    },
    series: res.yData,
    color:color
};

实现效果的代码，这里改了color采用动态分配符合数组长度的数组大小，不然reverse颜色乱套。

还有series数据也使用reverse。

let res={
        yData:[{
            name: '组1',
            type: 'bar',
            stack: '总量',
            data: [320, 302, 301, 334, 390]
        },
        {
            name: '组2',
            type: 'bar',
            stack: '总量',
            data: [120, 132, 101, 134, 90]
        },
        {
            name: '组3',
            type: 'bar',
            stack: '总量',
            data: [220, 182, 191, 234, 290]
        },
        {
            name: '组4',
            type: 'bar',
            stack: '总量',
            data: [150, 232, 201, 154, 190]
        }],
      xData:[
      '星期一', '星期二', '星期三', '星期四', '星期五'
    ]
};
let legendName=res.yData.map((item)=>item.name);
//注意这里的color需要截取，一种场景就是后端返回的数据组数可能小于4或者者大于4，不截取
//的话reverse后会出问题，颜色对应不上了
let color=['#FF1493','#6495ED','#40E0D0','#FFDAB9','#000'].slice(0,res.yData.length)
option = {
    title: {
        text: '堆叠柱状图'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {            
            type: 'shadow'        
        },
        formatter: function (params) {
          let res='';
          for (let i = params.length - 1; i >=0; i--) {
          res += `<div style="display: flex;">
                    <div style="margin-right: 4px;">${params[i].marker}</div>
                    <div style="margin-right: 20px;">${params[i].seriesName}</div>
                    <div style="font-weight: bold;text-align: right;">${params[i].value}</div>
                  </div>`;
          }
          return res;
        },
    },
    legend: {
        data: legendName
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: res.xData
    },
    yAxis: {
        type: 'value'
    },
    series: res.yData.reverse(),//这里reverse
    color:color.reverse()   //这里也reverse
};

 效果实现，总之就是数据reverse，颜色reverse，代码在eCharts官网运行