柱状图echarts 柱状配置项内容和展示

有背景的柱状图

      var data = [
        {
          month: '1月份',
          value: 100
        },

        {
          month: '2月份',
          value: 90
        },

        {
          month: '3月份',
          value: 200
          // ratio: 75.8
        },

        {
          month: '4月份',
          value: 150
          // ratio: 19.8
        },

        {
          month: '5月份',
          value: 230
          // ratio: 44.5
        },

        {
          month: '6月份',
          value: 135
          // ratio: 87.3
        }
      ]
      var bkData = [100, 100, 100, 100, 100, 100]
      var xData = ['1月份', '2月份', '3月份', '4月份', '5月份', '6月份']
      option = {
        backgroundColor: '',
        color: ['#3398DB'],
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              opacity: 0
            }
          },
          backgroundColor: 'rgb(7,55,133)',
          borderColor: '#0daee9',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '10%',
          height: '85%',
          containLabel: true,
          z: 22
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true, // 坐标轴两边留白
            gridIndex: 0,
            data: xData,
            axisLabel: {
              textStyle: {
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(0,0,0,.8)'
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            nameTextStyle: {
              color: 'rgb(170,170,170)'
            },
            gridIndex: 0,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                // color: 'rgba(255,255,255,0)'
              }
            },
            axisLabel: {
              color: 'rgba(0,0,0,.8)',
              fontSize: 12,
              formatter: '{value}'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)'
              }
            }
          },
          {
            type: 'value',
            show: false,
            gridIndex: 0,
            // min: min,
            // max: 6,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#95a2aa',
              fontSize: 14,
              formatter: '{value}'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)'
              }
            }
          }
        ],
        series: [
          {
            name: '高发事件统计',
            type: 'bar',
            barWidth: '30%',
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                color: '#00A2FF'
              }
            },
            label: {
              show: true,
              position: 'top'
            },
            data: data,
            zlevel: 11
          },
          {
            name: '背景',
            type: 'bar',
            barWidth: '30%',
            xAxisIndex: 0,
            yAxisIndex: 1,
            barGap: '-100%',
            data: bkData,
            itemStyle: {
              normal: {
                color: 'rgba(0,162,255,0.1)',
                barBorderRadius: [0, 0, 0, 0]
              }
            },
            tooltip: {
              show: false
            },
            zlevel: 9
          }
        ]
      }