echarts多系列柱图数据转化纪录一次最近遇到了一个联调过程中遇到的一个转化数据结构的过程多系列柱图基本展示效果图

纪录一次最近遇到了一个联调过程中遇到的一个转化数据结构的过程

多系列柱图基本展示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多组柱状图</title>
    <script src="echarts.js"></script>
</head>
<body>
    <div id="chart" style="width: 800px;height:400px;"></div>
    <script>
        var data1 = [120, 200, 150];
        var data2 = [180, 160, 210];
        var xAxisData = ['A', 'B', 'C'];

        var chart = echarts.init(document.getElementById('chart'));

        var option = {
            title: {
                text: '多组柱状图'
            },
            tooltip: {},
            legend: {
                data:['数据1', '数据2']
            },
            xAxis: {
                data: xAxisData
            },
            yAxis: {},
            series: [{
                name: '数据1',
                type: 'bar',
                data: data1
            }, {
                name: '数据2',
                type: 'bar',
                data: data2
            }]
        };

        chart.setOption(option);
    </script>
</body>
</html>

效果图

如果是真实项目中使用到多系列的柱图，后端会给你这么完善的数据结构吗，显而易见后端不可能给你这么好的数据结构，因为后端数据往往是动态数的，就像上图中A,B,C中有几个系列都是不确定的，有几种类型的数据如图类型一，类型二也是不确定的，下面我写一个后端给我的数据结构

const obj = {
 2019:[{amount:190000,name:'苹果'}]，
 2020:[{amount:100000,name:'香蕉'}]
}

如果是这个结构要在柱图上展示多系列，x轴展示的是年份数据，所以我就像后端把对象obj中的key写成了name(苹果)，接下来就是你可能你还需要一组x轴的数据，你可以循环对象，也可以让后端直接把数据给你。legend数据可能你要自己手动循环取出来一下，接下来中比较麻烦的就是把series数据给转化出来，直接上代码

处理年份数据不连续的问题

const fillGaps = (data,arr)=>{
    const years = [];  
  data.forEach(item => years.push(Number(item.year)));    
  for (let i =arr[0]; i <= arr[1]; i++) {  
    if (!data.find(item => Number(item.year) === i)) {  
      data.push({ year: i.toString(), amount: '0.0' });  
    }  
  }  
  return data;  
}

在给serise数据追加的过程中，要按照年份数据，从小到大的顺序，不然年份数据可能会混乱

   for (const key in barGraphDTOMap) {
            if (Object.prototype.hasOwnProperty.call(barGraphDTOMap, key)) {
                // 柱子的个数取决于 barGraphDTOMap这个对象key的个数
                const element = barGraphDTOMap[key];
                element?.sort((a,b)=>{
                    return a?.year-b?.year
                })
                barGraphDTOMap[key] = element?.map(v=>v.amount)
            }
        }