优良中次差柱状图

描述:当前是关于Echarts图表中的 柱状图 示例。
 
            let xData = ["S32", "G220", "G104", "G206", "G228", "G3511", "G1813", "S7601", "S82", "G2011", "S7801", "S203", "G2001", "S1", "G15", "S7201", "S89", "S29", "S84", "G0321", "S7401", "S12", "G1511", "G18", "G22", "S11", "S7603", "S90", "S85", "G25", "S316", "S21", "S38", "S7402", "S26", "G35", "G2", "S33", "G2516", "S19", "S16", "G20", "S28", "S31", "G1815", "S17", "S83"]
let markData = [{
   "name": "集团",
   "yAxis": "95.04"
}]
let seriesData = [
   {
      "name": "菏泽至东明高速公路",
      "value": 85.15,
      "code": "S32"
   },
   {
      "name": "东郑路国道",
      "value": 85.36,
      "code": "G220"
   },
   {
      "name": "泰曲路",
      "value": 88.26,
      "code": "G104"
   },
   {
      "name": "北莱路",
      "value": 90.92,
      "code": "G206"
   },
   {
      "name": "北莱路",
      "value": 91.27,
      "code": "G228"
   },
   {
      "name": "菏泽-宝鸡",
      "value": 91.94,
      "code": "G3511"
   },
   {
      "name": "威海-青岛",
      "value": 92.94,
      "code": "G1813"
   },
   {
      "name": "青岛前湾港区1号疏港高速公路",
      "value": 93.06,
      "code": "S7601"
   },
   {
      "name": "顺河高架",
      "value": 93.1,
      "code": "S82"
   },
   {
      "name": "青岛-新河",
      "value": 93.15,
      "code": "G2011"
   },
   {
      "name": "日照石臼港区疏港高速公路",
      "value": 93.22,
      "code": "S7801"
   },
   {
      "name": "威青一级路",
      "value": 93.7,
      "code": "S203"
   },
   {
      "name": "济南市绕城高速公路",
      "value": 93.75,
      "code": "G2001"
   },
   {
      "name": "济南-聊城",
      "value": 94.17,
      "code": "S1"
   },
   {
      "name": "沈阳-海口",
      "value": 94.46,
      "code": "G15"
   },
   {
      "name": "东营港疏港高速公路",
      "value": 94.49,
      "code": "S7201"
   },
   {
      "name": "京沪高速济南连接线",
      "value": 94.57,
      "code": "S89"
   },
   {
      "name": "滨州-台儿庄",
      "value": 94.75,
      "code": "S29"
   },
   {
      "name": "德州连接线高速公路",
      "value": 94.79,
      "code": "S84"
   },
   {
      "name": "德州-上饶",
      "value": 94.88,
      "code": "G0321"
   },
   {
      "name": "烟台港莱州港区疏港公路",
      "value": 94.89,
      "code": "S7401"
   },
   {
      "name": "滨州-德州",
      "value": 94.97,
      "code": "S12"
   },
   {
      "name": "日照-兰考",
      "value": 95,
      "code": "G1511"
   },
   {
      "name": "荣成-乌海",
      "value": 95.01,
      "code": "G18"
   },
   {
      "name": "青岛-兰州",
      "value": 95.08,
      "code": "G22"
   },
   {
      "name": "烟海高速",
      "value": 95.12,
      "code": "S11"
   },
   {
      "name": "青岛前湾港区3号疏港高速公路",
      "value": 95.19,
      "code": "S7603"
   },
   {
      "name": "日照机场连接线",
      "value": 95.24,
      "code": "S90"
   },
   {
      "name": "胶州湾大桥",
      "value": 95.25,
      "code": "S85"
   },
   {
      "name": "长春-深圳",
      "value": 95.36,
      "code": "G25"
   },
   {
      "name": "永莘路",
      "value": 95.36,
      "code": "S316"
   },
   {
      "name": "新河-潍坊",
      "value": 95.43,
      "code": "S21"
   },
   {
      "name": "岚山-菏泽",
      "value": 95.57,
      "code": "S38"
   },
   {
      "name": "烟台西港区疏港高速公路",
      "value": 95.67,
      "code": "S7402"
   },
   {
      "name": "莱芜-泰安",
      "value": 95.68,
      "code": "S26"
   },
   {
      "name": "济南-广州",
      "value": 95.74,
      "code": "G35"
   },
   {
      "name": "北京-上海",
      "value": 95.79,
      "code": "G2"
   },
   {
      "name": "济南-徐州",
      "value": 95.81,
      "code": "S33"
   },
   {
      "name": "东营-吕梁",
      "value": 95.85,
      "code": "G2516"
   },
   {
      "name": "龙口-青岛",
      "value": 96.02,
      "code": "S19"
   },
   {
      "name": "荣成-潍坊",
      "value": 96.47,
      "code": "S16"
   },
   {
      "name": "青银高速",
      "value": 96.61,
      "code": "G20"
   },
   {
      "name": "莘县至南乐高速",
      "value": 96.62,
      "code": "S28"
   },
   {
      "name": "泰安-新泰",
      "value": 96.64,
      "code": "S31"
   },
   {
      "name": "潍日高速",
      "value": 96.77,
      "code": "G1815"
   },
   {
      "name": "蓬莱至栖霞高速公路",
      "value": 97.12,
      "code": "S17"
   },
   {
      "name": "枣庄连接线高速公路",
      "value": 97.41,
      "code": "S83"
   }]





