使用echarts中markLine来实现图表标线_echarts markline

新年开工了，上班第一天就是写代码写代码。之前写了和总结了不少关于echarts的图表，今天产品给告诉我在折线中添加平均值，那就加吧。还是老规矩看下效果图。

 
var dom = document.getElementById("lineUnit");
var myChart = echarts.init(dom);
var app = {};
var option;
var colorList = ['#1FD6C1', '#168eff'];
var data1 = [];
var data2 = [];
var data3 = [];
option = {
	grid: {
		top: '10%',
		right: '2%',
		bottom: '10%',
		left: '4%'
	},
	tooltip: {
		trigger: 'axis',
		formatter: function(params) {
			var relVal = params[0].name;
			for (var i = 0, l = params.length; i < l; i++) {
				relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value + "元";
			}
			return relVal;
		}
	},
	legend: {
		//show: false
		orient: 'horizontal',
		x: 'right', //图例位置
		y:'10px',
		itemWidth: 12, //图例宽
		itemHeight: 12, //图例高
		itemGap: 40, //图例之间间距
		padding:[0,20,0,0],
		textStyle: {
			color: '#333', //更改坐标轴文字颜色
			fontSize: 14 //更改坐标轴文字大小
		},
	},
	xAxis: {
		type: 'category',
		//boundaryGap: false, //去除图表四周留白
		axisTick: { //x轴刻度尺  
			show: false
		},
		axisLine: { //x轴线条颜色
			show: true,
			lineStyle: {
				color: '#dadada',
				width: 0.5
			}
		},
		axisLabel: { //x轴文字倾斜
			show: true,
			//rotate: 40, //文字倾斜度
			textStyle: {
				color: '#333', //更改坐标轴文字颜色
				fontSize: 15 //更改坐标轴文字大小
			}
		},
		data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
	},
	yAxis: {
		type: 'value',
		//interval:500,//刻度值间隔值
		name: '',
		nameTextStyle: {
			padding: [0, 30, 5, 0], // y轴name位置
			color: '#333', //更改坐标轴文字颜色
			fontSize: 14 //更改坐标轴文字大小
		},
		splitLine: {
			show: true, //关闭网格线
			lineStyle: {
				color: '#dadada',
				width: 0.5
			}
		},
		axisLine: { //y轴线条颜色
			show: true,
			lineStyle: {
				color: '#dadada',
				width: 0.5
			}
		},
		axisLabel: { //y轴文字倾斜
			textStyle: {
				color: '#333', //更改坐标轴文字颜色
				fontSize: 14 //更改坐标轴文字大小
			}
		},
	},
	series: [{
		data: [220, 432, 330, 530, 620, 420, 732, 530, 630, 620, 720, 1332],
		type: 'line',
		name: '乌市全年月销',
		symbolSize: 8, //设定实心点的大小
		smooth: true, //面积图改成弧形状
		lineStyle: {
			normal: {
				color: { //外边线颜色
					type: 'linear',
					colorStops: [{
						offset: 0,
						color: '#A9F387' // 0% 处的颜色
					}, {
						offset: 1,
						color: '#48D8BF' // 100% 处的颜色
					}],
					globalCoord: false // 缺省为 false
				},
				width: 3, //外边线宽度
				shadowColor: "#1FD6C1", //线阴影颜色
				shadowOffsetY: 15, //阴影大小
				shadowBlur: 20
			}
		},
	
		itemStyle: {
			normal: { //节点颜色
				color: colorList[0],
				borderColor: colorList[0],
			}
		},
		markLine: {//图表标线
		    data: [{ type: 'average', name: '平均值' }],//type: 'average', 平均值,  min最小值,  max 最大值,  median中位数
		},
		label: { //显示当前柱形数值
			show: true,
			position: 'top',
			textStyle: {
				color: '#000', //更改坐标轴文字颜色
				fontSize: 15 //更改坐标轴文字大小
			}
		},
		showSymbol: true, //去除面积图节点圆
 
	},
	{
		data: [120, 232, 130, 330, 820, 620, 532, 630, 430, 720, 620, 932],
		type: 'line',
		name: '喀什全年月销',
		symbolSize: 8, //设定实心点的大小
		smooth: true, //面积图改成弧形状
		lineStyle: {
			normal: {
				color: { //外边线颜色
					type: 'linear',
					colorStops: [{
						offset: 0,
						color: '#90d6ff' // 0% 处的颜色
					}, {
						offset: 1,
						color: '#3ba6fd' // 100% 处的颜色
					}],
					globalCoord: false // 缺省为 false
				},
				width: 3, //外边线宽度
				shadowColor: "#3ba6fd", //线阴影颜色
				shadowOffsetY: 15, //阴影大小
				shadowBlur: 20
			}
		},
		itemStyle: {
			normal: { //节点颜色
				color: colorList[1],
				borderColor: colorList[1],
			}
		},
		markLine: {
		    data: [{ type: 'average', name: '平均值' }],
		},
		label: { //显示当前柱形数值
			show: true,
			position: 'top',
			textStyle: {
				color: '#000', //更改坐标轴文字颜色
				fontSize: 15 //更改坐标轴文字大小
			}
		},
		showSymbol: true, //去除面积图节点圆
	
	}]
};
 
 
if (option && typeof option === 'object') {
	myChart.setOption(option);
};
window.addEventListener("resize",function (){
	echarts.init(document.getElementById('lineUnit')).resize();
});

markLine在echarts官方文档中解释为图表标线。这里只是简单的实现了图表标线，如果大家需要深入的了解markLine中其他属性，可以参考官方文档。