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',
                },
              }
            ]
          ]
}

        2.将markLine加到ECharts的配置中

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

---

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

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

        Python绘制的图

 Echarts绘制的图: