配置项如下
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"
}
}