echarts 柱状堆叠图（图例和x轴都是动态的）

Posted 2023-04-07 崽崽的谷雨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts 柱状堆叠图（图例和x轴都是动态的）相关的知识，希望对你有一定的参考价值。

问题描述：

echarts柱状堆叠图，是很常用的图表，官网的例子很简单。图例（legend），x轴（xAxis）都是写死的。但是一般实际应用中都是动态的。下面就举个例子，实现图例和x轴都是动态的柱状堆叠图。

echarts 官网柱状堆叠图示例

实现思路及步骤：

思路：通过官网的例子，我们能知道

xAxis 是一个数组
series 是一个数组对象其中name需要对应着的是图例，有几个图例 series里就应该有几个项。需要把你的数据处理成和例子数据结构一样的。
stack 这个属性很重要 Documentation - Apache ECharts stack API，官网的例子里是三个柱状图并列。stack 相同的就会堆叠在一起（stack 有几个他就会有几排并列，官网例子里有Ad,Search Engine他就有两个堆叠，去掉没有 stack属性的就能看到了）。

知道了这些就很清晰了。

第一步就是遍历数据，找出 x轴的数据（切记要去重）
遍历数据生成 series

其实就是对数据的处理。

示例：

把这样的数据做成堆叠图

let data = [
         日期: '2022-08-16', 要素名称: '空调液加注-正压压力', 报警总次数: 15 ,
         日期: '2022-08-16', 要素名称: '空调液加注-正压检漏值', 报警总次数: 3 ,
         日期: '2022-08-16', 要素名称: '刹车液加注-正压压力', 报警总次数: 5 ,
         日期: '2022-08-17', 要素名称: '刹车液加注-二次抽真空值', 报警总次数: 6 ,
         日期: '2022-08-17', 要素名称: '刹车液加注-二次抽真空时间', 报警总次数: 6 ,
         日期: '2022-08-17', 要素名称: '刹车液加注-加注量', 报警总次数: 3 ,
         日期: '2022-08-17', 要素名称: '空调液加注-正压压力', 报警总次数: 45 , ,
         日期: '2022-08-17', 要素名称: '刹车液加注-真空检漏值', 报警总次数: 3 ,
         日期: '2022-08-17', 要素名称: '刹车液加注-含水量', 报警总次数: 3 ,
         日期: '2022-08-17', 要素名称: '刹车液加注-真空检漏时间', 报警总次数: 3 ,
         日期: '2022-08-17', 要素名称: '空调液加注-二次抽真空值', 报警总次数: 3 ,
         日期: '2022-08-17', 要素名称: '刹车液加注-正压压力', 报警总次数: 15 ,
         日期: '2022-08-18', 要素名称: '刹车液加注-加注量', 报警总次数: 6 ,
         日期: '2022-08-18', 要素名称: '刹车液加注-正压压力', 报警总次数: 23 ,
         日期: '2022-08-18', 要素名称: '刹车液加注-正压检漏值', 报警总次数: 3 ,
         日期: '2022-08-18', 要素名称: '空调液加注-加注量', 报警总次数: 3 ,
         日期: '2022-08-18', 要素名称: '刹车液加注-精真空值', 报警总次数: 6 ,
         日期: '2022-08-18', 要素名称: '空调液加注-正压压力', 报警总次数: 69 ,
         日期: '2022-08-18', 要素名称: '空调液加注-正压检漏时间', 报警总次数: 3 ,
         日期: '2022-08-19', 要素名称: '刹车液加注-含水量', 报警总次数: 6 ,
         日期: '2022-08-19', 要素名称: '刹车液加注-正压压力', 报警总次数: 31 ,
         日期: '2022-08-19', 要素名称: '刹车液加注-精真空值', 报警总次数: 12 ,
         日期: '2022-08-19', 要素名称: '空调液加注-正压压力', 报警总次数: 99 ,
         日期: '2022-08-19', 要素名称: '刹车液加注-真空检漏值', 报警总次数: 6 ,
         日期: '2022-08-19', 要素名称: '空调液加注-正压检漏值', 报警总次数: 6 ,
         日期: '2022-08-19', 要素名称: '空调液加注-正压检漏时间', 报警总次数: 6 ,
         日期: '2022-08-19', 要素名称: '空调液加注-真空检漏值', 报警总次数: 12 ,
         日期: '2022-08-20', 要素名称: '刹车液加注-加注量', 报警总次数: 12 ,
         日期: '2022-08-20', 要素名称: '刹车液加注-含水量', 报警总次数: 12 ,
         日期: '2022-08-20', 要素名称: '刹车液加注-正压检漏值', 报警总次数: 9 ,
         日期: '2022-08-20', 要素名称: '刹车液加注-正压检漏时间', 报警总次数: 6 ,
         日期: '2022-08-20', 要素名称: '刹车液加注-真空检漏时间', 报警总次数: 9 ,
         日期: '2022-08-20', 要素名称: '空调液加注-加注量', 报警总次数: 9 ,
         日期: '2022-08-20', 要素名称: '刹车液加注-真空检漏值', 报警总次数: 9 ,
         日期: '2022-08-20', 要素名称: '空调液加注-正压检漏值', 报警总次数: 12 ,
         日期: '2022-08-20', 要素名称: '空调液加注-真空检漏值', 报警总次数: 15 ,
    ];

