本文主要介绍Echarts图中添加坐标轴markLine标识线的方法，文章通过多个案例与实例代码给大家介绍的非常详细，具有一定的参考价值,需要的朋友可以参考下
Echart3数据可视化视图
给坐标轴加一个标识线markLine
当X轴不是数值时，而是一个类型数据，如年份，公司名，企业名，这时Echarts图就不是从X轴起始位置开始的，所以我们就要给X轴加一个虚拟的值'0'，在markLine中也是在赋值起始位置X轴值时，放置虚拟数据，并且设置一个boundaryGap: 0,可以让坐标轴与刻度之间空白变为0，这时标示线就从X轴起始位置开始了，详细属性可以去Echarts官网查看。
这里还要说一句在设置markLine下面data值时{x:”,//代表的是容器内x的值，y:”,容器内y的值}，如果要设置在坐标轴内的标示线，就要设置xAxis和yAxis.
代码如下
option ={
xAxis: {
splitLine: {
show: false,
},
axisLabel: {
color: '#fff',
rotate: '35',
fontSize: 10,
},
data: ['0', '2013年', '2014年', '2015年', '2016年', '2017年'],
boundaryGap: 0,
},
yAxis: {
name: '（单位/km）',
splitLine: {
show: false,
},
axisLabel: {
color: '#fff',
},
axisPointer: {
lineStyle: {
color: '#fff',
},
value: '140',
},
},
grid: {
top: '10%',
bottom: '27%',
},
series: [{
data: DataAll,
type: 'scatter',
symbolSize: function (parmas) {
return Math.ceil(parmas[2] / 1000);
},
label: {
emphasis: {
show: true,
formatter: function (param) {
return param.data[3] + param.data[4];
},
position: 'top',
},
},
markLine: {
data: [
[
{ name: '标线1起点', xAxis: 0, yAxis: 300, symbol: 'circle'},
{ name: '标线1终点', xAxis: '2017年', yAxis: 300, symbol: 'circle' },
],
],
label: {
normal: {
show: true,
position: 'middle',
formatter: '节能与新能源汽车技术路线图2020年目标',
},
},
lineStyle: {
normal: {
type: 'solid',
color: '#fff',
},
},
},
itemStyle: {
normal: {
color: '#0fefee',
},
},
}],
}效果图
以上就是Echarts图中添加坐标轴markLine标识线的方法，希望对各位有所帮助。如果大家还有其他方面的问题，可以留言交流
