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

崽崽的谷雨 2023-04-11 原文

问题描述：

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
};

柱状堆叠 amp 加注 39

有关echarts 柱状堆叠图（图例和x轴都是动态的）的更多相关文章

ruby - 在 Ruby 中动态创建数组 - 2
有没有办法在Ruby中动态创建数组？例如，假设我想遍历用户输入的书籍数组:books=gets.chomp用户输入:"TheGreatGatsby,CrimeandPunishment,Dracula,Fahrenheit451,PrideandPrejudice,SenseandSensibility,Slaughterhouse-Five,TheAdventuresofHuckleberryFinn"我把它变成一个数组:books_array=books.split(",")现在，对于用户输入的每一本书，我想用Ruby创建一个数组。伪代码来做到这一点:x=0books_array.
ruby - 是否可以将 IRB 提示配置为动态更改？ - 2
我想在IRB中浏览文件系统并让提示更改以反射(reflect)当前工作目录，但我不知道如何在每个命令后进行提示更新。最终，我想在日常工作中更多地使用IRB，让bash溜走。我在我的.irbrc中试过这个:require'fileutils'includeFileUtilsIRB.conf[:PROMPT][:CUSTOM]={:PROMPT_N=>"\e[1m:\e[m",:PROMPT_I=>"\e[1m#{pwd}>\e[m",:PROMPT_S=>"FOO",:PROMPT_C=>"\e[1m#{pwd}>\e[m",:RETURN=>""}IRB.conf[:PROMPT_MO
ruby-on-rails - carrierwave:在序列化动态属性上安装 uploader - 2
首先，我使用的是rails3.1.3和来自master的carrierwavegithub仓库的分支。我使用after_init钩子(Hook)来确定基于属性的字段页面模型实例并为这些字段定义属性访问器将值存储在序列化哈希中(希望它清楚我是什么谈论)。这是我正在做的事情的精简版:classPage省略mount_uploader命令让我可以访问我想要的属性。但是当我安装uploader时出现错误消息说“nil类的未定义新方法”我在源代码中读到有方法read_uploader和扩展模块中的write_uploader。我如何必须覆盖这些来制作mount_uploader命令使用我的“虚拟
ruby - 在 Ruby 中动态生成多维数组 - 2
我正在尝试动态构建一个多维数组。我想要的基本上是这样的(为简单起见写出来):b=0test=[[]]test[b]这给了我错误:NoMethodError:undefinedmethod`test=[[],[],[]]而且它工作正常，但在我的实际使用中，我不会事先知道需要多少个数组。有一个更好的方法吗？谢谢最佳答案不需要像您正在使用的索引变量。只需将每个数组附加到您的test数组:irb>test=[]=>[]irb>test[["a","b","c"]]irb>test[["a","b","c"],["d","e","f"]]
ruby-on-rails - 使用 gmaps4rails 动态加载谷歌地图标记 - 2
如何只加载map边界内的标记gmaps4rails？当然，在平移和/或缩放后加载新的。与此直接相关的是，如何获取map的当前边界和缩放级别？最佳答案我是这样做的，我只在用户完成平移或缩放后替换标记，如果您需要不同的行为，请使用不同的事件监听器:在你看来(index.html.erb):{"zoom"=>15,"auto_adjust"=>false,"detect_location"=>true,"center_on_user"=>true}},false,true)%>在View的底部添加:functiongmaps4rail
ruby - 动态方法链？ - 2
如何在对象上调用方法名称的嵌套哈希？例如，给定以下哈希:hash={:a=>{:b=>{:c=>:d}}}我想创建一个方法，给定上面的散列，执行以下操作:object.send(:a).send(:b).send(:c).send(:d)我的想法是我需要从一个未知的关联中获取一个特定的属性(这个方法不知道，但程序员知道)。我希望能够指定一个方法链来以嵌套哈希的形式检索该属性。例如:hash={:manufacturer=>{:addresses=>{:first=>:postal_code}}}car.execute_method_hash(hash)=>90210
ruby - 如何使用 method_missing 动态声明方法？ - 2
我有一个ruby程序，我想接受用户创建的方法，并使用该名称创建一个新方法。我试过这个:defmethod_missing(meth,*args,&block)name=meth.to_sclass我收到以下错误:`define_method':interningemptystring(ArgumentError)in'method_missing'有什么想法吗？谢谢。编辑:我以不同的方式让它工作，但我仍然很好奇如何以这种方式做到这一点。这是我的代码:defmethod_missing(meth,*args,&block)Adder.class_evaldodefine_method
ruby - 动态扩展现有方法或覆盖 ruby 中的发送方法 - 2
假设我们有A、B、C类。Adefself.inherited(sub)#metaprogramminggoeshere#takeclassthathasjustinheritedclassA#andforfooclassesinjectprepare_foo()as#firstlineofmethodthenrunrestofthecodeenddefprepare_foo#=>prepare_foo()neededhere#somecodeendendBprepare_foo()neededhere#somecodeendend如您所见，我正在尝试将foo_prepare()调用注入
ruby - 使用 jbuilder 创建具有动态哈希键的 JSON - 2
这里我想输出带有动态组名的json而不是单词组@tickets.eachdo|group,v|json.group{json.array!vdo|ticket|json.partial!'tickets/ticket',ticket:ticketend}end@ticket是这样的散列{a:[....],b:[.....]}我想要这样的输出{a:[.....],b:[....]} 最佳答案感谢@AntarrByrd，这个问题有类似的答案:JBuilderdynamickeysformodelattributes使用上面的逻辑我已经
ruby - 在 Rakefile 中动态生成 Rake 测试任务(基于现有的测试文件) - 2
我正在根据Rakefile中的现有测试文件动态生成测试任务。假设您有各种以模式命名的单元测试文件test_.rb.所以我正在做的是创建一个以“测试”命名空间内的文件名命名的任务。使用下面的代码，我可以用raketest:调用所有测试require'rake/testtask'task:default=>'test:all'namespace:testdodesc"Runalltests"Rake::TestTask.new(:all)do|t|t.test_files=FileList['test_*.rb']endFileList['test_*.rb'].eachdo|task|n

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

问题描述：

实现思路及步骤：

示例：

代码：

有关echarts 柱状堆叠图（图例和x轴都是动态的）的更多相关文章

随机推荐