折线图记录

lineOption: {
  color: ['#4685FC', '#FF4D4F','#D9D9D9'],
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '5px',
                right: '5px',
                bottom: '20px',
                top: '50px',
                containLabel: true
            },
            legend: {
                textStyle: {
                    color: '#000',
                    fontSize: 12
                },
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: "#E9E9E9",
                            width: 1,
                        },
                    },
                    axisLabel: {
                        color: "#999999",
                        fontSize:14,
                    },
                    data: ['2024-05', '2024-06', '2024-07', '2024-08']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false, //隐藏X轴刻度
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#E9E9E9",
                            width: 1,
                            type: "dashed",
                        },
                    },
                    axisLabel: {
                        formatter: "{value}%",
                        color: "#999999",
                        fontSize:14,
                    },
                }
            ],
            series:  [
                {
                    name: '有效告警比率',
                    type: 'line',//折线改为line
                    data: [24,46,78,0],
                    symbolSize: 6,
                    symbolWidth: 20,
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 2,
                            }
                        }
                    }
                },
                {
                    name: '屏蔽告警比率',
                    type: 'line',//折线改为line
                    data: [34,56,8,11],
                    symbolSize: 6,
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 2,
                            }
                        }
                    }
                },
                {
                    name: '抑制告警比率',
                    type: 'line',//折线改为line
                    data: [31,51,18,23],
                    symbolSize: 6,
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 2,
                            }
                        }
                    }
                }
            ],
        },          lineOption: {
            color: ['#4685FC', '#FF4D4F','#D9D9D9'],
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '5px',
                right: '5px',
                bottom: '20px',
                top: '50px',
                containLabel: true
            },
            legend: {
                textStyle: {
                    color: '#000',
                    fontSize: 12
                },
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: "#E9E9E9",
                            width: 1,
                        },
                    },
                    axisLabel: {
                        color: "#999999",
                        fontSize:14,
                    },
                    data: ['2024-05', '2024-06', '2024-07', '2024-08']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false, //隐藏X轴刻度
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#E9E9E9",
                            width: 1,
                            type: "dashed",
                        },
                    },
                    axisLabel: {
                        formatter: "{value}%",
                        color: "#999999",
                        fontSize:14,
                    },
                }
            ],
            series:  [
                {
                    name: '有效告警比率',
                    type: 'line',//折线改为line
                    data: [24,46,78,0],
                    symbolSize: 6,
                    symbolWidth: 20,
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 2,
                            }
                        }
                    }
                },
                {
                    name: '屏蔽告警比率',
                    type: 'line',//折线改为line
                    data: [34,56,8,11],
                    symbolSize: 6,
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 2,
                            }
                        }
                    }
                },
                {
                    name: '抑制告警比率',
                    type: 'line',//折线改为line
                    data: [31,51,18,23],
                    symbolSize: 6,
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 2,
                            }
                        }
                    }
                }
            ],
        },

使用：

this.lineChart = this.$echarts.init(this.$refs.line);
        this.lineChart.setOption(this.lineOption,true);