Echarts在线免费图表

 
            option = {
	//你的代码
	backgroundColor: '#081736',
	tooltip: {
		showContent: true,
		trigger: 'axis',
		backgroundColor: 'rgba(8,36,68,.7)',
		color: '#fff',
		textStyle: {
			color: '#fff',
		},
	},
	legend: {
		show: false,
		top: '0%',
		right: '10',
		icon: 'rect',
		itemWidth: 13,
		itemHeight: 13,
		textStyle: {
			color: 'rgba(250,250,250,0.6)',
			fontSize: 16,
		},
	},
	grid: {
		left: '24%',
		right: '16%',
		top: '15%',
		bottom: '8%',
		// width: 250,
	},
	xAxis: [
		{
			splitLine: {
				show: false,
			},
			type: 'value',
			show: false,
		},
	],
	yAxis: [
		{
			splitLine: {
				show: false,
			},
			axisLine: {
				//y轴
				show: false,
			},
			type: 'category',
			axisTick: {
				show: false,
			},
			inverse: true,
			data: [
				'秦州区',
				'麦积区',
				'甘谷县',
				'秦安县',
				'武山县',
				'清水县',
				'张家川县',
			],
			axisLabel: {
				color: '#fff',
				fontSize: 13,
				margin: 10,
				formatter: function (value) {
					if (value.length > 5) {
						return value.substring(0, 5) + '...';
					} else {
						return value;
					}
				},
			},
		},
		{
			type: 'category',
			inverse: true,
			axisTick: 'none',
			axisLine: 'none',
			show: true,
			axisLabel: {
				textStyle: {
					color: '#29A0FB',
					fontSize: '13',
				},
				formatter: function (value) {
					if (value.length > 5) {
						return value.substring(0, 5) + '...';
					} else {
						return value + '%';
					}
				},
			},
			// data: value,
			data: [90, 38, 36, 34, 32, 30, 28],
		},
	],
	series: [
		{
			name: '全网承办率',
			type: 'bar',
			barWidth: 14, // 柱子宽度
			showBackground: true,
			MaxSize: 0,
			barBorderRadius: [6, 6, 6, 6],
			backgroundStyle: {
				color: '#CDCED4',
			},
			label: {
				show: false,
				// color: '#A7D6F4',
				// fontSize: 14,
				// distance: 20, // 距离
				// formatter: '{c} ', // 这里是数据展示的时候显示的数据
				// align: "center",
				// position: [290, 0]
			}, // 柱子上方的数值
			itemStyle: {
				barBorderRadius: [8, 8, 8, 8], // 圆角（左上、右上、右下、左下）
				color: new echarts.graphic.LinearGradient(
					1,
					0,
					0,
					0,
					[
						{
							offset: 0,
							color: '#29A0FB',
						},
						{
							offset: 1,
							color: '#51CAD8',
						},
					],
					false
				), // 渐变
			},
			data: [90, 38, 36, 34, 32, 30, 28],
		},
	],
};