示例1

在series中新添加一个data用于绘画参考线，以自定义名字作为显示

option={xAxis: {data: ['A', 'B', 'C', 'D', 'E'],boundaryGap: true,splitArea: {show: true}},yAxis: {max: 2},series: [{name: 'line',type: 'line',stack: 'all',symbolSize: 6,data: [0.3, 1.4, 1.2, 1, 0.6],},{name: 'line',type: 'line',stack: 'all',symbolSize: 6,markLine: {data: [{"name": "start","yAxis": 1.8,"label": {"formatter": "{b}","position": "end"}},],label: {distance: [20, 8],}}}],grid: {top: 30,left: 60,right: 60,bottom: 40}
};

示例2

画两条参考线，并以具体值作为标签显示

option={xAxis: {data: ['A', 'B', 'C', 'D', 'E'],boundaryGap: true,splitArea: {show: true}},yAxis: {max: 2},series: [{name: 'line',type: 'line',stack: 'all',symbolSize: 6,data: [0.3, 1.4, 1.2, 1, 0.6],},{name: 'line',type: 'line',stack: 'all',symbolSize: 16,markLine: {data: [{"name": "start","yAxis": 1.8,}, {"name": "ssss","yAxis": 0.5,},],label: {distance: [20, 8],}}}],
};

示例3

在已有折线数据中，添加最大值、最小值、平均值

option={xAxis: {data: ['A', 'B', 'C', 'D', 'E'],boundaryGap: true,splitArea: {show: true}},yAxis: {max: 2},series: [{name: 'line',type: 'line',stack: 'all',symbolSize: 6,data: [0.3, 1.4, 1.2, 1, 0.6],markLine: {data: [{ type: "max", name: "Max" },{ type: "min", name: "Min" },{ type: "average", name: "Avg" }],},},],
};

【前端】echarts折线图中画水平参考线辅助线相关推荐

1.1.5 在同一折线图中画2条曲线
插入--图表转载于:https://www.cnblogs.com/baixu/p/10256727.html
Echarts折线图的平移假动画
Echarts折线图的平移假动画 #可视化项目中经常用图表的方式来展示数据,折线图是经常出现的,但是在echarts折线图中正常情况是通过删除数据的第一个,添加一个新数据在数组的末尾来实现动画,此动画 ...
echarts 折线图折线从头开始
在echarts折线图中,默认折线从刻度中心开始,我们为了图标的美观有时需要折线从头开始显示,一个配置项就可以轻松搞定. boundaryGap:false
echarts折线图堆叠怎么设置_ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
使用 Echarts 实现折线图中线条添加、删除、编辑
使用 Echarts 实现折线图中线条添加.删除.编辑小帅小白,也能改变浪花的方向,公众号:51reboot运维开发介绍一下使用 Echarts 做数据统计分析,如何实现支持折线图的添加.删除. ...
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决参考文章: (1)ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决 (2)https://ww ...
echarts折线图背景线_echarts-设置折线图中折线线条颜色和折线点颜色
1.问题背景设计一条折线图,但是图形中不用插件自带的颜色,需要自定义线条和折点的颜色 2.实现源码 (1)图形自分配颜色 echarts-设置折线图中折线线条颜色和折线点颜色 body,html{ ...
vue中echarts折线图双折线，鼠标悬浮时间，将两个X轴的内容以及Y轴的内容全部显示出来
vue中echarts折线图双折线,鼠标悬浮时间,将两个X轴的内容以及Y轴的内容全部显示出来: 只要修改一个地方,用formatter方法 tooltip: {trigger: 'axis',axis ...
1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字)，手把手教程系列
一.echarts 折线图(折线统计图) 折线图在我们也是我们的数据可视化图表中最常用的一种图表之一,是用折线将各个数据点标志连接起来的图表,不仅可以表示数量的多少,而且可以反映同一事物在不同时间里的 ...

【前端】echarts折线图中画水平参考线辅助线

文章目录

示例1

示例2

示例3

【前端】echarts折线图中画水平参考线辅助线相关推荐

最新文章

热门文章