Echarts在线免费图表

 
            let barWidth = 10 /* 进度条及进度条radius宽度 */,
	nameWidth = 60 /* 进度条名称宽度 */,
	unit = '人' /* 单位 */,
	attaData = [] /* 进度条数据 */,
	attaVal = [] /* 进度条数值 */,
	topName = [] /* 进度条名称 */,
	salvProMax = []; /* 背景条数据 */
let datas = [
	{
		name: '七里墩街道办事处',
		value: 2400,
	},
	{
		name: '天水郡街道办事处',
		value: 2300,
	},
	{
		name: '石马坪街道办事处',
		value: 2200,
	},
	{
		name: '大城街道办事处',
		value: 2100,
	},
	{
		name: '玉泉镇',
		value: 2000,
	},
	{
		name: '娘娘坝镇',
		value: 1900,
	},
	{
		name: '牡丹镇',
		value: 1800,
	},
	{
		name: '西关街道办事处',
		value: 1700,
	},
	{
		name: '中城街道办事处',
		value: 1600,
	},
	{
		name: '汪川镇',
		value: 1500,
	},
	{
		name: '天水镇',
		value: 1400,
	},
	{
		name: '皂郊镇',
		value: 1300,
	},
	{
		name: '大门镇',
		value: 1200,
	},
	{
		name: '东关街道办事处',
		value: 1100,
	},
	{
		name: '华岐镇',
		value: 1000,
	},
	{
		name: '太京镇',
		value: 900,
	},
	{
		name: '杨家寺镇',
		value: 800,
	},
	{
		name: '中梁镇',
		value: 700,
	},
	{
		name: '秦岭镇',
		value: 600,
	},
	{
		name: '藉口镇',
		value: 500,
	},
	{
		name: '关子镇',
		value: 400,
	},
	{
		name: '平南镇',
		value: 300,
	},
	{
		name: '齐寿镇',
		value: 200,
	},
];
let attackSourcesColor = [
	new echarts.graphic.LinearGradient(0, 1, 1, 1, [
		{ offset: 0, color: 'rgba(16, 136, 189, 0.17)' },
		{ offset: 1, color: 'rgba(16, 136, 189, 0.91)' },
	]),

];
datas.forEach((it, i) => {
	let itemStyle = {
		color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],
	};
	topName[i] = `${it.name}`;
	attaVal[i] = it.value;
	attaData[i] = {
		value: parseFloat(it.value).toFixed(2),
		itemStyle: itemStyle,
	};
});
/* 该值无具体作用，取进度最大值 * 1.2 */
salvProMax = Array(attaVal.length).fill(Math.max(...attaVal) * 1.2); backgroundColor: '#BBE4EC',
	option = {
		//你的代码
		backgroundColor: '#24549F',
		tooltip: {
			show: false,
			backgroundColor: 'rgba(3,169,244, 0.5)', //背景颜色（此时为默认色）
			textStyle: {
				fontSize: 16,
			},
		},
		grid: {
			left: '8%',
			right: '8%',
			top: '8%',
			bottom: '8%',
			containLabel: true,
		},
		legend: {
			show: false,
		},
		xAxis: {
			show: false,
		},
		yAxis: [
			{
				//名称
				type: 'category',
				inverse: true,
				axisTick: 'none',
				axisLine: 'none',
				show: true,
				axisLabel: {
					interval: 0,
					textStyle: {
						color: '#11E2EF',
						fontSize: 20,
					},
					formatter: (val, i) => {
						return `{name|${val}}`;
					},
					rich: {
						num: {
							width: 16,
							fontSize: 20,
							fontWeight: 400,
						},
						name: {
							width: nameWidth,
							fontSize: 16,
							fontWeight: 400,
						},
					},
				},
				data: topName,
			},
			{
				type: 'category',
				inverse: true,
				axisTick: 'none',
				axisLine: 'none',
				show: true,
				axisLabel: {
					textStyle: {
						// color: '#E5AB29',
						fontSize: 20,
					},
					formatter: (val) => {
						return `{num|${val}}{unit|${unit}}`;
					},
					rich: {
						num: {
							fontSize: 20,
							fontWeight: 500,
							color: '#E5AB29'
						},
						unit: {
							fontSize: 14,
							color: '#3AAEE1'
						},
					},
				},
				data: attaVal,
			},
		],
		series: [
			// 进度条
			{
				zlevel: 1,
				name: '',
				type: 'bar',
				barWidth: 15,
				animationDuration: 1500,
				data: attaData,
				align: 'center',
				itemStyle: {
					normal: {
						barBorderRadius: 4,
						borderColor: 'rgba(17, 226, 239, 1)',
						color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
							offset: 0,
							color: "rgba(16, 136, 189, 0.17)"
						},
						{
							offset: 1,
							color: 'rgba(16, 136, 189, 0.91)',
						}
						])
					},
				},
				label: {
					show: false,
				},
			},
			// 背景条
			{
				name: '',
				type: 'bar',
				barWidth: 15,
				barGap: '-100%',
				data: salvProMax,
				itemStyle: {
					normal: {
						barBorderRadius: barWidth,
						color: '#12274D',
					},
					emphasis: {
						color: '#12274D',
					},
				},
			},
		],
	};