快捷導(dǎo)航

echarts柱狀堆疊圖實(shí)現(xiàn)示例(圖例和x軸都是動(dòng)態(tài)的)

更新時(shí)間：2023年04月01日 11:35:04 作者：崽崽的谷雨

一些柱形圖在數(shù)據(jù)量比較多的時(shí)候,橫向排列受到擠壓,導(dǎo)致柱形圖,變的非常細(xì),影響整體的效果,下面這篇文章主要給大家介紹了關(guān)于echarts柱狀堆疊圖(圖例和x軸都是動(dòng)態(tài)的)的相關(guān)資料,需要的朋友可以參考下

問(wèn)題描述：

echarts柱狀堆疊圖，是很常用的圖表，官網(wǎng)的例子很簡(jiǎn)單。圖例（legend），x軸（xAxis）都是寫(xiě)死的。但是一般實(shí)際應(yīng)用中都是動(dòng)態(tài)的。下面就舉個(gè)例子，實(shí)現(xiàn)圖例和x軸都是動(dòng)態(tài)的柱狀堆疊圖。

echarts 官網(wǎng)柱狀堆疊圖示例

實(shí)現(xiàn)思路及步驟：

思路：通過(guò)官網(wǎng)的例子，我們能知道

xAxis 是一個(gè)數(shù)組
series 是一個(gè)數(shù)組對(duì)象其中name需要對(duì)應(yīng)著的是圖例，有幾個(gè)圖例 series里就應(yīng)該有幾個(gè)項(xiàng)。需要把你的數(shù)據(jù)處理成和例子數(shù)據(jù)結(jié)構(gòu)一樣的。
stack 這個(gè)屬性很重要 Documentation - Apache ECharts stack API，官網(wǎng)的例子里是三個(gè)柱狀圖并列。stack 相同的就會(huì) 堆疊在一起（stack 有幾個(gè)他就會(huì)有幾排并列，官網(wǎng)例子里有Ad,Search Engine他就有兩個(gè)堆疊，去掉沒(méi)有 stack屬性的就能看到了）。

知道了這些就很清晰了。

第一步就是遍歷數(shù)據(jù) ，找出 x軸的數(shù)據(jù)（切記要去重）
遍歷數(shù)據(jù) 生成 series

其實(shí)就是對(duì)數(shù)據(jù)的處理。

示例：

把這樣的數(shù)據(jù) 做成堆疊圖

