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

echarts柱状堆叠图 echarts柱状图叠加 echarts堆积柱状图 2023-05-14 08:05:44 660人浏览八月长安

摘要

目录问题描述：实现思路及步骤：示例：代码：总结问题描述： echarts柱状堆叠图，是很常用的图表，官网的例子很简单。图例（lege

问题描述：

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柱状堆叠图内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

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

本文链接: https://www.lsjlt.com/news/202840.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

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

目录问题描述：实现思路及步骤：示例：代码：总结问题描述： echarts柱状堆叠图，是很常用的图表，官网的例子很简单。图例（lege...

99+

2023-05-14

echarts柱状堆叠图 echarts柱状图叠加 echarts堆积柱状图
Echarts横向堆叠柱状图和markLine实例详解

目录1.Echarts 横向堆叠柱状图 + markLine效果图代码如下：2.Echarts 横向堆叠柱状图 + markLine效果图代码如下总结1.Echarts 横向堆叠柱状...

99+

2024-04-02
vue echarts实现柱状图动态展示

本文实例为大家分享了vue echarts实现柱状图动态展示的具体代码，供大家参考，具体内容如下轮播图形式展现 <template> <div clas...

99+

2024-04-02
.net+FusionChart实现动态显示的柱状图和饼状图

html代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or...

99+

2024-04-02
Pyecharts教程(七)：使用pyecharts创建堆叠柱状图的示例

Pyecharts教程(七)：使用pyecharts创建堆叠柱状图的示例作者：安静到无声个人主页目录 Pyecharts教程(七)：使用pyecharts创建堆叠柱状图的示例完整代码推荐专栏 ...

99+

2023-08-30

信息可视化数据分析 python 原力计划
PyQt5可视化 7 饼图和柱状图实操案例 ④层叠柱状图和百分比柱状图及饼图的实现【超详解图文教程】

目录一、层叠柱状图 1 初始化层叠柱状图和绘制层叠柱状图函数 2 构造函数里调用 3 draw_sta来源地址：https://blog.csdn.net/qq_53317005/article/details/129135505...

99+

2023-09-29

python qt 信息可视化数据库
echarts实现3d柱状图的2种方式举例

目录echarts实现3d柱状图的两种方式方法1: echarts.graphic.extendShape 自定义图形方式2: 象型柱图(type: “pictorial...

99+

2023-02-23

echarts柱状图 echarts 3d柱状图 echarts 3D立体堆叠柱状图
基于Echarts实现绘制立体柱状图的示例代码

目录前言实现方法先写一个常规的柱状图echarts的配置选项效果图前言大家好，我是梁木由。之前在做大屏可视化项目时，UI设计了一个立体形状的柱状图，根据之前做的一些图表的项目没有能...

99+

2023-02-23

Echarts绘制立体柱状图 Echarts立体柱状图 Echarts柱状图
Echarts实现一张图现切换不同的X轴(实例代码)

效果图如果大家想实现如下图的效果那么久继续往下看吧，直接上动图！方法因为项目需要展示的数据图表比较多我选择的是把每一张图表封装成一个vue组件来引用。先上一个完整的代码，引...

99+

2024-04-02
Python实现双X轴双Y轴绘图的示例详解

诈尸人口回归。这一年忙着灌水忙到头都掉了，最近在女朋友的提醒下终于想起来博客的账号密码，正好今天灌水的时候需要画一个双X轴双Y轴的图，研究了两小时终于用Py实现了。找资料的过程中没有...

99+

2024-04-02
PyQt5可视化 7 饼图和柱状图实操案例 ③柱状图的实现【超详解】

目录一、柱状图 1 import新模块 2 初始化柱状图和绘制柱状图函数 3 反走样来源地址：https://blog.csdn.net/qq_53317005/article/details/129134181...

99+

2023-09-05

python qt ui 数据库
Python绘制多因子柱状图的实现示例

目录背景介绍软件介绍绘图教程最后背景介绍 R和Python作为两个开源、且容易上手的数据分析和绘图工具，在科研中应用的比较广泛。在接下来的日子，我们围绕Python进行绘图和数据分...

99+

2024-04-02
R语言如何实现柱状图排序和x轴上的标签倾斜操作

这篇文章将为大家详细讲解有关R语言如何实现柱状图排序和x轴上的标签倾斜操作，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。R语言做柱状图大致有两种方法，一种是基础库里面的 barplot函数，另一个就是...

99+

2023-06-14
vue中实现当前时间echarts图表时间轴动态的数据(实例代码)

代码如下所示：  <template> <div class=""> &...

99+

2022-11-13

vue echarts图表时间轴动态数据 vue echarts图表时间轴动态数据 vue echarts动态数据
Python实现动态绘图的示例详解

目录示例FuncAnimation三维情况示例 matplotlib中的animation提供了动态绘图功能，下面列举一个最简单的动态绘制三角函数的例子，来初步演示一下。 impor...

99+

2023-05-19

Python实现动态绘图 Python动态绘图 Python绘图
Python实现动态条形图的示例详解

关于数据可视化的模块，之前已经分享过很多了，小伙伴们可以到历史文章中搜索，不过都是静态的可视化数据展示效果。这几天刚刚发现的这款动态数据可视化模块pynimate值得一提。它可以...

99+

2023-03-22

Python绘制动态条形图 Python动态条形图 Python条形图
Echarts实现点击列表联动饼图的示例代码

目录简单易懂的Echars案例，实现点击列表联动饼图效果图1. 首先我们先写一个左侧列表 StageLineStageLine 子组件 StageItem2.接下来我们写右侧饼图3....

99+

2023-05-19

Echarts列表联动饼图 Echarts 联动饼图
Android实现动态添加数据与堆叠折线图的方法是什么

本篇内容介绍了“Android实现动态添加数据与堆叠折线图的方法是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！效果视频引用描述本示例采...

99+

2023-06-25
Python实现动态条形图绘制的示例代码

目录动态条形图变动态柱状图指定排序方式限制条目数设置固定条目固定数值轴，使其不发生动态变化设置图像帧数，默认 10 帧设置帧率，单位时间默认为 500ms设置每帧增加的标签时间，默认...

99+

2024-04-02
Android实现动态改变app图标的示例代码

本文介绍了动态改变app图标，分享给大家，具体如下：代码实现如下：<application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:l...

99+

2023-05-30

android app图标 pp