详细介绍如何计算两条折线的交点并使用Echarts展示以及图表优化

1、背景

前段时间公司有个需求，需要在一个图表中展示两条折线，并且绘制出两条线的交点。为了满足需求大哥的需求，我也是着实想了有一会。下面我就把具体的实现过程给大家展示一下。

1.1、ECharts 简介

个人很喜欢Echarts这个图表库，就先给大家介绍一下，方便大家更好的了解。

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts 功能很强大，提供了常见的二维图表，比如折线图、柱图、散点图、饼图、K线图，以及地图、热力图、线图（又称路径图），还有用于表示数据关系的关系图、旭日图等，此外还可以通过GL实现绚丽的三维可视化图。

Echarts 使用起来很方便，展示不同的图表只需要设置简单的配置项；官方的文档写的也很清楚，从简单的实现，到复杂的配置，以及内含的API，应有尽有；除此之外，还有丰富的实例库，以及Echarts的使用者的作品库，很大程度上降低了Echarts的使用门槛，方便初学者使用。而且现在成为了Apache孵化器项目，未来的前景很好。

2、初始绘制图表

需要展示的数据是与日期相关的两条线,每个数据均和一个日期相对应。如下：

// 两条折线图的数据，横坐标是日期，纵坐标为当前日期的数值
    var chartData = {
      line1: ["114", "114", "118", "114", "130", "130", "126", "130", "126", "130", "130", "134", "135", "135", "135", "135", "134", "132", "130", "128", "126", "124", "121", "119", "117", "116", "114", "112", "111", "110", "109", "108", "107", "106", "106", "105", "105", "105", "105", "106", "106", "108", "109", "112", "113", "115", "116", "118", "120", "123", "125", "128", "129", "130", "131", "131", "131", "131", "131", "130", "128", "126", "123", "119", "117", "115", "113", "112", "111", "110", "109", "107", "106", "105", "103", "103", "102", "101", "100", "99", "99", "99", "99", "101", "102", "104", "107", "109", "112", "114", "117", "119", "122", "124", "126", "127", "128", "129", "129", "130", "129", "128", "127", "126", "124", "122", "120", "117", "115", "113", "111", "109", "107", "105", "103", "100", "99", "98", "97", "97", "97", "98", "99", "101", "104", "107", "109", "112", "115", "117", "120", "123", "125", "128", "129", "130", "131", "131", "131", "131", "131", "130", "128", "126", "123", "119", "104"],
      line2: ["124", "124", "128", "124", "140", "140", "136", "140", "136", "140", "140", "136", "132", "128", "128", "124", "124", "120", "116", "112", "112", "112", "112", "112", "108", "108", "108", "104", "108", "104", "104", "100", "104", "104", "108", "104", "108", "104", "108", "112", "116", "120", "124", "128", "124", "120", "124", "128", "132", "136", "140", "140", "136", "132", "128", "128", "124", "124", "120", "116", "112", "108", "104", "100", "104", "108", "112", "116", "112", "108", "104", "100", "96", "92", "88", "92", "96", "100", "100", "104", "104", "108", "112", "116", "116", "116", "120", "120", "124", "132", "132", "132", "132", "136", "132", "132", "128", "128", "124", "124", "120", &