let data = [
        { 日期: '2022-08-16', 要素名稱(chēng): '空調(diào)液加注-正壓壓力', 報(bào)警總次數(shù): 15 },
        { 日期: '2022-08-16', 要素名稱(chēng): '空調(diào)液加注-正壓檢漏值', 報(bào)警總次數(shù): 3 },
        { 日期: '2022-08-16', 要素名稱(chēng): '剎車(chē)液加注-正壓壓力', 報(bào)警總次數(shù): 5 },
        { 日期: '2022-08-17', 要素名稱(chēng): '剎車(chē)液加注-二次抽真空值', 報(bào)警總次數(shù): 6 },
        { 日期: '2022-08-17', 要素名稱(chēng): '剎車(chē)液加注-二次抽真空時(shí)間', 報(bào)警總次數(shù): 6 },
        { 日期: '2022-08-17', 要素名稱(chēng): '剎車(chē)液加注-加注量', 報(bào)警總次數(shù): 3 },
        { 日期: '2022-08-17', 要素名稱(chēng): '空調(diào)液加注-正壓壓力', 報(bào)警總次數(shù): 45 }, ,
        { 日期: '2022-08-17', 要素名稱(chēng): '剎車(chē)液加注-真空檢漏值', 報(bào)警總次數(shù): 3 },
        { 日期: '2022-08-17', 要素名稱(chēng): '剎車(chē)液加注-含水量', 報(bào)警總次數(shù): 3 },
        { 日期: '2022-08-17', 要素名稱(chēng): '剎車(chē)液加注-真空檢漏時(shí)間', 報(bào)警總次數(shù): 3 },
        { 日期: '2022-08-17', 要素名稱(chēng): '空調(diào)液加注-二次抽真空值', 報(bào)警總次數(shù): 3 },
        { 日期: '2022-08-17', 要素名稱(chēng): '剎車(chē)液加注-正壓壓力', 報(bào)警總次數(shù): 15 },
        { 日期: '2022-08-18', 要素名稱(chēng): '剎車(chē)液加注-加注量', 報(bào)警總次數(shù): 6 },
        { 日期: '2022-08-18', 要素名稱(chēng): '剎車(chē)液加注-正壓壓力', 報(bào)警總次數(shù): 23 },
        { 日期: '2022-08-18', 要素名稱(chēng): '剎車(chē)液加注-正壓檢漏值', 報(bào)警總次數(shù): 3 },
        { 日期: '2022-08-18', 要素名稱(chēng): '空調(diào)液加注-加注量', 報(bào)警總次數(shù): 3 },
        { 日期: '2022-08-18', 要素名稱(chēng): '剎車(chē)液加注-精真空值', 報(bào)警總次數(shù): 6 },
        { 日期: '2022-08-18', 要素名稱(chēng): '空調(diào)液加注-正壓壓力', 報(bào)警總次數(shù): 69 },
        { 日期: '2022-08-18', 要素名稱(chēng): '空調(diào)液加注-正壓檢漏時(shí)間', 報(bào)警總次數(shù): 3 },
        { 日期: '2022-08-19', 要素名稱(chēng): '剎車(chē)液加注-含水量', 報(bào)警總次數(shù): 6 },
        { 日期: '2022-08-19', 要素名稱(chēng): '剎車(chē)液加注-正壓壓力', 報(bào)警總次數(shù): 31 },
        { 日期: '2022-08-19', 要素名稱(chēng): '剎車(chē)液加注-精真空值', 報(bào)警總次數(shù): 12 },
        { 日期: '2022-08-19', 要素名稱(chēng): '空調(diào)液加注-正壓壓力', 報(bào)警總次數(shù): 99 },
        { 日期: '2022-08-19', 要素名稱(chēng): '剎車(chē)液加注-真空檢漏值', 報(bào)警總次數(shù): 6 },
        { 日期: '2022-08-19', 要素名稱(chēng): '空調(diào)液加注-正壓檢漏值', 報(bào)警總次數(shù): 6 },
        { 日期: '2022-08-19', 要素名稱(chēng): '空調(diào)液加注-正壓檢漏時(shí)間', 報(bào)警總次數(shù): 6 },
        { 日期: '2022-08-19', 要素名稱(chēng): '空調(diào)液加注-真空檢漏值', 報(bào)警總次數(shù): 12 },
        { 日期: '2022-08-20', 要素名稱(chēng): '剎車(chē)液加注-加注量', 報(bào)警總次數(shù): 12 },
        { 日期: '2022-08-20', 要素名稱(chēng): '剎車(chē)液加注-含水量', 報(bào)警總次數(shù): 12 },
        { 日期: '2022-08-20', 要素名稱(chēng): '剎車(chē)液加注-正壓檢漏值', 報(bào)警總次數(shù): 9 },
        { 日期: '2022-08-20', 要素名稱(chēng): '剎車(chē)液加注-正壓檢漏時(shí)間', 報(bào)警總次數(shù): 6 },
        { 日期: '2022-08-20', 要素名稱(chēng): '剎車(chē)液加注-真空檢漏時(shí)間', 報(bào)警總次數(shù): 9 },
        { 日期: '2022-08-20', 要素名稱(chēng): '空調(diào)液加注-加注量', 報(bào)警總次數(shù): 9 },
        { 日期: '2022-08-20', 要素名稱(chēng): '剎車(chē)液加注-真空檢漏值', 報(bào)警總次數(shù): 9 },
        { 日期: '2022-08-20', 要素名稱(chēng): '空調(diào)液加注-正壓檢漏值', 報(bào)警總次數(shù): 12 },
        { 日期: '2022-08-20', 要素名稱(chēng): '空調(diào)液加注-真空檢漏值', 報(bào)警總次數(shù): 15 },
    ];

代碼：

把該代碼復(fù)制到官網(wǎng)例子里就能看到效果。

