堆叠柱状图

components

<template>
  <div class="home-view">
    <div class="home-view-t">
      <slot name="header" />
    </div>
    <!-- 堆叠柱状图 -->
    <div class="home-view-c">
      <div id="refbar" ref="refbar" />
      <div v-show="!isShow" class="no-data">暂无数据</div>
    </div>
  </div>
</template>

<script>
// const elementResizeDetectorMaker = require('element-resize-detector')

export default {
  name: 'StackedBarChart',
  props: {
    stackedBar: {
      type: Object,
      default: () => {}
    }
    // refresh: {
    //   type: Boolean,
    //   default: false
    // }
  },
  data() {
    return {
      msg: 'fafa'
    }
  },
  computed: {
    // 默认无数据不展示
    isShow() {
      let bool = false
      if (this.stackedBar.x_arr && this.stackedBar.x_arr.length) {
        bool = true
      }
      return bool
    }
  },
  watch: {
    stackedBar: {
      deep: true,
      handler: function(newV, oldV) {
        if (this.isShow) {
          this.change()
        }
      }
    }
    // 重新渲染
    // refresh() {
    //   this.myChart && this.myChart.resize()
    // }
  },
  mounted() {
    if (this.isShow) {
      this.change()
    }
  },
  methods: {
    change() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(this.$refs.refbar)
      // 绘制图表
      this.myChart.setOption({
        tooltip: {
          // 提示
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        noDataLoadingOption: {
          text: '暂无数据',
          effect: 'bubble',
          effectOption: {
            effect: {
              n: 0 // 气泡个数为0
            }
          }
        },
        legend: {
          data: this.stackedBar.legend_arr || [],
          right: '16',
          top: '5'
        }, // 图例
        color: ['#EEBC23', '#FB7293'],
        grid: {
          top: '15%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        barMaxWidth: 20,
        xAxis: [
          {
            type: 'category',
            /* 改变xy轴颜色*/
            axisLine: {
              lineStyle: {
                color: '#898989',
                width: 1 // 这里是为了突出显示加上的
              }
            },
            data: this.stackedBar.x_arr || [],
            axisLabel: { interval: 0, rotate: 50, color: '#898989' }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '预警量',
            axisLabel: { color: '#898989' },
            /* 改变xy轴颜色*/
            axisLine: {
              lineStyle: {
                color: '#898989',
                width: 1 // 这里是为了突出显示加上的
              }
            }
          }
        ],
        // color: ['#63a9ff', '#c098ee'],
        series: this.stackedBar.list || []
      })

      const resizeChart = this.myChart.resize // 图表重绘添加函数防抖
      const elementResizeDetectorMaker = require('element-resize-detector') // 监听容器宽高，重绘echarts
      const listener = elementResizeDetectorMaker()
      listener.listenTo(this.$refs.refbar, element => {
        resizeChart()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
.home-view {
  height: 100%;
  width: 100%;
  padding-bottom: 15px;
  &-t {
    height: 50px;
  }
  &-c {
    height: calc(100% - 50px);
    position: relative;
    > div {
      width: 100%;
      height: 100%;
    }
    .no-data {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
      height: 100%;
      font-size: 10px;
      position: absolute;
      bottom: 0;
      width: 100%;
      background: white;
    }
  }
}
</style>

indexdata定义数据

      stackedBar: {
        // 预警量统计数据
        legend_arr: ['警告', '报警'],
        x_arr: [],
        list: [
          {
            name: '警告',
            type: 'bar',
            stack: 'Search Engine',
            data: [],
            emphasis: {
              focus: 'series'
            }
          },
          {
            name: '报警',
            type: 'bar',
            barWidth: 20, // 柱形宽度
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            data: [],
            itemStyle: {
              normal: {
                // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                barBorderRadius: [10, 10, 0, 0]
              }
            }
          }
        ]
      },

html

      <el-col :span="12" class="status">
        <stackedBarChart :stacked-bar="stackedBar">
          <div slot="header" class="headre">
            <div class="headre-l">
              <div class="headre-lx" />
              <div class="headre-ln">预警量统计</div>
            </div>
          </div>
        </stackedBarChart>
      </el-col>

请求数据

    /**
     * @description: 堆叠柱状图
     * @param  'list'是后台body数据
     */
    changeList(list) {
      const xarr = []
      const alarmarr = []
      const warnarr = []
      if (list) {
        list.forEach(item => {
          xarr.push(item.time)
          alarmarr.push(item.alarmCon)
          warnarr.push(item.warnCon)
        })
      }
      if (this.isHour) {
        xarr.forEach((it, index) => {
          xarr[index] = it + ' 时'// X轴拼接字
        })
      }

      this.stackedBar.x_arr = xarr
      this.stackedBar.list[0].data = warnarr
      this.stackedBar.list[1].data = alarmarr

      warnarr.forEach((warnItem, index) => {
        if (!alarmarr[index]) {
          warnarr[index] = {
            value: warnItem,
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 0, 0]
              }
            }
          }
        }
      })

      return this.stackedBar
    },