option = {
   "title": {
      "left": "center",
      "textStyle": {
         "fontSize": 12
      }
   },
   "barMaxWidth": "50%",
   "toolbox": {
      "feature": {
         "saveAsImage": {
            "pixelRatio": 1
         }
      }
   },
   "tooltip": {
      "trigger": "axis",
      "axisPointer": {
         "type": "shadow"
      }
   },
   "grid": {
      "left": 30,
      "right": 40,
      "y": 40,
      "bottom": "15%"
   },
   "dataZoom": [{
      "start": 0,
      "maxValueSpan": 30
   }],
   "xAxis": {
      "type": "category",
      "data": xData,
      "axisLabel": {
         "interval": 0,
         "rotate": 0,
         "fontSize": 12
      }
   },
   "yAxis": {
      "type": "value",
      "name": "",
      "axisLabel": {
         "fontSize": 12,
         "formatter": "{value}"
      },
      "splitLine": {
         "show": false
      },
      "max": 100,
      "min": 80
   },
   "series": [{
      "name": "PQI",
      "type": "bar",
      "barMaxWidth": 30,
      "data": seriesData,
      "label": {
         "normal": {
            "show": true,
            "position": "top",
            "textStyle": {
               "color": "#000"
            },
            "fontSize": 12
         }
      },
      "itemStyle": {
         "normal": {}
      },
      "markLine": {
         "symbol": ["none", "none"],
         "itemStyle": {
            "normal": {
               "lineStyle": {
                  "type": "dotted",
                  "color": "red"
               },
               "label": {
                  "color":"red",
                  "show": true,
                  "position": "end",
                  "formatter": "{b}\n{c}",
                  "fontSize": 12
               }
            }
         },
         "data": markData
      }
   }],
   "color": "#3bb3ff",
   "visualMap": {
      "top": "10%",
      "left": "center",
      "orient": "horizontal",
      "textStyle": {
         "fontSize": 12
      },
      "pieces": [{
         "gt": 90,
         "lte": 100,
         "label": "优",
         "color": "#00DD00"
      },
      {
         "gt": 80,
         "lte": 90,
         "label": "良",
         "color": "#5ED5D1"
      },
      {
         "gt": 70,
         "lte": 80,
         "label": "中",
         "color": "#EEEE00"
      },
      {
         "gt": 60,
         "lte": 70,
         "label": "次",
         "color": "#FF8C00"
      },
      {
         "gt": 0,
         "lte": 60,
         "label": "差",
         "color": "#FF3333"
      }],
      "outOfRange": {
         "color": "#999"
      }
   }
}