# 效果

# css

* {
    margin: 0;
    padding: 0;
}
.content {
    width: 500px;
    height: 400px;
    border: 1px solid red;
    margin: 100px auto;
}
#main {
    width: 100%;
    height: 100%;
}

# html

<div class="content">
    <div id="main">
    </div>
</div>

# js

<script src="js/echarts.min.js"></script>
let data = [];
let myChart = null
myChart = echarts.init(document.getElementById('main'));
// 创建数据
createData();
let series = data.map(item => {
    let yAxis = item.yAxis.map(item => {
        return item;
    })
    return {
        name: item.seriesName,
        data: yAxis,
        type: 'line',
        legendHoverLink: false,
        symbolSize: 0,
        // itemStyle: {
        //     color: 'green'
        // }, 
        // lineStyle:{
        //     color:'green'
        // },
        markLine: {
            slient: true,
            data: [
                {
                    yAxis: 700
                }
            ]
        }
    }
})
let pieces = [{
    lt: 700,
    color: '#ccc'
}, {
    gte: 700,
    lt: 1500,
    color: 'red'
}];
let option = {};
option = {
    legend: {
        data: data[0]['legendData'],
    },
    xAxis: {
        name: '时间',
        data: data[0]['xAxis']
    },
    yAxis: {
        name: '误差'
    },
    visualMap: {
        top: 10,
        right: 10,
        pieces: pieces,
        show: false
    },
    series: series
}
myChart.setOption(option);
window.addEventListener('resize', () => {
    myChart.resize()
})
function createData() {
    let xData = [];
    let legendData = [];
    for (let i = 0; i < 50; i++) {
        xData.push('aaa' + i);
    }
    for (var i = 0; i < 5; i++) {
        let yData = [];
        for (let j = 0; j < 50; j++) {
            let num = Math.floor(Math.random() * (1500 - 100 + 1) + 100) // 向下取整
            yData.push(num)
        }
        legendData.push('aa' + i);
        data.push({
            xAxis: xData,
            yAxis: yData,
            legendData: legendData,
            seriesName: 'aa' + i
        })
    }
}

# 核心代码说明