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

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


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 += '
' + 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中其他属性,可以参考官方文档。

你可能感兴趣的:(Echarts,echarts,javascript,ecmascript)