代码：

把该代码复制到官网例子里就能看到效果。

let data = [
         日期: '2022-08-16', 要素名称: '空调液加注-正压压力', 报警总次数: 15 ,
         日期: '2022-08-16', 要素名称: '空调液加注-正压检漏值', 报警总次数: 3 ,
         日期: '2022-08-16', 要素名称: '刹车液加注-正压压力', 报警总次数: 5 ,
         日期: '2022-08-17', 要素名称: '刹车液加注-二次抽真空值', 报警总次数: 6 ,
         日期: '2022-08-17', 要素名称: '刹车液加注-二次抽真空时间', 报警总次数: 6 ,
         日期: '2022-08-17', 要素名称: '刹车液加注-加注量', 报警总次数: 3 ,
         日期: '2022-08-17', 要素名称: '空调液加注-正压压力', 报警总次数: 45 , ,
         日期: '2022-08-17', 要素名称: '刹车液加注-真空检漏值', 报警总次数: 3 ,
         日期: '2022-08-17', 要素名称: '刹车液加注-含水量', 报警总次数: 3 ,
         日期: '2022-08-17', 要素名称: '刹车液加注-真空检漏时间', 报警总次数: 3 ,
         日期: '2022-08-17', 要素名称: '空调液加注-二次抽真空值', 报警总次数: 3 ,
         日期: '2022-08-17', 要素名称: '刹车液加注-正压压力', 报警总次数: 15 ,
         日期: '2022-08-18', 要素名称: '刹车液加注-加注量', 报警总次数: 6 ,
         日期: '2022-08-18', 要素名称: '刹车液加注-正压压力', 报警总次数: 23 ,
         日期: '2022-08-18', 要素名称: '刹车液加注-正压检漏值', 报警总次数: 3 ,
         日期: '2022-08-18', 要素名称: '空调液加注-加注量', 报警总次数: 3 ,
         日期: '2022-08-18', 要素名称: '刹车液加注-精真空值', 报警总次数: 6 ,
         日期: '2022-08-18', 要素名称: '空调液加注-正压压力', 报警总次数: 69 ,
         日期: '2022-08-18', 要素名称: '空调液加注-正压检漏时间', 报警总次数: 3 ,
         日期: '2022-08-19', 要素名称: '刹车液加注-含水量', 报警总次数: 6 ,
         日期: '2022-08-19', 要素名称: '刹车液加注-正压压力', 报警总次数: 31 ,
         日期: '2022-08-19', 要素名称: '刹车液加注-精真空值', 报警总次数: 12 ,
         日期: '2022-08-19', 要素名称: '空调液加注-正压压力', 报警总次数: 99 ,
         日期: '2022-08-19', 要素名称: '刹车液加注-真空检漏值', 报警总次数: 6 ,
         日期: '2022-08-19', 要素名称: '空调液加注-正压检漏值', 报警总次数: 6 ,
         日期: '2022-08-19', 要素名称: '空调液加注-正压检漏时间', 报警总次数: 6 ,
         日期: '2022-08-19', 要素名称: '空调液加注-真空检漏值', 报警总次数: 12 ,
         日期: '2022-08-20', 要素名称: '刹车液加注-加注量', 报警总次数: 12 ,
         日期: '2022-08-20', 要素名称: '刹车液加注-含水量', 报警总次数: 12 ,
         日期: '2022-08-20', 要素名称: '刹车液加注-正压检漏值', 报警总次数: 9 ,
         日期: '2022-08-20', 要素名称: '刹车液加注-正压检漏时间', 报警总次数: 6 ,
         日期: '2022-08-20', 要素名称: '刹车液加注-真空检漏时间', 报警总次数: 9 ,
         日期: '2022-08-20', 要素名称: '空调液加注-加注量', 报警总次数: 9 ,
         日期: '2022-08-20', 要素名称: '刹车液加注-真空检漏值', 报警总次数: 9 ,
         日期: '2022-08-20', 要素名称: '空调液加注-正压检漏值', 报警总次数: 12 ,
         日期: '2022-08-20', 要素名称: '空调液加注-真空检漏值', 报警总次数: 15 ,
    ];
    console.log(data)
    let date = []; //x轴日期
    let lenged = []; //series的个数
    let s = [];
    data.map((item) => 
        date.push(item["日期"]);
        lenged.push(item["要素名称"]);

    );

    date = [...new Set(date)]; //去重
    lenged = [...new Set(lenged)];
    console.log(date, lenged)
    let series = [];
    lenged.map((item) =>  //生成  series
        let obj = 
            name: item,
            type: "bar",
            stack: "As",
            emphasis: 
                focus: 'series'
            ,
            data: []
        ;
        series.push(obj);
    );
    console.log(series)

    data.map((item) => //对series 的data进行处理

        series.map((item1) => 

            if (item1.name == item["要素名称"] && date.indexOf(item["日期"]) > -1) 
                item1.data[date.indexOf(item["日期"])] = item["报警总次数"]
            ;
        )
    )
   
