解决ECharts两条条折线图数据一样时，拐点处数据重合（设置ECharts两条折线图拐点处数据一上一下）

快来打我* 2022-10-10 01:30 1140阅读 0赞

> 解决办法：在`series`里选择一条数据，给其`label`的`position`赋值为“top”或“bottom”，与另一个进行区分。

示例代码如下：

option = { 
        backgroundColor: '#080b30',
        title: { 
            text: '',
            textStyle: { 
                align: 'center',
                color: '#fff',
                fontSize: 20,
            },
            top: '5%',
            left: 'center',
        },
        tooltip: { 
            trigger: 'axis',
            axisPointer: { 
                lineStyle: { 
                    color: { 
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{ 
                            offset: 0,
                            color: 'rgba(0, 255, 233,0)'
                        }, { 
                            offset: 0.5,
                            color: 'rgba(255, 255, 255,1)',
                        }, { 
                            offset: 1,
                            color: 'rgba(0, 255, 233,0)'
                        }],
                        global: false
                    }
                },
            },
        },
        grid: { 
            top: '15%',
            left: '5%',
            right: '5%',
            bottom: '15%',
            // containLabel: true
        },
        xAxis: [{ 
            type: 'category',
            axisLine: { 
                show: true
            },
            splitArea: { 
                // show: true,
                color: '#f00',
                lineStyle: { 
                    color: '#f00'
                },
            },
            axisLabel: { 
                color: '#fff'
            },
            splitLine: { 
                show: false
            },
            boundaryGap: false,
            data: ['A', 'B', 'C', 'D', 'E', 'F'],
    
        }],
    
        yAxis: [{ 
            type: 'value',
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: { 
                show: true,
                lineStyle: { 
                    color: 'rgba(255,255,255,0.1)'
                }
            },
            axisLine: { 
                show: false,
            },
            axisLabel: { 
                show: false,
                margin: 20,
                textStyle: { 
                    color: '#d1e6eb',
    
                },
            },
            axisTick: { 
                show: false,
            },
        }],
        series: [{ 
                name: '注册总量',
                type: 'line',
                // smooth: true, //是否平滑
                showAllSymbol: true,
                // symbol: 'image://./static/images/guang-circle.png',
                symbol: 'circle',
                // symbolSize: 25,
                lineStyle: { 
                    normal: { 
                        color: "#6c50f3",
                        shadowColor: 'rgba(0, 0, 0, .3)',
                        shadowBlur: 0,
                        shadowOffsetY: 5,
                        shadowOffsetX: 5,
                    },
                },
                label: { 
                    show: true,
                    position: 'top',
                    textStyle: { 
                        color: '#6c50f3',
                    }
                },
                tooltip: { 
                    show: false
                },
                areaStyle: { 
                    normal: { 
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
                                offset: 0,
                                color: 'rgba(108,80,243,0.3)'
                            },
                            { 
                                offset: 1,
                                color: 'rgba(108,80,243,0)'
                            }
                        ], false),
                        shadowColor: 'rgba(108,80,243, 0.9)',
                        shadowBlur: 20
                    }
                },
                data: [281.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]
            },
            { 
                name: '注册总量',
                type: 'line',
                // smooth: true, //是否平滑
                showAllSymbol: true,
                // symbol: 'image://./static/images/guang-circle.png',
                symbol: 'circle',
                // symbolSize: 25,
                lineStyle: { 
                    normal: { 
                        color: "#00ca95",
                        shadowColor: 'rgba(0, 0, 0, .3)',
                        shadowBlur: 0,
                        shadowOffsetY: 5,
                        shadowOffsetX: 5,
                    },
                },
                label: { 
                    show: true,
                    position: 'top',
                    textStyle: { 
                        color: '#00ca95',
                    }
                },
    
                tooltip: { 
                    show: false
                },
                areaStyle: { 
                    normal: { 
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
                                offset: 0,
                                color: 'rgba(0,202,149,0.3)'
                            },
                            { 
                                offset: 1,
                                color: 'rgba(0,202,149,0)'
                            }
                        ], false),
                        shadowColor: 'rgba(0,202,149, 0.9)',
                        shadowBlur: 20
                    }
                },
                data: [280.84, 204.97, 333.79, 282.55, 397.35, 213.02, ],
            },
        ]
    };

示例结果如下（当两条折线图拐点的数据大小很相似的时候，其数据就会发生重合现象，因为两条折线图的position都为top）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70]  
此时我们可以将其中一条折线图的数据显示在下方（将其中一条折线图的position设置为bottom，例如“注册总量”这条线）。

部分代码如下：

label:{ 
        show: true,
        position: 'bottom', // 设置拐点处数字出现的位置
        textStyle: { 
            color: '#00ca95',
        }
    },

结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 1]  
这样就可以很好的进行区分。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70]: /images/20221005/5ca662ed0f2547c996cf7a3205e00b9b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 1]: /images/20221005/3292f004ee884181ae591674dd56f025.png