【echarts】柱状图+折线图+警戒线配置项

最近使用echarts做一些统计图，界面效果如下：

配置项如下：

let xAxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
let sySeriesData = [24, 15, 22, 23, 24, 22, 22, 19, 24, 20, 18, 18]
let dblSeriesData = [8, 5, 4, 8, 9, 7, 6, 5, 8, 9, 4, 8]

option = {
	title: {
		// text: '情况分析',
		textStyle: {
			color: '#333',
			fontSize: 15,
			fontWeight: 500,
			height: 32,
			lineHeight: 32
		}
	},
	color: ['#40A1FF', '#FA7394'],
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'cross',
			crossStyle: {
				color: '#999'
			}
		},
		formatter: function(params) {
			var result = params[0].axisValue + '<br>';
			params.forEach(function(item) {
				const dw = item.seriesName === '时延（ms)' ? 'ms' : '%';
				const seriesName = item.seriesName === '时延（ms)' ? item.seriesName.substr(0, 2) : item.seriesName
				result += item.marker + seriesName + '：' + item.data + dw + '<br>'
			})
			return result;
		}
	},
	legend: {
		data: ['时延（ms)', '丢包率'],
		right: 20,
		top: 4,
		textStyle: {
			fontSize: 15,
			height: 32,
			lineHeight: 32,
		}
	},
	grid: {
		left: '0%',
		right: '0%',
		containLabel: true
	},
	xAxis: [{
		type: 'category',
		data: xAxis,
		axisPointer: {
			type: 'shadow'
		}
	}],
	yAxis: [{
			type: 'value',
			// name: '时延',
			min: 0,
			max: 30,
			interval: 5,
			axisLabel: {
				formatter: '{value}'
			},
			axisLine: {
				show: false, // y轴是否显示
			},
			axisTick: {
				show: false // 不显示刻度
			},
			splitLine: { //分割线配置
				show: true,
				lineStyle: {
					color: 'rgba(255,255,255,0)'
				}
			},
			show: true
		},
		{
			type: 'value',
			// name: '丢包率',
			min: 0,
			max: 10,
			interval: 1,
			axisLabel: {
				formatter: '{value}%'
			},
			axisTick: {
				show: false // 不显示刻度
			},
			axisLine: {
				show: false, // y轴是否显示
			},
			splitLine: { //分割线配置
				show: true,
				lineStyle: {
					color: 'rgba(255,255,255,0)'
				}
			},
			show: true
		}
	],
	series: [{
			name: '时延（ms)',
			type: 'bar',
			barWidth: 30, // 柱状宽度
			itemStyle: {
				normal: {
					label: {
						show: true,
						position: 'top'
					}
				}
			},
			data: sySeriesData
		},
		{
			name: '丢包率',
			type: 'line',
			smooth: true,
			yAxisIndex: 1,
			data: dblSeriesData,
			markLine: {
				symbol: "none",
				data: [{
					silent: false, //鼠标悬停事件  true没有，false有
					lineStyle: { //警戒线的样式  ，虚实  颜色
						type: "solid",
						color: "#C2EFEF",
					},
					label: {
						position: 'end',
						formatter: "警戒线",
						show: false
					},
					yAxis: 5
				}]
			}
		}
	]
};