echarts 折线图上标记独立坐标点

实现下图所示功能:
在多条折线图中，给定一个独立的点坐标，在图上进行显示（图一），点击该坐标点显示该坐标的位置信息（图二）

具体实现代码：
html：

<div id="main" style="width: 600px;height:400px;"></div>

js

var myChart = echarts.init(document.getElementById('main'));
		let option = {
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				top: '150px',
				containLabel: true
			},
			toolbox: {
				feature: {
					saveAsImage: {}
				}
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: [40, 80, 120, 160, 200, 240, 280]
			},
			yAxis: {
				type: 'value'
			},
			series: [{
					name: '邮件营销',
					type: 'line',
					data: [120, 132, 101, 134, 90, 230, 210],
					markPoint: {
						symbol: 'circle',
						symbolSize: 20,
						data: [{
							name: '某个坐标',
							yAxis: '1200',
							xAxis: '180',
							value: '', //1200,200
							_value: '1200, 180',
							label: {
								show: true,
								position: 'top',
								color: "red"
							}
						}]
					},
				},
				{
					name: '联盟广告',
					type: 'line',
					data: [220, 182, 191, 234, 290, 330, 310]
				},
				{
					name: '视频广告',
					type: 'line',
					data: [150, 232, 201, 154, 190, 330, 410]
				},
				{
					name: '直接访问',
					type: 'line',
					data: [320, 332, 301, 334, 390, 330, 320]
				},
				{
					name: '搜索引擎',
					type: 'line',
					data: [820, 932, 901, 934, 1290, 1330, 1320]
				}
			]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);

		myChart.on('click', function (param) {
			//param.name x轴值,param.data y轴值
			option.series[0].markPoint.data[0].value = param.data._value.toString();
			option.series[0].markPoint.data[0].label = {
				position: 'top'
			}
			myChart.setOption(option);
		})

重点

1、添加坐标点击事件用

myChart.on('click', function (param) {})

2、以上代码中markPoint中的xAxis值是x轴的具体数值或者下标，如果不是x轴标记的刻度（具体数值）的话，则不能正常显示，如果换算成非整数的下标，则按照四舍五入的原则就近进行显示（这是有问题的）。所以为了可以正常显示坐标点，使用下面的方式进行双坐标轴都是数值的展示

双坐标数值展示具体代码如下

：此时可以显示任意坐标点而不会说非x轴的值不显示或者四舍五入的显示点的位置

option = {
  tooltip: {
      trigger: "axis",
  },
  legend: {
      data: ['测试'],
  },
  xAxis: {
    boundaryGap: false,
  },
  grid: {
      left: "0.5%",
      right: "0.5%",
      bottom: "10%",
      top: '4%',
      containLabel: true,
  },
  yAxis: {},
  series: [
    {
      name:'测试',
      data: [["0.0", "1.0"],["1.0", "1.116"],["3.0", "1.233"], ["3.5", "1.349"],["4.0", "1.466"], ["5.0", "1.582"],["6.0", "1.69"]],
      type: 'line',
      markPoint:{
        symbol: 'circle' ,
        symbolSize:20,
        data: [{
            yAxis:1.3,
            xAxis:2.2,
        }]
      }
    }
  ]
};

这样可以给定具体的x、y的值进行正常显示。