echarts柱状堆叠图实现示例(图例和x轴都是动态的)

更新时间：2023年04月01日 11:35:04 作者：崽崽的谷雨

一些柱形图在数据量比较多的时候,横向排列受到挤压,导致柱形图,变的非常细,影响整体的效果,下面这篇文章主要给大家介绍了关于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柱状堆叠图的文章就介绍到这了,更多相关echarts柱状堆叠图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

BootStrap的select2既可以查询又可以输入的实现代码
这篇文章主要介绍了bootstrap的select2既可以查询又可以输入的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-02-02
JavaScript实现鼠标拖拽效果
这篇文章主要为大家详细介绍了JavaScript实现鼠标拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
微信小程序实现云开发上传文件、图片功能
在使用小程序的过程中,在编辑个人资料时,通常会面临上传头像、上传背景图片的情况,而这个开发过程需要怎样实现呢?这篇文章主要给大家介绍了关于微信小程序实现云开发上传文件、图片功能的相关资料,需要的朋友可以参考下
2022-12-12
JavaScript实现飞舞的泡泡效果
这篇文章主要为大家详细介绍了JavaScript实现飞舞的泡泡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
js利用FileReader实现图片转base64格式并上传预览头像
本文主要介绍了js利用FileReader实现图片转base64格式并上传预览头像，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-05-05
如何在JavaScript中比较日期详解
我们在日常开发过程中经常会用到JavaScript语言在前端代码中,进行日期的选择,下面这篇文章主要给大家介绍了关于如何在JavaScript中比较日期的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
javascript最基本的函数汇总
这篇文章主要给大家汇总介绍了javascript最基本的7个函数，十分的实用，有需要的小伙伴可以参考下。
2015-06-06
IE6,IE7,IE8下使用Javascript记录光标选中范围（已补全）
IE6,7,8下使用Javascript记录光标选中范围（已补全）（已解决单个节点内部重复字符的问题）
2011-08-08
小程序click-scroll组件设计
这篇文章主要介绍了小程序click-scroll组件设计，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-06-06
世界上最短的数字判断js代码
本文给大家分享世界上最短的数字判断js代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-09-09