Echarts 带预警线的柱状图

效果

JS代码

      dataArry: ['33'],
      dataCount: [66],
      option: {
        grid: {
          show: 'true',
          borderWidth: '0',
          // height: '100%',
          width: '100%',
          x: '0'
        },
        tooltip: {
          show: false,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b0}: {c0}'
        },
        // 背景色
        backgroundColor: '#92929A',
        xAxis: {
          // 是否显示x轴
          show: false,
          type: 'value',
          splitLine: {
            show: true
          }
        },
        yAxis: {
          type: 'category',
          // 让y轴数据逆向
          inverse: true,
          axisLabel: {
            show: true,
            formatter: function (value, index) {
              return ['{title|' + value + '} '].join('\n')
            },
            // 定义富文本标签
            rich: {
              title: {
                color: '#fff',
                fontWeight: 'lighter'
              }
            }
          },
          // 横向的线
          splitLine: { show: false },
          // y 轴的端点
          axisTick: { show: false },
          // y轴的线
          axisLine: { show: false },
          data: this.dataArry
        },
        series: [
          {
            name: '数据内框',
            type: 'bar',
            itemStyle: {
              color: '#2EFE3E'
            },
            barWidth: 30,
            // 实际数量
            data: [70]
          },
          {
            name: '外框',
            type: 'bar',
            markLine: {
              symbol: 'none',
              silent: true,
              data: [
                {
                  coord: ['33', 66],
                  silent: false,
                  lineStyle: {
                    type: 'solid',
                    width: 6,
                    color: 'yellow'
                  },
                  // 黄色警戒值
                  xAxis: 85
                },
                {
                  coord: ['33', 3],
                  silent: false,
                  lineStyle: {
                    type: 'solid',
                    width: 6,
                    color: 'red'
                  },
                  // 红色警戒值
                  xAxis: 90
                }
              ],
              lineStyle: {
                show: true,
                color: '#808C94',
                type: 'dashed'
              }
            },
            itemStyle: {
              // barBorderRadius: 0,
              // rgba设置透明度0.14
              color: 'rgba(255, 255, 255, 0.14)'
            },
            barGap: '-100%',
            z: 0,
            barWidth: 30,
            data: [100]
          }
        ]
      }