Echarts在线免费图表

 
            let xData = ["09/27", "09/28", "09/29", "09/30", "10/01", "10/02", "10/03", "10/04", "10/05", "10/06", "10/07", "10/08", "10/09", "10/10",]
		// 2018年车流量
		let sData1 = [320, 332, 301, 334, 390, 320, 332, 301, 334, 390, 320, 332, 301, 334,]
		// 2019年车流量
		let sData2 = [220, 182, 191, 234, 290, 220, 182, 191, 234, 290, 220, 182, 191, 234,]
		// 车流量同比变化
		let sData3 = [80, 90, 98, 35, 48, -20, -84, -94, -15, 65, 68, -45, -96, -95,]
		let sName1 = "2018年车流量"
		let sName2 = '2019年车流量'
		let sName3 = '车流量同比变化'
		let maxsData3Val = Math.max.apply(Math, sData3)//获取对比最大值
		let minsData3Val = Math.min.apply(Math, sData3)// 获取对比最小值
		let offsetVla1 = 0.5
		let offsetVla2 = 1
		let offsetVla3 = 1
		if (minsData3Val < 0) {
			let totalVal = Math.abs(minsData3Val) + maxsData3Val
			offsetVla2 = maxsData3Val / totalVal
			offsetVla1 = offsetVla2 / 2
			offsetVla3 = offsetVla2 + offsetVla1
		}
		option = {
			title: [{
				text: '{a|G3京台高速万德断面车流量}',
				left: 'center',
				textStyle: {
					rich: {
						a: {
							fontSize: "26px",
							color: '#000000',
							verticalAlign: "bottom",
							fontWeight: "bold"
						},
					}
				},
			}],
			tooltip: {
				trigger: 'axis',
			},
			toolbox: {
				feature: {
					saveAsImage: {}
				}
			},
			legend: {
				textStyle: {
					color: '#000',
					fontSize: 12,
				},
				itemWidth:32,
				itemHeight: 8,
				top: 50,
				data: [{
					name: sName3,
					icon:"rect",
				}, {
					name: sName1,
				}, {
					name: sName2,
				},]
			},
			grid: [{
				top: '100',
				left: '10%',
				right: '10%',
				bottom: '10%',
			}],
			xAxis: [{
				type: 'category',
				boundaryGap: false,
				position: "bottom",
				axisLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				axisLabel: {
					interval: 0,
					lineHeight: 16,
					fontWeight: "bold",
					color: "#000000",
					rotate:45
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: "#4f81bd",
						opacity: 0.18,
						type: "dashed"
					}
				},
				data: xData
			}],
			yAxis: [{
				nameTextStyle: {
					color: '#fff',
					fontSize: 12,
				},
				type: 'value',
				min: -1000,
				max: 1000,
				splitNumber: 10,
				splitLine: {
					show: true,
				},
				axisLine: {
					show: true,
				},
				axisLabel: {
					show: true,
					margin: 15,
					fontWeight: "bold",
					color: "#000000",
				},
				axisTick: {
					show: true,
				},
			}],
			series: [
				{
					name: sName1,
					type: 'line',
					smooth: true,
					symbolSize: 0,
					lineStyle: {
						normal: {
							color: "#ff0000",
						},
					},
					itemStyle:{
						color: "#ff0000",
					},
					z: 0,
					data: sData1
				},
				{
					name: sName2,
					type: 'line',
					smooth: true,
					symbolSize: 0,
					lineStyle: {
						normal: {
							color: "#0070c0",
						},
					},
					itemStyle:{
						color: "#0070c0",
					},
					z: 0,
					data: sData2
				},
				{
					name: sName3,
					type: 'line',
					symbol: "none",
					smooth: true,
					lineStyle: {
						width: 0
					},
					itemStyle:{
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: '#4d0fd8'
						},
						{
							offset: offsetVla1,
							color: '#156d7a'
						},
						{
							offset: offsetVla2,//最大值/总跨度（最大值+（-最小值））
							color: '#65b230'
						},
						{
							offset: offsetVla3,
							color: '#fbfc01'
						},
						{
							offset: 1,
							color: '#cf0f80'
						}])
					},
					areaStyle: {
						opacity: 1,
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: '#4d0fd8'
						},
						{
							offset: offsetVla1,
							color: '#156d7a'
						},
						{
							offset: offsetVla2,//最大值/总跨度（最大值+（-最小值））
							color: '#65b230'
						},
						{
							offset: offsetVla3,
							color: '#fbfc01'
						},
						{
							offset: 1,
							color: '#cf0f80'
						}
						])
					},
					data: sData3
				}
			]
		};