Echarts散点图连接所有点

 需求要用数据实现这样一个图，试过折线图，效果可以说大相径庭。然后试了散点图，刚开始根据官方示例Examples - Apache ECharts 来做的，它就是一个一个的点，没连接起来，

 用户给的数据只能形成上面那种效果。然后我就致力于把这些点连起来。

参考ECharts - 散点图scatter 用线连接任意两点_echarts散点图连线_SCY164759920的博客-CSDN博客 也实现了把点连起来的效果，如图：

 他使用的方法就是把所有点用echarts自带的markLine连接起来。这样做需要手动遍历所有点，根据每两个点的坐标，形成一条线段。因为我这个图数据量很大，从它光是那些点就可以连接成一些线段就可以看出，个人觉得多少性能不太友好。

  const handleData = (routeData) => {
        // routeData就是每个点的坐标
        // console.log("routeData", routeData)
        // routeLineData的创建
        let routeLineData = []
        routeData.forEach((item, index) => {
            let newLineArr = []
            // if else 是用来区分出起点和终点，这两个点设置特殊的样式
            if (index != routeData.length - 1) {
                newLineArr = [
                    {
                        coord: [routeData[index][0], routeData[index][1]],
                        lineStyle: {
                            width: 1,
                            type: 'solid',
                            color: '#3E3E3E',
                        },
                    },
                    {
                        coord: [routeData[index + 1][0], routeData[index+1][1]],
                        lineStyle: {
                            width: 1,
                            type: 'solid',
                            color: '#3E3E3E',
                        },
                    }
                ]
            }else{
                // 注意这里是必须的，我不需要将起点和终点连起来，所以没有像原博主那样写
                newLineArr = [
                    {
                        coord: [routeData[index][0], routeData[index][1]],
                        lineStyle: {
                            width: 1,
                            type: 'solid',
                            color: '#3E3E3E',
                        },
                    },
                    {
                        coord: [routeData[index][0], routeData[index][1]],
                        lineStyle: {
                            width: 1,
                            type: 'solid',
                            color: '#3E3E3E',
                        },
                    }
                ]
            }
            routeLineData.push(newLineArr)
        })
        return {
            silent: false,
            symbol: 'none',  //设置为none可以去掉连线的箭头
            //data中接收一个数组, 数组中每个元素为一个“线段”数组
            //每个“线段”数组包括两个对象，分别代表线段的两个端点
            //若要连接多条线段，则在data中添加多个“线段”数组即可
            data: routeLineData
        }
    }

以上其实是我走的弯路，其实散点图本来就可以连接所有点的。

   let option = {
                title: {
                    text: props.chartData.title,
                    left: 'center'
                },
                legend: {
                    left: 10
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                xAxis: {
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                },
                yAxis: [
                    {
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        }
                    },
                    {
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        }
                    }],
                series: [
                    {
                        symbolSize: 2,
                        name: props.name,
                        type: 'line',
                        data: props.data // 这里的data传入所有点的坐标就好
                    }
                ]
            };