Echarts在线免费图表

 
            option = {
					backgroundColor: 'rgba(29, 34, 124)',
					grid: {
						top: '10%',
						left: '6%',
						right: '0%',
						bottom: '30%',
						containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						formatter: function (val) {
							let tips = `${val[0].name}`;
							val.forEach(item => {
								if (item.seriesName) {
									tips = tips + `<div style="color:#fff;font-size:12px;line-height: 20px;padding:5px 0;">${item.seriesName} : ${item.value}%</div>`
								}
							})
							return tips
						}
					},
					legend: {
						itemGap: 10,
						itemHeight: 4,
						textStyle: {
							color: 'rgba(255, 255, 255,0.7)',
							fontSize: 14,
						},
						right: "center", //组件离容器左侧的距离，可以是left,center,right，也可以是像素px和百分比10%
						bottom: "15%"
					},
					xAxis: {
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
						axisLine: {
							lineStyle: {
								color: 'transparent', //底部边框颜色
							},
						},
						axisLabel: {
							textStyle: {
								color: '#a6a8b5', //底部文字颜色
								fontSize: 12,
							},
						},
					},
					yAxis: [
						{
							type: 'value',
							splitLine: {
								show: false,
							},
							axisLine: {
								show: false,
								lineStyle: {
									color: 'transparent', //左边框颜色
								},
							},
							axisLabel: {
								show: true,
								fontSize: 12,
								textStyle: {
									color: '#a6a8b5', //左文字颜色
								},
							},
						},
					],
					series: [
						{
							name: '全车型',
							type: 'bar',
							barWidth: 24,
							showBackground: false,
							itemStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [
										{
											offset: 0, color: 'rgb(10,239,255,.8)' // 0% 处的颜色
										}, {
											offset: 1, color: 'rgb(12,160,254,.8)' // 100% 处的颜色
										}
									],
									global: false // 缺省为 false
								}
							},
							data: [20, 80, 90, 40, 34, 64, 12, 52, 16, 34, 85, 62],
							z: 0,
							zlevel: 0,
						},
						{
							name: '',
							type: 'pictorialBar',
							barWidth: 24,
							itemStyle: {
								normal: {
									color: 'rgba(0,63,119,.8)', //数据的间隔颜色
								},
							},
							symbolRepeat: 'fixed',
							symbolMargin: 1,
							symbol: 'rect',
							symbolSize: [24, 3],
							symbolPosition: 'end',
							symbolOffset: [0, 0],
							data: [20, 80, 90, 40, 34, 64, 12, 52, 16, 34, 85, 62],
							z: 1,
							zlevel: 0,
						},
					],
				}