ECharts - 散点图scatter 用线连接任意两点

一.效果展示

最近在用Python的plot绘制了一幅连线图，想在ECharts中复现一下，发现ECharts貌似没有提供相同类型的图例，几经踩坑后最后还是复现成功了，先看效果图，确认是否是你期望达到的效果:

        1.未连线状态

         2.修改后的连线状态

---

二.功能实现

要实现连接散点图中任意两点，关键需要使用ECharts中的markLine配置项.

        假如现在散点图中有两个待连接的点 A,B

        A的坐标为(Xa，Ya)

        B的坐标为(Xb，Yb)

现在编写配置使得两个点之间使用一条markLine相连

#实际连线时，确保待连接的两点的坐标为绘制散点图时提供的data中任意两点的坐标，

   以保证达到连线的效果

         1.markLine编写 

markLine: 
{
    silent: false,
    symbol: 'none',  //设置为none可以去掉连线的箭头
    //data中接收一个数组, 数组中每个元素为一个“线段”数组
    //每个“线段”数组包括两个对象，分别代表线段的两个端点
    //若要连接多条线段，则在data中添加多个“线段”数组即可
    data: [ 
            [   
              {
                coord: [Xa的值, Ya的值],
                lineStyle: {
                  width: 1,
                  type: 'solid',
                  color: '#3E3E3E',
                },
              },
              {
                coord: [Xb的值, Yb的值],
                lineStyle: {
                  width: 1,
                  type: 'solid',
                  color: '#3E3E3E',
                },
              }
            ]
          ]
}

// 附上一个routeLineData生成的过程，仅供参考
      // 构建routeData需要使用的三个原始数据，在代码下方提供了图片参考
      console.log("routeData", this.routeData)
      console.log("routeX", this.routeX)
      console.log("routeY", this.routeY)
      // routeLineData的创建
      this.routeData.forEach((item, index) => {
        var newLineArr = []
        // if else 是用来区分出起点和终点，这两个点设置特殊的样式
        if (index != this.routeData.length - 1) {
          // 计算两相邻点之间的距离
          const distance = Math.sqrt(Math.pow(this.routeX[index] - this.routeX[index + 1], 2) + Math.pow(this.routeY[index] - this.routeY[index + 1], 2)).toFixed(2)
          newLineArr = [
            {
              coord: [this.routeX[index], this.routeY[index]],
              label: {
                show: true,
                distance: 0,
                formatter: function (params) {
                  return `${distance}`
                },
                position: "insideMiddleBottom",
                fontSize: 8
              },
              lineStyle: {
                width: 1,
                type: 'solid',
                color: '#3E3E3E',
              },
            },
            {
              coord: [this.routeX[index + 1], this.routeY[index + 1]],
              lineStyle: {
                width: 1,
                type: 'solid',
                color: '#3E3E3E',
              },
            }
          ]
        }
        else {
          newLineArr = [
            {
              coord: [this.routeX[0], this.routeY[0], 0],
              lineStyle: {
                width: 1,
                type: 'solid',
                color: '#3E3E3E',
              },
            },
            {
              coord: [this.routeX[index], this.routeY[index], 1],
              lineStyle: {
                width: 1,
                type: 'solid',
                color: '#3E3E3E',
              },
            }
          ]
        }
        this.routeLineData.push(newLineArr)
      })

routeData routeX routeY的格式如下

        不难看出 routeX 和 routeY 其实是多余的，我原来的Demo里因为之前存了这两个数组所以才在构建routeLineData里用了，其实完全在forEeach routeData时便可取到数据，图方便就没改了。

 routeLineData格式如下

 

        2.将markLine加到ECharts的配置中

    markLine应放到 option的series中，如下图所示:

---

三.复现效果对比【与本文无关】

对比一下使用Python和Echarts绘制的散点图，ECharts可以随意设置每个点的hover显示，颜色样式等，数据可视化效果还是比较不错的。

        Python绘制的图

 Echarts绘制的图: