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

      option = {
               backgroundColor: '#0c1e55',

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          opacity: 0
        }
      },
      formatter: function (prams) {
        if (prams[0].data === 0) {
          return "合格率：0%"
        } else {
          return "合格率：" + prams[0].data + "%"
        }
      }
    },

    legend: {
      orient: 'horizontal',
      right: "5%",
      top: "0%",
      textStyle: {
        color: '#bde7ff',
        fontSize: 12,

      },
      formatter: '1000家',
      icon: 'circle',
      //  icon: 'roundRect',
      itemWidth: 10,
      itemHeight: 10,
      data: [{
        "name": "参数1",
        "value": 1500
      }, {
        "name": "参数2",
        "value": 1600
      }, {
        "name": "参数3",
        "value": 1000
      }],
    },

    grid: {
      left: '5%',
      right: '10%',
      bottom: '5%',
      top: '7%',
      containLabel: true,
      z: 22
    },
    xAxis: [{
      type: 'category',
      gridIndex: 0,

      data: ['原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油', '原油加工及石油'],
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#19347b'

        }
      },
      axisLabel: {
        interval: 0,
        formatter: function (value) {
          return (value.length > 8 ? (value.slice(0, 8) + "...") : value)
        },
        rotate: 45,
        color: '#7cb4d8',
        margin: 10,
        textStyle: {
          fontSize: 14
        }
      }
    }],
    yAxis: [{
      type: 'value',
      //   name: "单位:户",
      nameTextStyle: {
        color: "rgb(170,170,170)"
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#19347b'

        }
      },
      gridIndex: 0,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#102459'
        }
      },
      axisLabel: {
        formatter: '{value}',
        color: '#7cb4d8',
        margin: 10,
        textStyle: {
          fontSize: 14
        }
      }
    },
    {
      type: 'value',
      gridIndex: 0,
      min: 0,
      max: 100,
      splitNumber: 12,
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitArea: {
        show: false,
        areaStyle: {
          color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
        }
      }
    }
    ],
    series: [{
      name: '参数1',
      type: 'bar',
      stack: '预警',
      xAxisIndex: 0,
      yAxisIndex: 0,
      itemStyle: {
        normal: {
          barBorderRadius: [0, 0, 0, 0],
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, [{
              offset: 0,
              color: '#005dff'
            },
            {
              offset: 1,
              color: '#005dff'
            }
            ]
          )
        }

      },
      barWidth: 10,
      data: [20, 69, 56, 34, 45, 56, 67, 67, 87, 45, 87, 99, 69, 56, 34, 45, 56, 67, 67, 87, 45, 87, 99, 69, 56, 34, 45, 87],
      zlevel: 11
    }, {
      name: '参数2',
      type: 'bar',
      stack: '预警',

      xAxisIndex: 0,
      yAxisIndex: 0,
      itemStyle: {
        normal: {
          barBorderRadius: [0, 0, 0, 0],
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, [{
              offset: 0,
              color: '#05c79c'
            },
            {
              offset: 1,
              color: '#05c79c'
            }
            ]
          )
        }

      },
      barWidth: 10,
      data: [20, 69, 56, 34, 45, 56, 67, 67, 87, 45, 87, 99, 69, 56, 34, 45, 56, 67, 67, 87, 45, 87, 99, 69, 56, 34, 45, 87],
      zlevel: 11
    }, {
      name: '参数3',
      type: 'bar',
      stack: '预警',

      xAxisIndex: 0,
      yAxisIndex: 0,
      itemStyle: {
        normal: {
          barBorderRadius: [2, 2, 0, 0],
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, [{
              offset: 0,
              color: '#ffba00'
            },
            {
              offset: 1,
              color: '#ffba00'
            }
            ]
          )
        }

      },
      barWidth: 10,
      data: [20, 69, 56, 34, 45, 56, 67, 67, 87, 45, 87, 99, 69, 56, 34, 45, 56, 67, 67, 87, 45, 87, 99, 69, 56, 34, 45, 87],
      zlevel: 11
    },

    
    ]
};