Echarts在线免费图表

 
            let obj = {
	xData: ['洪雅县', '汶川县', '茂县松', '潘县', '九寨沟县', '崇州市', '大邑县', '彭州市', '都江堰市', '天全县', '宝兴县', '芦山县', '荥经县', '平武县', '安州区'],
	yData: [1643,1409,1087,532,799,74,325,492,816,325,492,816,325,82,81],
	yName:"碑桩 (牌)数量"
}
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: obj.xData,
			axisLabel: {
				color: 'rgba(170, 233, 255, 1)',
				fontSize: 14,
				fontFamily:'SourceHanSansCN-Regular',
				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: '#fff',
					fontSize: '18',
				},
				formatter: function (value) {
					return value
					// if (value.length > 5) {
					// 	return value.substring(0, 5) + '...';
					// } else {
					// 	return value + '%';
					// }
				},
			},
			// data: value,
			data: obj.yData,
		},
	],
	series: [
		{
			name: obj.yName,
			type: 'bar',
			barWidth: 14, // 柱子宽度
			showBackground: true,
			MaxSize: 0,
			barBorderRadius: [0, 0, 0, 0],
			backgroundStyle: {
				color: 'rgba(13, 59, 94, 0.7)',
			},
			label: {
				show: false,
				// color: '#A7D6F4',
				// fontSize: 14,
				// distance: 20, // 距离
				// formatter: '{c} ', // 这里是数据展示的时候显示的数据
				// align: "center",
				// position: [290, 0]
			}, // 柱子上方的数值
			itemStyle: {
				barBorderRadius: [0, 0, 0, 0], // 圆角（左上、右上、右下、左下）
				color: new echarts.graphic.LinearGradient(
					1,
					0,
					0,
					0,
					[
						{
							offset: 0,
							color: 'rgba(73, 210, 202, 1)',
						},
						{
							offset: 1,
							color: 'rgba(19, 156, 210, 1)',
						},
					],
					false
				), // 渐变
			},
			data: obj.yData,
		},
	],
};