echarts柱状图值为0时不显示以及柱状图百分比展示

echarts柱状图值为0时不显示以及柱状图百分比展示

1.效果展示

2.代码

<template>
  <div id="container">
      <div id="main"></div>
  </div>
</template>
<script>

import * as echarts from 'echarts'
import * as lodash from 'lodash'
 export default {
  name: 'MainView',
  data () {
    return {
      option: {
        title: {
          // text: '通气时间',
          left: '3%',
          top: '1%',
          textStyle: {
            fontSize: 12
          }
        },
        legend: {
          show: false,
          top: '3%',
          right: '1%'
        },
        grid: {
          show: true,
          left: '0%',
          top: '20%',
          right: '2%',
          bottom: '25%'
          // backgroundColor: '#f0f9ff',
          // borderColor: 'rgba(204, 204, 204, 0.03)'
        },
        tooltip: {},
        xAxis: [],
        yAxis: [{
          type: 'value',
          // max: 2,
          // splitNumber: 2,
          axisLabel: {
            show: true,
            // fontSize: 8,
            showMinLabel: true
          }
        }],
        series: [],
      },
      step: 30,
      total: 0,
      infoMap: [
        ['pressNum', '按压次数'],
        ['pressDepth', '按压深度'],
        ['pressPosition', '按压位置'],
        ['pressSpringback', '胸廓回弹'],
        ['pressFrequency', '按压频率'],
        ['pressRelaxratio', '按压放松比'],
        ['ventilateNum', '通气次数'],
        ['ventilateKeep', '通气保持'],
        ['ventilateOpen', '气道开放']
      ],
      newMap: {},
      echartArray: [],
    }
  },
  created () {
  },
  mounted () {

    window.prepare = this.prepare

    //测试数据
    let source4 = [{
      'pressNum': 80,
      'pressDepth': 10,
      'pressPosition': 3,
      'pressRelaxratio': 55,
      'ventilateNum': 75,
      'ventilateKeep': 88,
      'ventilateOpen': 99
    }, {
      'pressNum': 80,
      'pressSpringback': 50,
      'pressFrequency': 46,
      'pressRelaxratio': 55,
      'ventilateNum': 75,
      'ventilateKeep': 88,
      'ventilateOpen': 99
    }, {
      'pressNum': 80,
      'pressPosition': 3,
      'pressSpringback': 50,
      'pressFrequency': 46,
      'ventilateNum': 75,
      'ventilateKeep': 88,
      'ventilateOpen': 99
    }, {
      'pressNum': 80,
      'pressDepth': 10,
      'pressPosition': 3,
      'pressSpringback': 50,
      'pressFrequency': 46,
      'pressRelaxratio': 55,
      'ventilateNum': 75,
      'ventilateKeep': 88,
      'ventilateOpen': 99
    }, {
      'pressNum': 80,
      'pressDepth': 10,
      'pressPosition': 3,
      'pressFrequency': 46,
      'pressRelaxratio': 55,
      'ventilateNum': 75,
      'ventilateKeep': 88,
      'ventilateOpen': 99
    }]

    this.prepare(4, source4, 1480, 937)
  },
  methods: {
     //生成x轴数据
    xProcess (data) {
      var keys = Object.keys(data[0])
      var xArray = []
      for (let i = 0; i < keys.length; i++) {
        let x = {
          type: 'category',
          position: 'bottom',
          axisTick: {
            inside: true,
            show: false
          },
          axisLabel: {
            show: true,
            fontSize: 14,
            // margin: 9
          }
        }
        x.data = this.jcArray(keys.length, i, this.newMap.get(keys[i]))
        xArray.push(x)
      }
      return xArray
    },
     //生成series数据
    cycleSprocess (data) {
      const zh = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一']
      const sArray = []
      // 获取循环次数
      var keys = Object.keys(data[0])
      for (let i = 0; i < data.length; i++) {

        for (let k = 0; k < keys.length; k++) {
          let s = {
            type: 'bar'
          }
          let value = 0
          for (let index in data[i]) {
            if (index === keys[k]) {
              value = data[i][index]
              s.name = '第' + zh[i] + '循环'
              s.xAxisIndex = k
              sArray.push(s)
              s.data = this.jcArray(keys.length, k, value)
              break
            }
          }
        }
      }
      return sArray
    },
    jcArray (l, i, v) {
      const a = new Array(l)
      for (let j = 0; j < l; j++) {
        if (j === i) {
          a[j] = v
        } else {
          a[j] = ''
        }
      }
      return a
    },
    prepare (type, data, wdith, height) {
      if (this.echartArray.length > 0) {
        this.echartArray.forEach(function (item) {
          item.dispose()
        })
        this.echartArray = []
      }
      this.cleanMain()
      // var sourceData = JSON.parse(data)
      var sourceData = data
      if (type === 4) {
        this.newMap = new Map(this.infoMap)

        var draw = document.createElement('div')
        draw.style.height = height + 'px'
        draw.style.width = wdith + 'px'
        draw.id = 'draw'

        document.getElementById('main').appendChild(draw)

        var myChart = echarts.init(document.getElementById('draw'))
        this.echartArray.push(myChart)
        var op = lodash.cloneDeep(this.option)

        op.xAxis = this.xProcess(sourceData)
        op.series = this.cycleSprocess(sourceData)
         //主要代码 修改鼠标指向柱状图时的显示信息
        op.tooltip.formatter = function (params) {
          return params.seriesName + '<br />' + params.marker + params.name + ' ' + params.value + '%'
        }
        //Y轴数值添加%号
        op.yAxis = [{
          type: 'value',
          max: 100,
          axisLabel: {
            show: true,
            fontSize: 14,
            formatter: '{value}%'
          }
        }]
         //修改标题
        op.title = {
          text: '正确率',
          left: '3%',
          top: '3%',
          textStyle: {
            fontSize: 18
          }
        }
          //修改图形显示大小
        op.grid = {
          show: true,
          left: '3.5%',
          right: '1%',
          backgroundColor: '#f0f9ff',
          borderColor: 'rgba(204, 204, 204, 0.03)'
        }
          //修改图例展示
        op.legend = {
          show: true,
          top: '3%',
          right: '1%'
        }
        myChart.setOption(op)
      }
    },
      //清空页面
    cleanMain () {
      var main = document.getElementById('main')
      while (main.lastChild) {
        main.removeChild(main.lastChild)
      }
    }
  }
}
</script>   

3.数值为0时不渲染

其实要想数据为0不显示，并且需要分别设置样式时，就需要把X轴分段，分为不同的索引分别渲染。
option.xAxis数据如下图：

其中data数据如下图：

option.series数据如下图：

其中name属性影响图例显示的名称以及鼠标指向柱状图的的显示。xAxisIndex索引指向的不同的x轴段中显示的数据。

部分data数据如下图：