变异横向柱状图echarts 柱状配置项内容和展示

      var value=90;
var max = 100;
let maxList = [100,100,100,100,100];
let valueList = [50,60,66,70,75];
	var pushDataBaseConcactArr = [{
		"name": "2月工单数",
		"data": [{
			value: 0
		}, {
			value: 2
		}]
	}];
	let dataBaseOne = [],
		dataBaseTwo = [];
	dataBaseList = [{
		"name": "连接",
		"value": 2
	}, {
		"name": "断开",
		"value": 0
	}];
	for(let j = 0; j < dataBaseList.length; j++) {
		dataBaseOne.push(dataBaseList[j].name);
		dataBaseTwo.push(parseFloat(dataBaseList[j].value));
	}
	var circleRadius = ['14%', '21%'];
	var center = [
		['22%', '38%']
	];
	var theDataBaseIpColor = [new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
			offset: 0,
			color: '#faa75d'
		}, {
			offset: 1,
			color: '#fed190'
		}]),
		new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
			offset: 0,
			color: '#ff7d63'
		}, {
			offset: 1,
			color: '#f89784'
		}]),
		new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
			offset: 0,
			color: '#ff7d63'
		}, {
			offset: 1,
			color: '#fb8b75'
		}]),
		new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
			offset: 0,
			color: '#ff7d63'
		}, {
			offset: 1,
			color: '#fa8f7a'
		}]),
		new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
			offset: 0,
			color: '#ff7d63'
		}, {
			offset: 1,
			color: '#fa8f7a'
		}]),
	];
	option = {
		legend: {
			textStyle:{
				color:"#fff",
				fontSize:16
			},
			itemWidth:10,
			left:'25%',
			top:"12%",
			data: [{
				name: "断开",
				icon: "circle"
			}, {
				name: "连接",
				icon: "circle"
			}]
		},
		backgroundColor:"#013d5a",
		grid: [{
				x: '10%',
				y: '58%',
				width: '32%',
				height: '23%'
			},
			{
				x: '60%',
				y: '25%',
				width: '37%',
				height: '58%'
			},
		],
		"xAxis": [{
			axisLine: {
				show: true,
				lineStyle: {
					color: '#0a7594',
				}
			},
			axisLabel: {
				color: '#01fffe',
				fontSize: 18
			},
			axisTick: {
				show: true,
				color: '#0a7594'
			},
			splitLine: {
				show: false
			}

		}, {
			gridIndex: 1,
			type: 'value',
			"max": max,
			"splitLine": {
				"show": false
			},
			"axisLine": {
				"show": false
			},
			"axisLabel": {
				"show": false
			},
			"axisTick": {
				"show": false
			}
		}],
		"yAxis": [{
			data: dataBaseOne,
			axisLine: {
				show: true,
				lineStyle: {
					color: '#0a7594'
				}
			},
			axisLabel: {
				color: '#fff',
				interval: 0,
				fontSize: 16
			},
			axisTick: {
				show: true,
				color: '#0a7594'
			}
		}, {
			gridIndex: 1,
			"type": "category",
			"inverse": false,
			"data": ["19.130.\n217.211","19.130.\n228.241",  "19.130.\n211.156","10.6.\n2.180", "19.130.\n212.33"],
			"axisLine": {
				"show": false
			},
			"axisTick": {
				"show": false
			},
			"axisLabel": {
				"margin": 12,
				"textStyle": {
					"color": "#41cddc",
					"fontSize": 18
				}
			}
		}],
		"series": [{ //内
				type: 'bar',
				xAxisIndex: 1,
				yAxisIndex: 1,
				barWidth: '42%',
				label: {
					normal: {
						show: true,
						position: 'right',
						textStyle: {
							color: '#fff',
							fontSize: 18
						},
						formatter: function(e) {
							return(e.value / max * 100).toFixed(2) + "%"
						}
					}
				},
				legendHoverLink: false,
				itemStyle: {
					normal: {
						color: function(params, index) {
							return theDataBaseIpColor[params.dataIndex];
						}
					}
				},
				z: 2,
				data: valueList
			},
			{ //框
				xAxisIndex: 1,
				yAxisIndex: 1,
				type: 'bar',
				barWidth: '51%',
				barGap: '-110%',
				label: {
					normal: {
						show: false,
						position: 'right',
						textStyle: {
							color: '#eee'
						}
					}
				},
				itemStyle: {
					normal: {
						color: '#0e5478', //底色
						borderWidth: 1,
						borderColor: '#01fafc'
					}
				},
				data: maxList,
				z: 1,
			},
			{ //分隔
				xAxisIndex: 1,
				yAxisIndex: 1,
				"type": "pictorialBar",
				itemStyle: {
					normal: {
						color: "#0e5478"
					}

				},
				"symbolRepeat": "fixed",
				"symbolMargin": "10",
				symbol: 'rect',
				"symbolClip": true,
				"symbolSize": [2, '55%'],
				"symbolPosition": "start",
				"symbolOffset": [
					0, -2
				],
				"symbolBoundingData": max,
				"data": valueList
			}, {
				type: 'bar',
				barWidth: '56%',
				itemStyle: {
					normal: {
						color: '#00ffff',
					}
				},
				label: {
					normal: {
						show: true,
						position: 'right',
						color: "#fff",
						fontSize: 20
					}
				},
				data: dataBaseTwo
			}, {
				name: pushDataBaseConcactArr[0].name,
				center: center[0],
				radius: circleRadius,
				type: 'pie',
				startAngle: 45,
				hoverAnimation: false,
				label: {
					normal: {
						formatter: function(params, i) {
							return params.percent + "%";
						},
						fontSize: 20,
					},
					position: 'outside',
					show: true,
				},
				data: [{
					name: "断开",
					itemStyle: {
						normal: {
							color: '#ff8066'
						}
					},
					value: pushDataBaseConcactArr[0].data[0].value,

				}, {
					name: "连接",
					value: pushDataBaseConcactArr[0].data[1].value,
					itemStyle: {
						normal: {
							color: '#00ffff'
						}
					},
				}]
			}
		]
	};