let data = [
        { 日期: '2022-08-16', 要素名稱(chēng): '空調(diào)液加注-正壓壓力', 報(bào)警總次數(shù): 15 },
        { 日期: '2022-08-16', 要素名稱(chēng): '空調(diào)液加注-正壓檢漏值', 報(bào)警總次數(shù): 3 },
        { 日期: '2022-08-16', 要素名稱(chēng): '剎車(chē)液加注-正壓壓力', 報(bào)警總次數(shù): 5 },
        { 日期: '2022-08-17', 要素名稱(chēng): '剎車(chē)液加注-二次抽真空值', 報(bào)警總次數(shù): 6 },
        { 日期: '2022-08-17', 要素名稱(chēng): '剎車(chē)液加注-二次抽真空時(shí)間', 報(bào)警總次數(shù): 6 },
        { 日期: '2022-08-17', 要素名稱(chēng): '剎車(chē)液加注-加注量', 報(bào)警總次數(shù): 3 },
        { 日期: '2022-08-17', 要素名稱(chēng): '空調(diào)液加注-正壓壓力', 報(bào)警總次數(shù): 45 }, ,
        { 日期: '2022-08-17', 要素名稱(chēng): '剎車(chē)液加注-真空檢漏值', 報(bào)警總次數(shù): 3 },
        { 日期: '2022-08-17', 要素名稱(chēng): '剎車(chē)液加注-含水量', 報(bào)警總次數(shù): 3 },
        { 日期: '2022-08-17', 要素名稱(chēng): '剎車(chē)液加注-真空檢漏時(shí)間', 報(bào)警總次數(shù): 3 },
        { 日期: '2022-08-17', 要素名稱(chēng): '空調(diào)液加注-二次抽真空值', 報(bào)警總次數(shù): 3 },
        { 日期: '2022-08-17', 要素名稱(chēng): '剎車(chē)液加注-正壓壓力', 報(bào)警總次數(shù): 15 },
        { 日期: '2022-08-18', 要素名稱(chēng): '剎車(chē)液加注-加注量', 報(bào)警總次數(shù): 6 },
        { 日期: '2022-08-18', 要素名稱(chēng): '剎車(chē)液加注-正壓壓力', 報(bào)警總次數(shù): 23 },
        { 日期: '2022-08-18', 要素名稱(chēng): '剎車(chē)液加注-正壓檢漏值', 報(bào)警總次數(shù): 3 },
        { 日期: '2022-08-18', 要素名稱(chēng): '空調(diào)液加注-加注量', 報(bào)警總次數(shù): 3 },
        { 日期: '2022-08-18', 要素名稱(chēng): '剎車(chē)液加注-精真空值', 報(bào)警總次數(shù): 6 },
        { 日期: '2022-08-18', 要素名稱(chēng): '空調(diào)液加注-正壓壓力', 報(bào)警總次數(shù): 69 },
        { 日期: '2022-08-18', 要素名稱(chēng): '空調(diào)液加注-正壓檢漏時(shí)間', 報(bào)警總次數(shù): 3 },
        { 日期: '2022-08-19', 要素名稱(chēng): '剎車(chē)液加注-含水量', 報(bào)警總次數(shù): 6 },
        { 日期: '2022-08-19', 要素名稱(chēng): '剎車(chē)液加注-正壓壓力', 報(bào)警總次數(shù): 31 },
        { 日期: '2022-08-19', 要素名稱(chēng): '剎車(chē)液加注-精真空值', 報(bào)警總次數(shù): 12 },
        { 日期: '2022-08-19', 要素名稱(chēng): '空調(diào)液加注-正壓壓力', 報(bào)警總次數(shù): 99 },
        { 日期: '2022-08-19', 要素名稱(chēng): '剎車(chē)液加注-真空檢漏值', 報(bào)警總次數(shù): 6 },
        { 日期: '2022-08-19', 要素名稱(chēng): '空調(diào)液加注-正壓檢漏值', 報(bào)警總次數(shù): 6 },
        { 日期: '2022-08-19', 要素名稱(chēng): '空調(diào)液加注-正壓檢漏時(shí)間', 報(bào)警總次數(shù): 6 },
        { 日期: '2022-08-19', 要素名稱(chēng): '空調(diào)液加注-真空檢漏值', 報(bào)警總次數(shù): 12 },
        { 日期: '2022-08-20', 要素名稱(chēng): '剎車(chē)液加注-加注量', 報(bào)警總次數(shù): 12 },
        { 日期: '2022-08-20', 要素名稱(chēng): '剎車(chē)液加注-含水量', 報(bào)警總次數(shù): 12 },
        { 日期: '2022-08-20', 要素名稱(chēng): '剎車(chē)液加注-正壓檢漏值', 報(bào)警總次數(shù): 9 },
        { 日期: '2022-08-20', 要素名稱(chēng): '剎車(chē)液加注-正壓檢漏時(shí)間', 報(bào)警總次數(shù): 6 },
        { 日期: '2022-08-20', 要素名稱(chēng): '剎車(chē)液加注-真空檢漏時(shí)間', 報(bào)警總次數(shù): 9 },
        { 日期: '2022-08-20', 要素名稱(chēng): '空調(diào)液加注-加注量', 報(bào)警總次數(shù): 9 },
        { 日期: '2022-08-20', 要素名稱(chēng): '剎車(chē)液加注-真空檢漏值', 報(bào)警總次數(shù): 9 },
        { 日期: '2022-08-20', 要素名稱(chēng): '空調(diào)液加注-正壓檢漏值', 報(bào)警總次數(shù): 12 },
        { 日期: '2022-08-20', 要素名稱(chēng): '空調(diào)液加注-真空檢漏值', 報(bào)警總次數(shù): 15 },
    ];
    console.log(data)
    let date = []; //x軸日期
    let lenged = []; //series的個(gè)數(shù)
    let s = [];
    data.map((item) => {
        date.push(item["日期"]);
        lenged.push(item["要素名稱(chēng)"]);
 
    });
 
    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) => {//對(duì)series 的data進(jìn)行處理
 
        series.map((item1) => {
 
            if (item1.name == item["要素名稱(chēng)"] && date.indexOf(item["日期"]) > -1) {
                item1.data[date.indexOf(item["日期"])] = item["報(bào)警總次數(shù)"]
            };
        })
    })
   
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
};