Echarts在线免费图表

 
            let xData = [
				'道路（SP#233）',
				'道路（SP#233）',
				'道路（SP#233）',
				'道路（SP#233）',
				'道路（SP#233）',
				'道路（SP#233）',
				'道路（SP#233）',
				'道路（SP#233）',
				'道路（SP#233）'
			]; // 类型
			var data1Arr = [2000, 900, 1720, 700, 810, 1815, 800, 580, 1900]; // 数据1
			var data2Arr = [720, 1852, 810, 815, 800, 1580, 900, 720, 1700]; // 数据2
			var data3Arr = [580, 1900, 720, 1580, 700, 810, 815, 1800, 700]; // 数据3
			//var data4Arr = [720, 700, 810, 815, 800, 580, 900, 720, 700]; // 数据4

			var dataName = ['老旧车', '黑烟车', '尾气超标'];
			let zoomShow = xData.length > 10;

			let dataList = [data1Arr, data2Arr, data3Arr];
			//let colorList = ["#667BFF", "#29ACFF", "#FDAD59", ];
			let colorList = [
				{
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: '#657AFF'
						},
						{
							offset: 1,
							color: '#B2C3FF'
						}
					]
				},
				{
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: '#29ACFF'
						},
						{
							offset: 1,
							color: '#4ADEFF'
						}
					]
				},
				{
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: '#FDAD59'
						},
						{
							offset: 1,
							color: '#FFCC7F'
						}
					]
				}
			];

			let seriousList = [];
			dataName.map((item, index) => {
				seriousList.push({
					name: dataName[index],
					label: {
						show: false
					},
					color: colorList[index],
					itemStyle: {
						barBorderRadius: [2, 2, 0, 0]
					},
					type: 'bar',
					barWidth: '15', //柱型宽度
					data: dataList[index]
				});
			});

			let option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'none'
					},
					textStyle: {
						fontSize: 12
					}
				},
				dataZoom: [
					{
						show: zoomShow, //flase直接隐藏图形
						type: 'slider',
						backgroundColor: 'transparent',
						brushSelect: false, // 是否开启刷选功能
						zoomLock: false, // 是否锁定选择区域大小
						height: 7,
						//left: 'center', //滚动条靠左侧的百分比
						bottom: 0,
						startValue: 0, //滚动条的起始位置
						endValue: 8, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
						handleStyle: {
							color: '#E8E8E8',
							borderColor: '#E8E8E8'
						},
						fillerColor: '#E8E8E8',
						borderColor: 'transparent',
						showDetail: false,
						dataBackground: {
							areaStyle: {
								opacity: 0
							},
							lineStyle: {
								color: 'transparent'
							}
						}
					}
				],
				legend: {
					data: dataName,
					right: '35%',
					top: '0',
					//icon: "circle",
					itemWidth: 24, // 设置宽度
					itemHeight: 14, // 设置高度
					itemGap: 24,
					textStyle: {
						color: 'rgba(0, 0, 0, 0.85)',
						fontFamily: 'Source Han Sans CN-Regular',
						fontSize: 12,
						padding: [0, 0, 0, 5]
					}
				},
				grid: {
					left: '10',
					right: '10',
					top:'40',
					bottom: '10', //下边距,
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						axisLine: {
							show: true,
							lineStyle: {
								color: '#cccccc'
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							color: '#808080',
							textStyle: {
								fontSize: 12,
								fontFamily: 'Source Han Sans CN-Regular'
							}
						},
						data: xData
					}
				],
				yAxis: [
					{
						//name: '单位：人',
						nameTextStyle: {
							color: '#808080',
							fontSize: 12,
							fontFamily: 'Source Han Sans CN-Regular',
							align: 'left',
							padding: [0, 0, -5, 0]
						},
						type: 'value',
						splitLine: {
							//y轴网格线
							lineStyle: {
								color: 'rgba(0, 0, 0, 0.1)',
								type: 'dashed'
							}
						},
						axisLabel: {
							//y轴文本
							//showMinLabel: false, //y轴是否设置最小刻度0
							color: '#808080',
							textStyle: {
								fontSize: 12,
								fontFamily: 'Source Han Sans CN-Regular'
							}
						},
						axisTick: {
							show: false
						},
						axisLine: {
							//y轴线
							show: false,
							lineStyle: {
								color: '#D1D1D1'
							}
						}
					}
				],
				series: seriousList
			};