echarts堆叠柱状图

最近写了一个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轴分隔的宽度同时指定给表格的宽度结合定位调整表格的位置，大体上能实现这种效果