option = 
  tooltip: 
    trigger: 'axis',
    axisPointer: 
      type: 'shadow'
    
  ,
  legend: ,
  grid: 
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  ,
  xAxis: [
    
      type: 'category',
      data: date
    
  ],
  yAxis: [
    
      type: 'value'
    
  ],
  series: series
;

echarts 柱状图由于数据太多导致数组柱重叠

参考技术A 使用echarts 柱状图犹豫x轴上的数据太多，导致柱状图叠在一起

我的解决办法是

X=x轴上的数据组

var namenum=Math.floor(100/(X.length/5)); // 这个5 可以顺便调整是用来判断当前视图要显示几个

if (X.length>6) // 6也可以调整用来判断是否显示滚动条

var showEchart=true;

else

var showEchart=false;

,

dataZoom: [ // 这是滚动条

show: showEchart, // 是否展示

xAxisIndex: [0], // 控制第一个x轴

height: 15,

left: 100,

right: 100,

bottom: 0,

start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。

end: namenum, // 数据窗口范围的结束百分比。范围是：0 ~ 100。

handleSize: "110%",

zoomLock: true, //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true

,

]

改过之后

可以进行滚动条操作当前数据

以上是关于echarts 柱状堆叠图（图例和x轴都是动态的）的主要内容，如果未能解决你的问题，请参考以下文章

Echarts堆叠柱状图

echarts 柱状图由于数据太多导致数组柱重叠

echarts 图例之间的间距怎么设置

echarts堆叠柱状图设置顶层的柱子设置圆角

echarts 多系列柱状图

echarts 柱状图怎么排序