对比

描述:当前是关于Echarts图表中的 柱状图 示例。
 
            var option = {
  "ext_js_list": [], 
  "title": {
    "y": "", 
    "text": "", 
    "textStyle": {
      "fontWeight": 700
    }, 
    "x": "center", 
    "show": false
  }, 
  "color": [
    "#577CAD", 
    "#FFA51B", 
    "#EF635C", 
    "#7FBAC4", 
    "#48A47D", 
    "#BCB52B", 
    "#B46A88", 
    "#B29688", 
    "#9FACA4", 
    "#6B6B6B"
  ], 
  "series": [
    {
      "markLine": {
        "data": [], 
        "label": {
          "normal": {
            "position": "middle", 
            "formatter": "{b} {c} ( {a} )", 
            "show": true
          }
        }
      }, 
      "name": "0", 
      "itemStyle": {
        "normal": {
          "color": null
        }
      }, 
      "barMaxWidth": "100", 
      "field_id": "0", 
      "tooltip": {
        // "formatter": this.getNormalFormatterHandler({ttype: 'num', digit: 2, millesimal: false, showText: true, showAxis: true})
      }, 
      "label": {
        "normal": {
          "position": "insideBottom", 
          "align": "center", 
        //   "formatter": this.getNormalFormatterHandler({ttype: 'num', digit: 2, millesimal: false, showText: false, showAxis: false}), 
          "textBorderWidth": 2, 
          "show": true
        }
      }, 
      "barGap": "10%", 
      "data": [
        33248
      ], 
      "type": "bar", 
      "animation": false
    }, 
    {
      "markLine": {
        "data": [], 
        "label": {
          "normal": {
            "position": "middle", 
            "formatter": "{b} {c} ( {a} )", 
            "show": true
          }
        }
      }, 
      "name": "1", 
      "itemStyle": {
        "normal": {
          "color": null
        }
      }, 
      "barMaxWidth": "100", 
      "field_id": "1", 
      "tooltip": {
        // "formatter": this.getNormalFormatterHandler({ttype: 'num', digit: 2, millesimal: false, showText: true, showAxis: true})
      }, 
      "label": {
        "normal": {
          "position": "insideBottom", 
          "align": "center", 
        //   "formatter": this.getNormalFormatterHandler({ttype: 'num', digit: 2, millesimal: false, showText: false, showAxis: false}), 
          "textBorderWidth": 2, 
          "show": true
        }
      }, 
      "barGap": "10%", 
      "data": [
        11
      ], 
      "type": "bar", 
      "animation": false
    }, 
    {
      "markLine": {
        "data": [], 
        "label": {
          "normal": {
            "position": "middle", 
            "formatter": "{b} {c} ( {a} )", 
            "show": true
          }
        }
      }, 
      "name": "2", 
      "itemStyle": {
        "normal": {
          "color": null
        }
      }, 
      "barMaxWidth": "100", 
      "field_id": "2", 
      "tooltip": {
        // "formatter": this.getNormalFormatterHandler({ttype: 'num', digit: 2, millesimal: false, showText: true, showAxis: true})
      }, 
      "label": {
        "normal": {
          "position": "insideBottom", 
          "align": "center", 
        //   "formatter": this.getNormalFormatterHandler({ttype: 'num', digit: 2, millesimal: false, showText: false, showAxis: false}), 
          "textBorderWidth": 2, 
          "show": true
        }
      }, 
      "barGap": "10%", 
      "data": [
        271
      ], 
      "type": "bar", 
      "animation": false
    }, 
    {
      "markLine": {
        "data": [], 
        "label": {
          "normal": {
            "position": "middle", 
            "formatter": "{b} {c} ( {a} )", 
            "show": true
          }
        }
      }, 
      "name": "3", 
      "itemStyle": {
        "normal": {
          "color": null
        }
      }, 
      "barMaxWidth": "100", 
      "field_id": "3", 
      "tooltip": {
        // "formatter": this.getNormalFormatterHandler({ttype: 'num', digit: 2, millesimal: false, showText: true, showAxis: true})
      }, 
      "label": {
        "normal": {
          "position": "insideBottom", 
          "align": "center", 
        //   "formatter": this.getNormalFormatterHandler({ttype: 'num', digit: 2, millesimal: false, showText: false, showAxis: false}), 
          "textBorderWidth": 2, 
          "show": true
        }
      }, 
      "barGap": "10%", 
      "data": [
        363
      ], 
      "type": "bar", 
      "animation": false
    }, 
    {
      "markLine": {
        "data": [], 
        "label": {
          "normal": {
            "position": "middle", 
            "formatter": "{b} {c} ( {a} )", 
            "show": true
          }
        }
      }, 
      "name": "4", 
      "itemStyle": {
        "normal": {
          "color": null
        }
      }, 
      "barMaxWidth": "100", 
      "field_id": "4", 
      "tooltip": {
        // "formatter": this.getNormalFormatterHandler({ttype: 'num', digit: 2, millesimal: false, showText: true, showAxis: true})
      }, 
      "label": {
        "normal": {
          "position": "insideBottom", 
          "align": "center", 
        //   "formatter": this.getNormalFormatterHandler({ttype: 'num', digit: 2, millesimal: false, showText: false, showAxis: false}), 
          "textBorderWidth": 2, 
          "show": true
        }
      }, 
      "barGap": "10%", 
      "data": [
        570
      ], 
      "type": "bar", 
      "animation": false
    }, 
    {
      "markLine": {
        "data": [], 
        "label": {
          "normal": {
            "position": "middle", 
            "formatter": "{b} {c} ( {a} )", 
            "show": true
          }
        }
      }, 
      "name": "5", 
      "itemStyle": {
        "normal": {
          "color": null
        }
      }, 
      "barMaxWidth": "100", 
      "field_id": "5", 
      "tooltip": {
        // "formatter": this.getNormalFormatterHandler({ttype: 'num', digit: 2, millesimal: false, showText: true, showAxis: true})
      }, 
      "label": {
        "normal": {
          "position": "insideBottom", 
          "align": "center", 
        //   "formatter": this.getNormalFormatterHandler({ttype: 'num', digit: 2, millesimal: false, showText: false, showAxis: false}), 
          "textBorderWidth": 2, 
          "show": true
        }
      }, 
      "barGap": "10%", 
      "data": [
        775
      ], 
      "type": "bar", 
      "animation": false
    }, 
    {
      "markLine": {
        "data": [], 
        "label": {
          "normal": {
            "position": "middle", 
            "formatter": "{b} {c} ( {a} )", 
            "show": true
          }
        }
      }, 
      "name": "6", 
      "itemStyle": {
        "normal": {
          "color": null
        }
      }, 
      "barMaxWidth": "100", 
      "field_id": "6", 
      "tooltip": {
        // "formatter": this.getNormalFormatterHandler({ttype: 'num', digit: 2, millesimal: false, showText: true, showAxis: true})
      }, 
      "label": {
        "normal": {
          "position": "insideBottom", 
          "align": "center", 
        //   "formatter": this.getNormalFormatterHandler({ttype: 'num', digit: 2, millesimal: false, showText: false, showAxis: false}), 
          "textBorderWidth": 2, 
          "show": true
        }
      }, 
      "barGap": "10%", 
      "data": [
        2222
      ], 
      "type": "bar", 
      "animation": false
    }
  ], 
  "yAxis": [
    {
      "nameLocation": "middle", 
      "axisTick": {
        "show": false
      }, 
      "scale": false, 
      "name": "", 
      "show": true, 
      "axisLabel": {
        "textStyle": {
          "color": "#787878", 
          "fontSize": 10
        }, 
        // "formatter": this.getNormalFormatterHandler({ttype: 'num', digit: 2, millesimal: false, showText: false, showAxis: false}), 
        "show": true
      }, 
      "splitLine": {
        "lineStyle": {
          "color": "#e9e9e9"
        }
      }, 
      "nameTextStyle": {
        "color": "#787878", 
        "fontSize": 10
      }, 
      "splitNumber": 5, 
      "axisLine": {
        "show": false
      }, 
      "nameGap": 35, 
      "type": "value"
    }
  ], 
  "tooltip": {
    "axisPointer": {
      "type": "shadow"
    }, 
    "trigger": "item", 
    "extraCssText": "border-radius: 0px;", 
    "textStyle": {
      "fontSize": 12
    }
  }, 
  "visualMap": [], 
  "grid": [
    {
      "top": 40, 
      "right": 20, 
      "bottom": 20, 
      "containLabel": true, 
      "left": 20
    }
  ], 
  "xAxis": [
    {
      "nameLocation": "middle", 
      "splitNumber": "10", 
      "minInterval": 1, 
      "name": "", 
      "show": true, 
      "data": [
        "All"
      ], 
      "axisLabel": {
        "textStyle": {
          "color": "#787878", 
          "fontSize": 10
        }, 
        "inside": false, 
        "rotate": 0, 
        "show": false
      }, 
      "boundaryGap": [
        "10%", 
        "10%"
      ], 
      "nameTextStyle": {
        "color": "#787878", 
        "fontSize": 10
      }, 
      "nameGap": 35, 
      "axisLine": {
        "lineStyle": {
          "color": "#A6A6A6"
        }, 
        "show": true
      }, 
      "triggerEvent": true, 
      "z": 10, 
      "type": "category", 
      "axisTick": {
        "show": false
      }
    }
  ], 
  "dataZoom": [
    {
      "end": 100, 
      "bottom": "0%", 
      "show": false, 
      "xAxisIndex": [
        0
      ], 
      "start": 0, 
      "type": "slider"
    }
  ], 
  "toolbox": {
    "feature": {
      "restore": {
        "show": true
      }, 
      "saveAsImage": {
        "show": true
      }, 
      "dataView": {
        "readOnly": false, 
        "show": true
      }, 
      "mark": {
        "show": true
      }, 
      "myDownloadData": {
        "title": "u4e0bu8f7du6570u636e", 
        "icon": "image://http://echarts.baidu.com/images/favicon.png", 
        "onclick": self.downloadData, 
        "show": true
      }, 
      "myShowOption": {
        "title": "u7f16u8f91", 
        "icon": "image://http://echarts.baidu.com/images/favicon.png", 
        "onclick": self.showOption, 
        "show": true
      }, 
      "myGoBack": {
        "title": "u8fd4u56de", 
        "icon": "image://http://echarts.baidu.com/images/favicon.png", 
        "onclick": self.goBack, 
        "show": false
      }
    }, 
    "show": false
  }, 
  "legend": {
    "textStyle": {
      "padding": 0, 
      "lineHeight": 10, 
      "fontSize": 10
    }, 
    "show": true, 
    "itemHeight": 12, 
    "itemGap": 5, 
    "padding": 0, 
    "itemWidth": 12, 
    "pageTextStyle": {}, 
    "data": [
      {
        "name": "0", 
        "icon": "circle"
      }, 
      {
        "name": "1", 
        "icon": "circle"
      }, 
      {
        "name": "2", 
        "icon": "circle"
      }, 
      {
        "name": "3", 
        "icon": "circle"
      }, 
      {
        "name": "4", 
        "icon": "circle"
      }, 
      {
        "name": "5", 
        "icon": "circle"
      }, 
      {
        "name": "6", 
        "icon": "circle"
      }
    ], 
    "left": "left"
  }
}