快捷導航

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

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

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

問題描述：

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

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

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

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

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

知道了這些就很清晰了。

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

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

示例：

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

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

代碼：

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

let data = [
        { 日期: '2022-08-16', 要素名稱: '空調(diào)液加注-正壓壓力', 報警總次數(shù): 15 },
        { 日期: '2022-08-16', 要素名稱: '空調(diào)液加注-正壓檢漏值', 報警總次數(shù): 3 },
        { 日期: '2022-08-16', 要素名稱: '剎車液加注-正壓壓力', 報警總次數(shù): 5 },
        { 日期: '2022-08-17', 要素名稱: '剎車液加注-二次抽真空值', 報警總次數(shù): 6 },
        { 日期: '2022-08-17', 要素名稱: '剎車液加注-二次抽真空時間', 報警總次數(shù): 6 },
        { 日期: '2022-08-17', 要素名稱: '剎車液加注-加注量', 報警總次數(shù): 3 },
        { 日期: '2022-08-17', 要素名稱: '空調(diào)液加注-正壓壓力', 報警總次數(shù): 45 }, ,
        { 日期: '2022-08-17', 要素名稱: '剎車液加注-真空檢漏值', 報警總次數(shù): 3 },
        { 日期: '2022-08-17', 要素名稱: '剎車液加注-含水量', 報警總次數(shù): 3 },
        { 日期: '2022-08-17', 要素名稱: '剎車液加注-真空檢漏時間', 報警總次數(shù): 3 },
        { 日期: '2022-08-17', 要素名稱: '空調(diào)液加注-二次抽真空值', 報警總次數(shù): 3 },
        { 日期: '2022-08-17', 要素名稱: '剎車液加注-正壓壓力', 報警總次數(shù): 15 },
        { 日期: '2022-08-18', 要素名稱: '剎車液加注-加注量', 報警總次數(shù): 6 },
        { 日期: '2022-08-18', 要素名稱: '剎車液加注-正壓壓力', 報警總次數(shù): 23 },
        { 日期: '2022-08-18', 要素名稱: '剎車液加注-正壓檢漏值', 報警總次數(shù): 3 },
        { 日期: '2022-08-18', 要素名稱: '空調(diào)液加注-加注量', 報警總次數(shù): 3 },
        { 日期: '2022-08-18', 要素名稱: '剎車液加注-精真空值', 報警總次數(shù): 6 },
        { 日期: '2022-08-18', 要素名稱: '空調(diào)液加注-正壓壓力', 報警總次數(shù): 69 },
        { 日期: '2022-08-18', 要素名稱: '空調(diào)液加注-正壓檢漏時間', 報警總次數(shù): 3 },
        { 日期: '2022-08-19', 要素名稱: '剎車液加注-含水量', 報警總次數(shù): 6 },
        { 日期: '2022-08-19', 要素名稱: '剎車液加注-正壓壓力', 報警總次數(shù): 31 },
        { 日期: '2022-08-19', 要素名稱: '剎車液加注-精真空值', 報警總次數(shù): 12 },
        { 日期: '2022-08-19', 要素名稱: '空調(diào)液加注-正壓壓力', 報警總次數(shù): 99 },
        { 日期: '2022-08-19', 要素名稱: '剎車液加注-真空檢漏值', 報警總次數(shù): 6 },
        { 日期: '2022-08-19', 要素名稱: '空調(diào)液加注-正壓檢漏值', 報警總次數(shù): 6 },
        { 日期: '2022-08-19', 要素名稱: '空調(diào)液加注-正壓檢漏時間', 報警總次數(shù): 6 },
        { 日期: '2022-08-19', 要素名稱: '空調(diào)液加注-真空檢漏值', 報警總次數(shù): 12 },
        { 日期: '2022-08-20', 要素名稱: '剎車液加注-加注量', 報警總次數(shù): 12 },
        { 日期: '2022-08-20', 要素名稱: '剎車液加注-含水量', 報警總次數(shù): 12 },
        { 日期: '2022-08-20', 要素名稱: '剎車液加注-正壓檢漏值', 報警總次數(shù): 9 },
        { 日期: '2022-08-20', 要素名稱: '剎車液加注-正壓檢漏時間', 報警總次數(shù): 6 },
        { 日期: '2022-08-20', 要素名稱: '剎車液加注-真空檢漏時間', 報警總次數(shù): 9 },
        { 日期: '2022-08-20', 要素名稱: '空調(diào)液加注-加注量', 報警總次數(shù): 9 },
        { 日期: '2022-08-20', 要素名稱: '剎車液加注-真空檢漏值', 報警總次數(shù): 9 },
        { 日期: '2022-08-20', 要素名稱: '空調(diào)液加注-正壓檢漏值', 報警總次數(shù): 12 },
        { 日期: '2022-08-20', 要素名稱: '空調(diào)液加注-真空檢漏值', 報警總次數(shù): 15 },
    ];
    console.log(data)
    let date = []; //x軸日期
    let lenged = []; //series的個數(shù)
    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["報警總次數(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
};