背景:

实现:

Echarts Option 代码示例

 option = {title: {text: '折线图示例 - X轴为数值'},xAxis: {type: 'value',  // X 轴改为数值型min: 0,         // 最小值max: 10,        // 最大值},yAxis: {type: 'value'},series: [{type: 'line',data: [[0, 150], [2, 230], [4, 224], [6, 218], [8, 135], [10, 260]  // 数值型数据],markLine: {silent: true,  // 不触发鼠标事件data: [{yAxis: 200, // 水平辅助线位于 Y 轴的 200label: {show: false  // 隐藏默认的标记文字}}],lineStyle: {type: 'solid',color: '#FF0000'  // 辅助线颜色}},markPoint: {data: [{ coord: [0, 200], label: { formatter: '0' } },   // 在 X=0 的位置{ coord: [2, 200], label: { formatter: '2' } },   // 在 X=2 的位置{ coord: [4, 200], label: { formatter: '4' } },   // 在 X=4 的位置{ coord: [6, 200], label: { formatter: '6' } },   // 在 X=6 的位置{ coord: [8, 200], label: { formatter: '8' } },   // 在 X=8 的位置{ coord: [10, 200], label: { formatter: '10' } }  // 在 X=10 的位置],symbol: 'circle',  // 使用圆形标记symbolSize: 10}}]
};

效果: