最近寫了一個echarts堆疊柱狀圖頁面，因為經驗不是很多，寫個部落格記錄一下

先貼 option 配置項

this.option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          width: "1300px",
        },
        xAxis: {
          show: true,
          data: this.filterRoadName,//x軸標籤列表

          splitLine: {
            show: false,
          },
          axisTick: {
            // show:false,
            length: 25 // x軸分割豎線的長度
          }
        },
        yAxis: {
          max: 100,// 設定最大值是多少 顯示100%
          splitNumber: 10,// 設定分幾段顯示
          splitLine: {
            show: true,
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value} %',//顯示100%
          },

        },
        series: [{
          name: '0-1年',
          type: 'bar',
          stack: '使用情況',//相同的stack開啟堆疊
          // data: [60, 20, 36, 10, 10, 20],
          data: this.initData('year01Length'),
          barWidth: 50,//柱子寬度
          barGap: '0%',/*多個並排柱子設定柱子之間的間距*/
          barCategoryGap: '0%',/*多個並排柱子設定柱子之間的間距*/
          itemStyle: {
            normal: { color: "#5b9bd5" },
          }
        }, {
          name: '1-2年',
          type: 'bar',
          stack: '使用情況',//相同的stack開啟堆疊
          data: this.initData('year12Length'),
          barWidth: 50,//柱子寬度
          itemStyle: {
            normal: { color: "#ed7d31" },
          }
        }, {
          name: '2-3年',
          type: 'bar',
          stack: '使用情況',//相同的stack開啟堆疊
          data: this.initData('year23Length'),
          barWidth: 50,//柱子寬度
          itemStyle: {
            normal: { color: "#a5a5a5" },
          }
        }, {
          name: '3-4年',
          type: 'bar',
          stack: '使用情況',//相同的stack開啟堆疊
          data: this.initData('year34Length'),
          barWidth: 50,//柱子寬度
          itemStyle: {
            normal: { color: "#ffbb00" },
          }
        }]
      }
 

為實現等高的堆疊圖，需要對資料進行處理

• 參考 https://blog.csdn.net/qq_16416993/article/details/108118443
  this.initData('year12Length') 返回一個數組 裡面的每個元素是資料裡每個物件的year12Length的值相對於>3年以下總和的百分比
  程式碼

// 初始化柱狀圖資料 計算每一個val在資料中和totalLength的百分比
  initData (val) {
    var serie = []
    this.data.forEach((item, index) => {
      let num = item[val]
      let total = 0
      let arr = [item.year01Length, item.year12Length, item.year23Length, item.year34Length]
      let arr1 = arr.filter(item => {
        if (item !== 'null') {
          return item
        }
      })
      arr1.forEach(item => {
        total += parseFloat(item)
      })
      //   // 計算佔比
      var numcount = this.Percentage(num, parseFloat(total.toFixed(3)))
      serie.push(numcount)
    })
    return serie
  },

  //計算兩者佔比方法
  Percentage (num, total) {
    return (Math.round(num / total * 10000) / 100.00)// 小數點後兩位百分比
  },

  // 初始化表格資料
  initTableData () {
    let tableArr = []
    for (let i = 0; i <= 3; i++) {
      let obj = {}
      let str = ('year' + i) + (i + 1 + 'Length')
      obj.header = str
      this.data.forEach((item, index) => {
        obj[item.roadCode] = item[str]
      })
      tableArr.unshift(obj)
    }
    this.tableData = tableArr
  },
 

實現底部表格參考

• https://www.jianshu.com/p/731d6b88f7ca

因為實現起來難度較大 所以採用的是elementui的table元件 通過給定option配置項grid:{width:1500px}一個固定的寬度結合柱子的個數能夠動態的計算出x軸分隔的寬度同時指定給表格的寬度結合定位調整表格的位置，大體上能實現這種效果